# Furniture Showroom

> A five-page furniture showroom website template for furniture makers, lighting studios, ceramic studios, product catalogues and independent design ateliers. A bold catalogue cover leads to four dedicated object pages through a three-dimensional catalogue page turn.

Canonical: https://gsapvault.com/templates/furniture-showroom-template
Live demo: https://gsapvault.com/demos/furniture-showroom-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | Not sold singly; comes with the Templates Pass or the Vault |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, 3d-transforms, page-turn, page-transition, soft-navigation, focus-management |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (5 pages, lowest score shown), 4 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A showroom gives an object space to be understood. This five-page furniture website pairs a bold cobalt-and-warm-paper catalogue cover with poster-scale typography, large object numbers, four asymmetric object plates, a material chapter, studio information and an enquiry section. Cane Chair, Slat Bench, Round Table and Low Cabinet each have their own dedicated page and address. Alder is a fictional worked example; the same structure suits furniture makers, lighting studios, ceramic studios and other independent design ateliers.

Navigation opens the catalogue itself. Selecting a piece turns the current view across a vertical spine to reveal its dedicated object page, with a three-dimensional leaf and a reverse turn back to the collection. Destination images are prepared before the view changes, and shared styling stays loaded during normal navigation. Visitors can link directly to an object, browse the collection and use their browser’s Back and Forward controls.

Replace Alder’s identity, object names, photographs and specifications with your own. The home page enquiry form prepares a local unsent draft rather than claiming a purchase or delivered message; object-page enquiry links select the relevant piece. The HTML, stylesheet, JavaScript and bundled image derivatives can be hosted as a static site with no buyer build step.

## Features

- Five standalone HTML pages: the collection homepage and four dedicated object pages
- Poster-scale ALDER catalogue cover, large object numbers and asymmetric photographic plates
- Four-piece editorial catalogue: Cane Chair, Slat Bench, Round Table and Low Cabinet
- Three-dimensional GSAP catalogue page turns around a vertical spine, with a reverse turn back to the collection
- Shared styling remains loaded during normal navigation, with direct page addresses and browser Back/Forward support
- Individual object descriptions and illustrative specifications, with collection and enquiry links
- Material and studio chapters with real workshop photography and native scrolling
- Home enquiry fields for name, email, object of interest and message, with a local unsent draft and copy control
- Object-page enquiry links preselect the relevant piece on the home form
- Cobalt and warm-paper art direction with condensed display typography
- Real HTML links without JavaScript or animation dependencies; instant same-document navigation under reduced motion
- Seven bundled, graded WebP photographs with source credits

## Use Cases

- Furniture makers presenting a small collection and materials
- Lighting and ceramic studios giving each object an individual story
- Independent design ateliers taking project and showroom enquiries
- Product catalogue websites that need a showroom without checkout

## Questions about this template

### What can I showcase beyond the four furniture examples?

The structure suits furniture makers, lighting studios, ceramic studios, product catalogues and independent design ateliers. Replace Cane Chair, Slat Bench, Round Table and Low Cabinet with your own collection, photographs and specifications. The material and studio chapters give you space to explain how those objects are made and how visitors can enquire.

### Does the showroom include a shopping basket or checkout?

No. This is a showroom and enquiry template, with a collection homepage and four dedicated object pages. It does not take payments, calculate delivery or create orders. Link an object to your existing shop for direct purchasing, or connect the home enquiry form to your own sales workflow.

### Will an enquiry reach my studio automatically?

The form is an unwired static front end. It collects name, email address, object of interest and a message, then prepares a local unsent draft that the visitor can copy. Nothing is saved or delivered. Connect Formspree, Netlify Forms or your CRM and update the visible disclosure before receiving real enquiries.

### Can I share a link to one particular object?

Yes. Cane Chair, Slat Bench, Round Table and Low Cabinet each have a dedicated HTML page with its own address, photograph, description and illustrative specifications. Visitors can arrive directly on that page, return to the collection or follow its enquiry link, which selects the relevant object on the home form.

### Are the object specifications and workshop photographs real Alder records?

Alder is fictional, and the included dimensions are illustrative specifications. Real stock photographs demonstrate the showroom layout and material stories; the workshop portrait is not a named team member. Replace the copy with accurate product information and your licensed photographs before presenting the site as your own business.

### Do I need matching studio photographs to use the layout?

The catalogue works best with a small, coherent image set: one room photograph, a clear image for each piece, a material or process detail and a studio scene. You can replace all seven bundled derivatives. Keep each subject visible in its desktop and phone crop, then update captions and alternative text to match.

### What hosting do the animated page transitions need?

Serve the five HTML files and their shared assets over HTTP or HTTPS on an ordinary static host. Normal navigation keeps the styling loaded and prepares the next photograph before changing pages. Reduced motion uses an instant page change; without JavaScript or animation dependencies, visitors follow the same links through ordinary navigation.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### One page for each piece

The collection introduces four objects at different scales, and each opens at its own address. Dedicated pages give photographs, descriptions and illustrative specifications room to be read and shared.

### Turn through the catalogue

The current view turns across a vertical spine, revealing the next page like a leaf in a printed catalogue. Returning to the collection reverses the direction. Destination images are prepared before the turn begins, shared styling stays loaded, and browser history retains the page addresses.

### Material and making

The home collection is followed by timber-finishing and workshop imagery, with space for process, material choices and studio information. The included photographs illustrate the fictional showroom rather than documenting claimed Alder commissions or staff identities.

### Prepare an enquiry

Object-page enquiry links return to the home form with the relevant piece selected. Name, email, object of interest and message become a local draft with a copy control; no message, order or appointment is delivered or stored.

### The visitor chooses the pace

Native scrolling keeps each page readable at the visitor’s pace. Reduced motion changes to the prepared destination without the catalogue turn. Without JavaScript or the animation libraries, the same real HTML links use ordinary page navigation.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Upload all five HTML files and the `assets/` folder to a static host, keeping them at the same directory level. Open `index.html` over HTTP or HTTPS for enhanced page transitions. No buyer build step, framework or package installation is required. Opening files directly retains ordinary page navigation. GSAP, ScrollTrigger and Google Fonts require a network connection unless hosted locally.

### Using It With Your Own Design

Replace the ALDER wordmark, studio details, object names, descriptions and illustrative specifications with your own identity and accurate product information. Update titles, descriptions, navigation and contact destinations across the five pages. Keep captions and alternative text tied to what replacement photographs actually show.

Use the semantic colours in `assets/style.css` before adjusting individual sections. Preserve the navigation layer’s page halves, clipping and perspective structure if retaining the catalogue turn. Keep reveal wrappers and image transforms separate, with their visibility fallbacks. Material or studio chapters can be removed from the homepage; repair their navigation links.

The home enquiry section sends and stores nothing. Connect your own receiving service and update its visible disclosure before accepting live messages.

### Pages and Configuration

| File | Content |
| --- | --- |
| `index.html` | Cover, four-piece collection, material, studio and enquiry |
| `cane-chair.html` | Cane Chair photograph, description and specifications |
| `slat-bench.html` | Slat Bench photograph, description and specifications |
| `round-table.html` | Round Table photograph, description and specifications |
| `low-cabinet.html` | Low Cabinet photograph, description and specifications |

Keep object names, catalogue links, photographs and enquiry choices consistent. Each page is a complete addressable document; a visitor can bookmark or share it independently. The collection is a showroom with no pricing calculator, stock management, checkout or saved order.

### Page Transitions

The shared script enhances ordinary sibling-page links with a three-dimensional GSAP catalogue turn. The outgoing viewport divides at a vertical spine and a leaf turns horizontally to reveal the destination; returning to the collection or navigating back reverses the turn. On the click the current view is held as the catalogue spread while the next page is fetched underneath (links prefetch on hover and focus), and its photographs are prepared before the leaf turns; shared styles and fonts stay loaded. The turn lasts approximately 1.5 seconds once the destination is ready; on a slow connection the spread holds until it is.

Back and Forward retain navigation between page addresses and restore recorded scroll positions. The latest click wins: a link chosen before the turn begins goes straight to that page from the held spread, and one chosen during the turn follows once it has finished, quickly. Back or Forward mid-transition settles on the page the browser asked for, and resizing the window mid-turn finishes it quickly. New page navigation moves focus to the arriving content. Modifier clicks, new tabs, external links and downloads keep their ordinary browser behavior. Reduced motion uses an instant same-document change once the next page is prepared. Missing JavaScript or GSAP, direct file opening and failed destination fetching use ordinary navigation.

Keep all five pages on the same shared CSS and JavaScript, including `assets/navigation.css`. Every page loads `assets/page-router.js` before `assets/script.js`; keep that order on a new page. `assets/page-router.js` is the small page router underneath the turn (link handling, fetching, history, scroll and focus) and should not need editing. The turn itself is the `leave`, `hold` and `enter` functions passed to `PageRouter.create` at the end of `assets/script.js`; the header comment of `assets/page-router.js` lists everything they receive. Any sibling HTML file with a `data-page` wrapper joins the turn automatically. Each page wrapper carries `data-page` and a matching `data-page-key`. Keep the destination’s priority image markings intact so its photograph is ready before the turn. Add `data-native-navigation` to a link or ancestor to retain ordinary navigation. When adding page-specific behavior, include it in the shared initialization rather than relying on a script inside a fetched page. The router cleans up outgoing page interactions and animation contexts and initializes the arriving page; it does not reload shared assets for each move.

### Palette

The palette uses `--ground` and `--on-accent` butter paper `#fff5d6`, `--ink` and `--dark` near-black `#191d25`, `--muted` `#555347`, and `--accent` cobalt `#2144e8`. Update matching RGB triples with each hex value. Retest text and control contrast after recolouring.

Barlow Condensed supplies poster-scale display type at weights 700 and 800. IBM Plex Sans supplies body text at 400, 500 and 600. Update the font links in all five pages and the CSS family tokens together. Check the large wordmark, object numbers and titles at phone widths after replacing content.

### Contact Form

The form lives on `index.html`. Fields are named `name`, `email`, `object` and `message`; name, email and message are required. The object selector offers a general enquiry or one of the four pieces. Object-page links use `index.html?object=cane-chair#enquiry` or the relevant object slug to preselect the piece when the local script initializes.

Preparing an enquiry generates a local unsent draft in a read-only textarea. Copy uses the browser Clipboard API with a manual selection fallback. Nothing is submitted, booked or saved. The controls use `data-prepare-draft`, `data-draft-output` and `data-copy-draft`.

Connect Formspree, Netlify Forms or your CRM to receive enquiries. Replace the local handler and change `method="dialog"` to your service’s required submission method. Adding an endpoint alone is insufficient while the local handler prevents submission. Show sent feedback only after confirmed delivery, and preserve validation and useful error messages.

### Accessibility and Fallbacks

Every object link points to a real HTML page. Native scrolling, visible focus states, labelled form fields and descriptive images support the reading sequence. The router handles destination focus and browser history; it retains real links for direct entry and normal modified clicks.

Without JavaScript or the animation libraries, the full pages remain readable through ordinary navigation. Reduced motion removes animated entrances and the catalogue turn while retaining same-document navigation once the destination is ready. The local draft does not need the animation CDN. With JavaScript disabled, the form explains its local behavior and the contact link remains available. There is no Lenis, pinned scroll sequence or automatic object rotation.

### Dependencies

The demo pin is **GSAP 3.15.0**, including ScrollTrigger. Compatibility floor: **GSAP 3.12+**; keep core and plugin versions matched. Fonts load through Google Fonts with system fallbacks. No backend, payment processor, CMS or submission service is included.

### Images and Credits

Seven cropped, graded WebP derivatives are bundled in `assets/img/`. Original photography is licensed through [Pexels](https://www.pexels.com/license/). Replace it with photography you own or have licensed; do not present stock objects, fictional dimensions or the workshop scene as documentary evidence about your business.

| File | Original source | Subject |
| --- | --- | --- |
| `showroom.webp` | [Pexels 20548025](https://www.pexels.com/photo/20548025/) | Dining room with pale timber furniture and arch doorway |
| `cane-chair.webp` | [Pexels 35108893](https://www.pexels.com/photo/35108893/) | Timber chair with woven cane back |
| `slat-bench.webp` | [Pexels 12233290](https://www.pexels.com/photo/12233290/) | Pale timber slat bench |
| `round-table.webp` | [Pexels 7607461](https://www.pexels.com/photo/7607461/) | Round timber table with vase, tray and candle |
| `low-cabinet.webp` | [Pexels 12277217](https://www.pexels.com/photo/12277217/) | Walnut cabinet with plant and clock |
| `timber-finish.webp` | [Pexels 5466146](https://www.pexels.com/photo/5466146/) | Hands using an orbital sander on timber |
| `workshop.webp` | [Pexels 7483054](https://www.pexels.com/photo/7483054/) | Craftsperson in a workshop; illustrative scene |

To replace a derivative, keep its filename or update every corresponding HTML path, then revise image dimensions, alternative text and captions. Preserve the subject in both desktop and mobile crops. The authoring source manifest records original URLs or shared stock IDs, output sizes and baked saturation/exposure choices.

In the Vault source checkout, edit `assets/img-manifest.json` and regenerate with `bun scripts/build-template-assets.ts furniture-showroom-template --force`. The manifest, source originals and bake tool are internal authoring inputs excluded from buyer downloads. Buyers can replace the bundled WebPs directly without a build step.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template, not sold individually: it comes with the Templates Pass or the Vault. The standard licence covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Templates Pass (£50 one-time): every current and future premium template](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt