Horizontal Scroll Template
A horizontal scroll website template written as a furniture workshop's showroom: a headline at display scale running into a photograph, then six plates on one pinned rail that vertical scroll pans sideways, with a timber picker that recolours its plate and a table whose sizes draw over the photograph. Re-points to a furniture maker, a lighting studio, a ceramicist, an interiors shop, a product designer's portfolio or a gallery.
About This Template
Foundry & Form is a complete one-page site for a furniture workshop in Hebden Bridge, and the whole site is one horizontal showroom. The hero sets two lines of Baskervville at display scale with the first piece's photograph bled off the right edge. Then six plates sit on one rail, and scrolling down walks you along it: a chair full bleed with its name and price, a sideboard beside its three-line sizes, two views of a fluted oak table with one bled off the top, a plate that is only type and three timbers, a long table whose dimensions draw themselves over the photograph, and a bench with an invitation to visit the workshop. The bar under the rail shows which piece you are beside and what it costs, with six marks to jump to and arrows either side.
Read the full template overview
The fiction is a workshop that makes furniture to order in three timbers, with prices, sizes and lead times on every piece. The page reads the same with the pieces swapped for lamps, pots, ceramics, a designer's projects or a gallery's works: each plate is a photograph, a name, a price and a line, and the rail adjusts to however many there are. Under the showroom a dark section holds one photograph of the workshop, the figures, and an enquiry form.
Everything is static HTML, CSS and one script: no build step, no framework, two typefaces from Google Fonts. Repaint the five values in the token block to reskin it, drop your own photographs into assets/img, and rewrite the copy. Each section is independent, so any of them can be deleted without touching the JavaScript, and without JavaScript, on a phone, or under reduced motion the six plates stack as six full-width panels.
What's Included
- Pinned horizontal showroom: six variable-width plates on one rail, panned by vertical scroll, with a bar underneath that names the piece you are beside, counts its price, marks the six positions and offers arrows and arrow keys
- Six plate shapes, not one: full bleed with name and price; photograph beside a three-line spec; two views of one piece with one bled off the top; a type-only plate; a photograph bled off the bottom with its sizes drawn over it; a wide photograph with the invitation to visit
- Timber picker: three timbers on a type-only plate, and choosing one recolours the whole plate to that timber and counts two prices to the new figures
- Dimensions drawn on the photograph: three measured lines and their figures draw themselves over the long table as the pointer arrives and undraw as it leaves, with a button that pins them for touch and keyboard
- Hero as type-as-image: two lines of Baskervville at up to 12rem running into a photograph bled off the right edge, masked in on load
- Ghost words drift against the rail on two plates, and the arriving photographs settle from a slight zoom, both driven by the same scrub
- Seven baked WebP photographs, graded as one set, 0.8MB in total, with a manifest to regenerate them from your own
- Warm oat ground, near-black ink and one marking-out blue, every translucent value mixed from RGB triples, so a reskin is a five-value edit
- Designed reduced-motion and phone page: the plates stack as six full-width panels, the timber picker and the sizes button still work with their changes applied instantly
- Readable with JavaScript disabled or the CDN blocked, every plate, price and size included
- Lenis smooth scroll wired on the shared GSAP clock, opt-out per page or per URL
Perfect For
- Furniture makers and joinery workshops selling pieces made to order
- Lighting studios, ceramicists and makers with a short run of products and prices
- Interiors and homeware shops presenting a small, considered range
- Product designers and industrial designers showing a portfolio of objects
- Galleries and dealers presenting a collection or an exhibition piece by piece
- Any site where the content is a sequence of things best walked along in a row
How It Works
Structure
One script, one setup and teardown path, one init per section, each returning early when its markup is absent, so any section can be deleted. A synchronous head script adds a class before first paint so the reveal states apply without a flash, and the main script removes it again if the CDN is blocked. The header is fixed and every plate is padded to clear it and the bar at the foot. In-page links are scrolled by the script rather than the browser, because a native hash jump to a pinned section lands wherever the pinned element currently is rather than at the section's start.
The showroom rail
The six plates are flex children of one track. On a wide screen with motion allowed, ScrollTrigger pins the stage and scrubs the track sideways by exactly its overflow, so the plates can be any width and any number. On every update the script finds the plate nearest the left edge and, when it changes, slides the old name out of the bar and the new one in while a counter tweens the price. The ghost words and the arriving photographs run on secondary scrub tweens tied to the same pan through containerAnimation. Everywhere else the stage takes a stacked class and the plates become full-width panels.
The timber picker
The plate's ground and ink are two custom properties. Each timber button carries its tint and its ink and a price factor; choosing one tweens the two properties on the plate, so the whole plate takes the timber's colour, and tweens a counter object whose two values are written into the readout as pounds. Arrow keys move between the buttons as a radio group.
The sizes on the long table
Three dimension lines and their labels live in an SVG laid over the photograph, in the photograph's own coordinates and cropped the same way, so they stay on the table at any viewport. A paused timeline draws each line from nothing to its full length and fades the labels in, played as the pointer arrives and reversed faster as it leaves. The button plays the same timeline and holds it, for touch and keyboard, and under reduced motion it toggles a class that shows the lines instantly.
Without JavaScript or motion
Without the script the page is a plain document: the six plates stack, the sizes on the long table are drawn, and the bar is hidden. Under prefers-reduced-motion the CSS restores every gated element, the stage stacks, and the same init functions run without tweens, so the timber picker and the sizes button still work.
Questions about this template
It's a furniture workshop in the demo. What else does this design suit?
Anything sold as a short row of things with a price: a furniture maker, a lighting studio, a ceramicist, an interiors shop, a product designer's portfolio, a gallery's collection. Each plate is a photograph, a name, a price and a line, and the rail, the bar and the marks adjust to however many plates there are. Nothing in the layout says furniture except the words and the pictures.
Can I use my own photographs, and what happens to the seven included?
Yes. The seven are graded WebP derivatives of Pexels photographs, bundled for the demo, and you can ship them or replace them. Drop your own files into assets/img with the same names, or edit assets/img-manifest.json with your sources and run the bake script to get matched, optimised WebP with one grade across the set. Full-bleed plates want about 1920 pixels wide; the paired views 1200 to 1400.
How do I add pieces, or have four instead of six?
Each plate is one article in index.html with a name and a price on it. Copy one of the six shapes or delete one, and add or remove its mark in the bar. The rail measures its own width, so the scroll distance, the progress bar and the arrows adjust without any numbers to retune. Four plates is the fewest that still reads as a showroom; ten is the most before the scroll gets long.
Do the sizes on the long table match my table?
No, they are drawn for the photograph in the demo. The three lines and their labels are in an SVG over the image, in a 1000 by 562 coordinate space that crops exactly as the photograph does. Replace the photograph, then move the line coordinates in index.html to where your table's edges are and change the three figures. Delete the SVG and the button if you do not want sizes at all.
How does it behave on a phone?
Under 900 pixels wide the rail is not pinned: the six plates stack as full-width panels in the same order, the bar under the showroom is hidden, and the page scrolls normally. The timber picker works by tap and the sizes on the long table appear from the button rather than on hover. The same stacked layout is what visitors with reduced motion turned on get at any width.
Does the enquiry form send anything?
No. It collects a name, an email, a piece, a timber and a note, and submitting it shows a line saying nothing was sent. This is a static front end with no server behind it, so point the form's action at Formspree, Netlify Forms or your own inbox and it becomes a real enquiry. The prices in the select are the demo's; change them with the copy.
How do I recolour it?
Five values in the token block at the top of style.css: the oat ground, the ink, the blue, the dark ground and the paper that sits on it, each with its RGB triple beside it. Every rule, scrim, dimmed label and focus ring is mixed from those, so nothing is left in the old colour. The timber plate has its own three colours on the buttons themselves, one per timber, and the contrast figure for each pair is written in the same comment.
