Interior Design Studio Template Template
A complete one-page site for a boutique interior design studio on a warm greige ground, with a draggable before/after slider that wipes a redesigned room over the bare original as its signature.
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.
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
- 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
- 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
Structure
One script initialises every section inside a single gsap.context with gsap.matchMedia, 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.