Finish Configurator

Quick start

1. Copy assets/ next to your page.
2. Add the font, stylesheet, GSAP and the script:

Code snippet omitted: it ships with the download.

3. Copy the <section class="fcs" data-finish-configurator ...> element from index.html (between the "copy from here / copy to here" comments) into your page. Everything else in index.html is a bare demo page.

No build step. The script mounts every [data-finish-configurator] on the page.

Make it yours

Product, price and lead time

Set on the section root:

Attribute	Example	Meaning
data-base-price	680	Price with every "included" option
data-base-weeks	6	Lead time with every "included" option
data-currency	GBP	ISO currency for formatting
data-locale	en-GB	Number and date formatting
data-duration	0.85	Reveal and count duration in seconds (0 = instant)
data-url-state	(present)	Read and write the choice in the page URL (?wood=walnut&seat=leather) so it can be shared. Remove it if the section should not touch the URL.

Text inside the section is ordinary HTML: the maker line, the h2 product name, the lede, the "per chair" note, the terms line, the detail caption and the three "after you order" steps. Any element with data-fcs-weeks shows the current lead time, so the same number can appear in your own copy.

Options

Each option axis is a <fieldset data-fcs-axis>; each option is one <label>:

Code snippet omitted: it ships with the download.

• name is the axis name (also used in the URL and the order links).
• data-price and data-weeks are added to the base. data-price is the single source: the visible cost text is rewritten from it on load (it stays as written when JavaScript is off, so keep it in step).
• data-summary is the phrase used in the sentence "Oiled black walnut, tan leather seat".
• The checked option is the default.
• Add, remove or reorder labels freely. Add a fieldset for a third axis, or remove one for a single axis. The legend's data-fcs-current span shows the chosen option's name.

Swatch chips are 240×240 photographs of the material (assets/img/swatch-*.webp). Use any square photo of the finish; a flat colour image also works.

Photographs

Each combination is one <img> inside [data-fcs-plate], keyed by the chosen values in fieldset order:

Code snippet omitted: it ships with the download.

• Give the default combination class="fcs-photo is-shown" and no loading="lazy".
• The set must be matched: same product, same camera position, lens, light and crop, with only the finish changing, and the same backdrop brightness. Frames that shift make the reveal look cheap; a backdrop that changes brightness shows the circle's edge.
• On wide containers the samples sit on the photographed floor at the bottom of the plate, so leave clean floor below the product (about the bottom quarter of the frame). The wide plate uses the aspect ratio in --fcs-wide-ratio on .fcs (here 1400 / 1880, trimming empty backdrop above the 1400×2030 photos) and --fcs-wide-focus decides which part is kept (50% 100% keeps the floor). On narrow containers the plate is square so the chair and the samples under it fit one phone screen; --fcs-focus (object-position) decides what the square crop keeps.
• If your photos have no floor to spare, add data-samples="below" to the section root and the samples stay under the photograph at every width.
• Not every combination photographed? A missing key falls back to the longest matching prefix: with frames only for oak, walnut, ebony, choosing walnut moss shows the walnut … frame. Show the second axis through the swatches alone, and say so in your copy.
• Set --fcs-plate to your photos' backdrop colour so the plate edge disappears while images load.

Images that follow a choice

The back-rail detail beside the price follows the chosen wood. Any group of images can do this:

Code snippet omitted: it ships with the download.

The image whose data-fcs-when matches any chosen value is shown (the first image when none matches), with a quiet crossfade; the circle reveal stays on the main photograph. --fcs-detail-focus sets which part of the detail photo the frame keeps. A <span data-fcs-name-of="wood"> anywhere in the section shows the chosen option's name for that axis (used in the detail caption). Remove the whole <figure class="fcs-detail"> if your product has no detail worth showing; the outcome block then sits under the specifications.

To replace a photo, overwrite the file (or change src/srcset), then update width/height and alt. No animation changes are needed.

Brand variables

On .fcs: --fcs-ground, --fcs-plate, --fcs-ink, --fcs-muted, --fcs-line, --fcs-action, --fcs-action-text, --fcs-font, --fcs-width, --fcs-gutter, --fcs-radius, --fcs-focus, --fcs-wide-ratio, --fcs-wide-focus, --fcs-detail-focus.

Code snippet omitted: it ships with the download.

Actions

Every link with data-fcs-order gets the choice appended as a query string, keeping its path and hash (/order?wood=walnut&seat=leather). Point href at your cart, enquiry form or email. Nothing is submitted by this section.

Behaviour

• Choosing an option reveals the matching photo inside a circle that grows from the chosen sample, with a hairline on its edge. Price and weeks tween over the same duration.
• A new choice during a reveal retargets the one running reveal: the circle keeps its size, moves to the new sample and continues with the new photo. Rapid choices settle on the last one; nothing stacks.
• Choosing the finish that is already settled, while another is arriving, retracts the circle.
• Each frame is decoded before its reveal starts; the frames are warmed when the section nears the viewport.
• Reduced motion (including switching it on while the page is open) and missing GSAP give instant swaps with the same updates.

API

Code snippet omitted: it ships with the download.

Accessibility and integration

• Options are native radio buttons: Tab into an axis, arrow keys to choose, with a visible focus ring on the sample. Touch taps the label.
• A polite status line announces the settled choice once ("Oiled black walnut, tan leather seat: £915, made in 9 weeks").
• Without JavaScript the options still work as a form and every option shows its cost; the photo and totals stay at the default.
• The product name is an h2; change the tag freely (styles use classes).
• The section uses a named container query (fcs), so it adapts to a narrow host column, not only the viewport. It installs no scroll library, never pins, and touches the URL only with data-url-state.
• The delivery week is estimated from today's date plus the lead time, rounded to the next Monday. Remove the data-fcs-date-wrap span if you quote dates differently.

Dependencies and credits

• GSAP 3 (core only), loaded from jsDelivr. Optional: without it the section still works with instant swaps.
• Schibsted Grotesk, Google Fonts, SIL Open Font License.
• Photography is generated concept imagery made for this section: the chair, the workshop and the materials are fictional. Holloway Workshop, its prices and lead times are sample content. Replace them before publishing.