032
Optional AI setup

Interior Design Template

£10

One-page site for any business that shows a space before and after its work: interior designers, renovators, stagers, build firms. The signature is a draggable before/after slider that wipes the redesigned room over the bare original, on a warm greige ground with an editorial hero.

ScrollTrigger Lenis advanced
5 more details
scroll-revealstaggerbefore-afterclip-pathdraggable
Interior Design Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Interior Design Template demo in new tab

About this template

A production-ready site for a small interior design and renovation studio, built to look like a working practice rather than a stock template. It runs on a warm greige ground with near-black type and a single burnt-sienna accent held back for links, one primary button and small markers, so the rooms themselves carry the colour.

Read the full template overview

The signature is a before/after slider. Each room transformation is drawn entirely in CSS and SVG, the bare cold original underneath and the finished warm redesign on top, and a draggable divider wipes one over the other through a clip-path. Two or three rooms sit behind tabs, and the whole thing is driven by a visually hidden range input, so it is keyboard operable, works under touch, and settles at a readable half-and-half split with no JavaScript at all.

The page is structured the way a studio pitches: a restrained editorial hero, a projects introduction, the before/after as the centrepiece, an approach and services list, a materials detail band, a client testimonial and a plain enquiry section. Copy is written for a fictional Bristol studio in a dry, confident voice, and because every room is drawn rather than photographed the template ships with no image files to license or replace.

What's included

11 items
  • Complete deployable one-page site: sticky nav, editorial hero, projects intro, before/after signature, approach and services, a materials band, a testimonial, an enquiry section and footer
  • Signature before/after slider: a draggable divider wipes the finished redesign over the bare original through a clip-path inset
  • Every room is drawn in CSS and SVG, no photography: the cold stripped 'before' and the warm furnished 'after' share the same wall, window and floor geometry so the wipe transforms one space
  • Two rooms behind tabs (a living room and a kitchen), each with its own before and after scene, extendable by copying one panel block
  • Driven by a visually hidden range input, so the divider is keyboard operable, works under touch, and needs no pointer library
  • Degrades to a static half-and-half split with both states visible when JavaScript is off, and to the same split under reduced motion
  • Masked serif hero lines rise on load, and each section reveals on scroll with a restrained stagger
  • Semantic token block with RGB triples behind every translucent value, so a reskin is a handful of edits
  • Sticky nav with an accent primary action, and a projects strip drawn as poster tiles rather than image holes
  • Lenis smooth scrolling wired in and fully optional
  • Accessible: the slider carries a real label and reports its value, tab controls are proper buttons, and contrast is measured as used with body copy at 5.6:1 or better

Perfect for

6 use cases
  • Interior design studios, decorators and renovation practices
  • Architecture and build firms that want to show a space before and after work
  • Home staging, property styling and refurbishment services
  • Kitchen, bathroom and joinery fitters presenting transformations
  • Any trade whose sale is a visible change to a room or object: landscaping, restoration, upholstery
  • Studios that want a drawn, license-clean site with no stock photography to source

How it works

4 sections

Structure

One script initialises every section with a single setup and teardown path and one motion branch, keyed only on reduced motion so exactly one branch runs on any device. Every section is looked up behind a guard, so a buyer can delete the testimonial, the materials band or an entire room and the rest still initialises. Interaction wiring for the slider runs in both motion branches; only the scroll reveals are gated behind the motion preference.

The before/after slider

The two room states are stacked, the finished one on top, and a single custom property sets how far it is revealed. The finished layer is clipped with clip-path: inset(0 calc(100% - var(--pos)) 0 0), so at 50 it shows on the left half and the bare room shows through on the right, and the divider and handle read the same property. A visually hidden range input is the source of truth: its input event writes the property and its value, which is why keyboard, touch and mouse all work without a drag library.

Rooms without photographs

Each room is two SVG scenes over a CSS shell, not an image. The before and after share the same wall, window frame, cornice and floor so the divider reveals a change to one room rather than two different pictures; the before is desaturated and empty with a bare bulb and a cold window, and the after adds furniture, a rug, art, plants and a warm light wash. Because nothing is a bitmap, the scenes stay crisp at any width and the template carries no files to license, grade or swap.

Reduced motion and no JavaScript

The range input has a default value of 50, and CSS sets the reveal property to 50% up front, so with scripting disabled the slider renders both room states split down the middle and every word on the page is readable. The reduced-motion branch does the same and skips only the load and scroll animations, showing the finished page in place. No content is ever hidden behind an ungated opacity or a control that only JavaScript can operate.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Do I need before and after photographs of my projects?

Not to launch. Every room is drawn in CSS and SVG, with the cold stripped before and the warm furnished after sharing the same wall, window and floor geometry so the wipe genuinely transforms one space. That means no photography to source and nothing to license, which is unusual for this vertical.

Can I put my own project photos in instead?

Yes, and most studios will once they have a shoot. The slider clips one image over another through a clip-path inset, so a matched photographic pair drops in. The pair must be shot from the same position or the wipe reveals the mismatch rather than the transformation.

Is the slider usable on a phone and with a keyboard?

Yes. It is driven by a visually hidden range input, so keyboard operation and touch both come from the browser and no pointer library is involved. It carries a real label and reports its value. With JavaScript off it becomes a static half-and-half split with both states visible.

Can I add more rooms?

Yes. Two ship behind tabs, a living room and a kitchen, and you extend by copying one panel block. The tab controls are proper buttons, so adding a room does not mean rebuilding the navigation.

Would it work for a trade other than interiors?

Yes, for anything whose sale is a visible change to a room or object: landscaping, restoration, upholstery, kitchen and bathroom fitting, home staging. If your work has a genuine before and after, the structure fits; if it does not, the signature section has nothing to show.

Will the enquiry form deliver messages?

No. It validates, shows its confirmation and resets, but its action is a placeholder, so nothing is delivered. Point it at Formspree, Netlify Forms or your studio's own endpoint. The room field is worth keeping when you wire it, since it decides which past project you reply with.

Paid template

Purchase to unlock the code.

Buying Interior Design Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

  1. Upload the whole folder to any static host. No build step.
  2. Open index.html and replace the studio name, nav links, copy, project names and footer with your own.
  3. Edit the token block at the top of assets/style.css to reskin (see Palette).
  4. Keep the three CDN <script> tags and assets/script.js before </body>.

The page works with no JavaScript and with reduced motion; see Accessibility.

Structure

The page is one document, section by section, each independent. Delete any section and the rest still runs, because every section is guarded in the script.

Section id What it is
Nav .nav Sticky bar, one accent action
Hero #top [data-hero] Editorial statement in a masked serif, then a finished-room photograph
Selected work #work Four drawn poster tiles
Before & after #transform The signature slider, photographed rooms behind tabs
Approach #approach Four stages plus a services list
Materials .materials Five drawn material swatches
Testimonial #studio One pulled quote
Enquire #enquire Intro, contact details, a plain form
Footer .foot Columns on the ink band

The before/after slider

Each room is a [data-reveal-stage] holding two stacked photographs, a --before (bare, cold, empty) and an --after (finished, warm, furnished), a divider, two tags, and a visually hidden <input type="range">.

  • One custom property drives everything. The range's input event writes --pos (a percentage) onto the stage. The finished scene is clipped with clip-path: inset(0 0 0 var(--pos)), and the divider sits at left: var(--pos), so the two always line up. Before is on the left of the divider, after on the right.
  • No pointer library. The range input is the drag surface. Keyboard, touch and mouse all work for free; touch-action: pan-y on the stage lets a vertical swipe scroll the page while a horizontal drag moves the divider.
  • The photos register because they are cover-cropped identically. Both <img> scenes are object-fit: cover in the same stage, so the before and after stay in the same frame at every width and the wipe reads as one room changing rather than a crossfade. For the effect to convince, shoot (or generate) the before and after from the same camera position and framing — only the decor should change.

Adding or changing a room

  1. Copy a .room-panel block. Give it a unique data-room-panel name, a matching id, and point a new .room-tab at it with the same data-room-tab name and aria-controls. Pairing is by name, not order, so you can reorder or delete freely.
  2. Point its two <img class="reveal-scene"> tags at your own before/after photos (see Images). Use a matched pair (same room, same viewpoint) so the wipe lines up.
  3. Give the new range a unique id and its <label for="..."> a unique target.

To change the resting split, set style="--pos:50%" on the stage and value="50" on the range to the same number.

Per-section options

  • Poster tiles (.tile--a ... .tile--d): each tile's gradient is one rule in the CSS. Change the two colours, the name, the kind and the year.
  • Approach steps: plain <li class="step" data-reveal> items; add or remove them, the grid reflows.
  • Material swatches: each chip is a .swatch-chip--* gradient. Swap the gradient and the two lines of copy.
  • Reveal animation: any element with data-reveal fades and rises on scroll; add the attribute to opt a block in, remove it to keep it static.
  • Lenis smooth scroll: remove the Lenis <script> tag and the Lenis block at the top of initStudio() to drop it. Everything else still works.

Palette

Three colours carry the whole site: a warm greige ground, near-black ink, and one burnt-sienna accent. Everything else is one of those at another value. Every translucent value is mixed from an --*-rgb triple, so a reskin is the token block at the top of assets/style.css and nothing else.

Code snippet omitted: it ships with the download.

Measured contrast (as used, WCAG 2.1)

Every pair is measured composited over the surface it actually lands on.

Text On Ratio Note
--ink --ground 10.7:1 body and headings
--ink --cream 12.8:1 copy inside cards
--ink --ground-deep 9.5:1 the alt band
--dim --ground 5.6:1 secondary copy, labels
--dim --cream 6.7:1
--dim --ground-deep 5.0:1
--link --ground 5.4:1 small inline links
--link --cream 6.4:1
#FFFFFF --accent 4.8:1 solid-button label

Burnt sienna --accent as text measures only 3.4:1 on the ground, so it is used for type only at heading size (the accented hero line and the step numbers, all well over 24px) or on non-text marks (the divider tag, the list bullets). Small inline links use the darker --link instead. Lightening --ink past about #3A342E, or --dim past #5A5049, drops body copy below the 4.5:1 floor.

To reskin, keep those relationships: pick a ground, measure your ink on it to at least 4.5:1 for body copy, and if your accent is lighter than a heading needs, keep a darkened --link variant for inline text.

Accessibility

  • The slider carries a real <label> and aria-label, reports aria-valuenow as it moves, and is fully keyboard operable (arrow keys, Home, End) because it is a native range input.
  • The room tabs are a proper tablist: role="tab"/tabpanel, aria-selected, roving tabindex, and arrow-key navigation.
  • No JavaScript: the tab strip is hidden and every room stacks as a readable document. The slider renders at its 50% default (CSS holds --pos: 50%), so both states of every room are visible. The hero and all copy show in place. Nothing is hidden behind a control that cannot work.
  • Reduced motion: a prefers-reduced-motion media query and a gsap.matchMedia branch both produce the complete static page. The load and scroll animations are skipped, the hero shows in place, and the before/after sits at the 50% split with both rooms readable. The slider still works, because it is an interaction, not an animation.
  • Contrast is measured as used; see Palette.
  • Focus is always visible (a two-pixel accent outline).

Dependencies

  • GSAP 3.15.0 core + ScrollTrigger (CDN)
  • Lenis 1.3.17 smooth scroll (CDN, optional)
  • Google Fonts: Cormorant Garamond + Golos Text

All loaded from CDNs in index.html. No build step, no bundler. The only local assets are the bundled photographs in assets/img/ (see Images).

Images

The hero and the two before/after rooms use bundled, optimised WebP photographs in assets/img/ (five files, well under 1 MB total). They are art-directed derivatives, baked to the studio's warm grade, not raw originals.

  • Swap a photo by replacing the matching file in assets/img/, or, to keep the grade consistent, drop a new source into assets/img-src/, update assets/img-manifest.json, and re-run bun scripts/build-template-assets.ts interior-design-studio-template --force.
  • Before/after pairs must share a camera position and framing (same room, only the decor changes) or the wipe will not line up. Generate the "after" first, then derive the "before" from it so the geometry matches.
  • Credits: the placeholder photography is AI-generated, so there is nothing to attribute. Replace it with your own project photos before you launch.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.