Interior Design Template

Quick Start

1. Unzip the folder and open index.html in a browser, or upload the whole folder to any static host.
2. There is no build step. Every page links assets/style.css and assets/script.js, and loads GSAP and Lenis from a CDN.
3. Serve it over http (not file://) if you want the map to load in local testing.

Using It With Your Own Design

Start with the token block at the top of assets/style.css: the chocolate ground, the cream page, the display orange, the rose for small labels on the colour field, and four mat colours. Every other colour on the site is one of those at another opacity. Then replace the photographs (see Images below), the studio name in the cover and nav, and the copy. The display face is Italiana and the body face is Hanken Grotesk, both self-hosted in assets/fonts/; swap the two @font-face rules and --font-display / --font-body to change them.

To make it an architect's site, rename Projects to Work and the room filter to building types. For a kitchen maker, the room filter becomes kitchen styles and Studio becomes Workshop. For a renovation firm, lean on the before and after: it works on any matched pair of photographs.

Pages and Configuration

Every feature looks for its own markup and does nothing if it is missing, so any section can be deleted.

Cover ([data-cover], home)

Each [data-cover-frame] is one project: a photograph and a linked name. Add or remove frames and their matching [data-cover-dot] buttons. The first frame is the page's main image and is preloaded in the <head>; change that preload if you change it. The cycle waits six seconds per project, pauses while the pointer or focus is on the photograph, and stops with the Pause button. The stacked name is four <span> lines in .cover-word, each with its own indent; for a longer studio name, break it into as many short lines as fit and adjust the padding-left values.

Project tiles and the colour mat

Each tile is an <li class="tile"> with data-room, data-area and an inline --mat colour. Hover or keyboard focus draws the photo in so the mat shows round it. The effect is CSS only.

Filter ([data-filters], projects)

Buttons carry data-filter-room or data-filter-area; their values must match the tiles' data-room and data-area. The two groups combine. When nothing matches, [data-empty] shows with a reset button. Without JavaScript all projects are listed.

Before and after ([data-wipe])

Two images of the same room, .wipe-after underneath and .wipe-before on top, plus a range input. The input's starting value sets the opening split. Both photographs must be the same size and taken from the same position, or the room will jump at the line.

Materials mosaic ([data-mosaic], project)

Each tile is a button whose data-title and data-body fill the dialog. The layout is a named grid (grid-template-areas in .mosaic), with one letter per tile set inline as grid-area; if you add or remove tiles, redraw the area map so it has no holes. There is a separate two-column map for phones.

Stages ([data-stages], studio)

An ordinary swipeable list of four stages. On screens 1024px and wider with motion allowed, the script pins the section and moves the list sideways as you scroll.

Enquiry form ([data-enquiry])

A static front end. It validates the required fields and shows a thank-you message, and sends nothing. Set the form's action to your handler (Formspree, Netlify Forms or a CRM endpoint) and delete the e.preventDefault() line in initEnquiry in assets/script.js.

Map ([data-map], enquire)

The studio pin is STUDIO ([longitude, latitude]) in assets/script.js. The map uses MapLibre GL with OpenFreeMap tiles (no account or key) and loads only when the map nears the screen. If it cannot load, the OpenStreetMap link in the box stays.

Rooms menu (phones)

Below 900px the nav links give way to a Rooms button that opens a full-height sheet of the pages. Edit the list in each page's .rooms-list. The footer carries the same pages for visitors without JavaScript.

Palette

Accessibility and Fallbacks

• The wipe is a native range input with a label and a spoken value; the materials open in a native <dialog>; filters are buttons with aria-pressed and a live count.
• The Rooms sheet is a labelled dialog: focus moves in, Tab stays inside, and Escape, the close button or a tap on its background closes it and returns focus to the button.
• Reduced motion: no cover cycle, no pinning, no reveals; every element is visible and the stages are a plain strip.
• No JavaScript or a blocked CDN: every page reads as a complete document, the wipe shows an even split and the footer carries the navigation.
• Contrast pairs are measured and listed in the stylesheet's first comment.

Dependencies

• GSAP 3.12+ with ScrollTrigger (this demo was built against 3.15.0), plus Flip on projects.html
• Lenis 1.1+ for smooth scrolling (optional; built against 1.3.17). Turn it off with ?smooth=off or data-smooth="off" on <html>
• MapLibre GL 4.7.1 and OpenFreeMap tiles, on enquire.html only, loaded when needed
• Italiana and Hanken Grotesk, both under the SIL Open Font License (assets/fonts/OFL.txt)

Images and Credits

The photographs are bundled as art-directed WebP derivatives in assets/img/, cropped and graded from the originals below. The originals are from Pexels and used under the Pexels licence (https://www.pexels.com/license/). To replace an image, drop your own file in with the same name and size, or edit assets/img-manifest.json and regenerate the derivatives with the asset script that came with your download, or any image tool.

The before photograph is not a real client photograph. before-warrender.webp is an illustrative concept, generated with an AI image tool from the after photograph (Pexels 32940939) and registered to it so that the windows, sills and door line up. It shows how the wipe works; replace both images with your own matched pair before publishing.