3D Product Showcase Website Template

Open the folder through any static server (videos and ES modules do not load from file:// in every browser), edit the copy and upload it to any static host. There is no build step. Pages are ordinary HTML files that share assets/style.css and assets/script.js; only index.html also loads assets/stage.js and three.js.

Two things in index.html are required and must stay where they are:

1. The head script before the stylesheet. It adds has-js (gates the scroll reveals) and, when the device has WebGL 2 and no reduced-motion preference, gl (switches the stage from stacked sections to the sticky WebGL frame). Both happen before first paint, so neither version flashes. Every page also adds js, which swaps the no-JavaScript menu and shop links in the bar for their buttons.
2. The import map and module shim at the end of <body>. They load three.js r180 and its RoomEnvironment lighting helper as ES modules, then hand them to assets/stage.js with an oriel:three-ready event. If the module fails, the shim removes gl and the fallback shows.

Start with the token block at the top of assets/style.css: tide (dark ground), salt and paper (reading grounds), ink, foam and one cedar accent, each with an RGB triple. Then open the ORIEL_STAGE settings object at the top of assets/stage.js:

Your shop is the ORIEL_SHOP list at the top of assets/script.js: one entry per thing you sell, with a name, a detail line, a price, a picture and a link. Prices printed in the HTML must agree with it. The same file holds ORIEL_WEAR (the words on the how-it-wears slider) and ORIEL_LEDGER (the batch ledger).

Keep the data- hooks on elements whose behaviour you want: data-stage, data-stage-frame, data-stage-mount, data-stage-block, data-stage-video, data-stage-index, data-spray, data-hero-fade, data-reveal, data-reveal-group, data-menu*, data-buy, data-bag-open, data-bag-count, data-in-bag, data-silhouette, data-wear*, data-range*, data-ledger*, data-formula*, data-stockists, data-shop, data-letters, data-stepper, data-newsletter. Every feature is guarded: delete a section or a whole page and the rest still runs, but remember to take its link out of the menu and footer on each page.

• Stage. One hero block and three chapter blocks. Each chapter owns one <video data-stage-video="n">, muted loop playsinline autoplay, with a poster. With WebGL the clips keep playing underneath the canvas as textures and only the ones in view play; without it they are the backgrounds of four stacked sections. The hero's .stage__brand line is visually hidden because the canvas (or the composed still) draws the wordmark; it remains the heading's accessible text. If you replace the still with a picture that has no wordmark, delete that CSS rule.
• The bottle. Built in buildBottle() in assets/stage.js, and used by both the stage and the Collection section, from an extruded rounded rectangle (body), two cylinders (neck and brass collar), a squashed sphere (stone cap) and a plane with a canvas label. BODY_W, BODY_H, BODY_D, BEVEL and RADIUS set its proportions. To use your own product, load a glTF with three.js's GLTFLoader, add it to the bottle group and reuse the glass material on its glass parts.
• Pointer and spray. Hover drives the lens and tilt on mouse devices; touch devices get a slow drift. Pressing on the stage (not on a link or button) mists the atomiser and sends a ripple through the footage; the Spray button does the same for keyboard users.
• Chapter index. The 01 / 02 / 03 links jump to the settled position of each chapter, through Lenis when it is running. It is hidden on the hero and on narrow phones, where each chapter's kicker carries its number.
• Home sections. Atelier, Formula, Wearing and Stockists are short plain previews with links to their pages. Formula rows are a list; add or remove rows freely. The Collection preview uses the same buy form as the product page, and its bottle is the same 3D model, scaled by each size's data-scale, over the clip in data-silhouette-video; without WebGL the section shows the matching pack picture.
• Menu. A full-screen overlay and the navigation on every page. It stops Lenis while open (hence data-lenis-prevent), holds Tab inside, closes on Escape and returns focus to the Menu button. The current page carries aria-current="page", which you set per page. Without JavaScript the bar shows a link to the page list in the footer instead.
• Inner-page bar. Fixed, tucks away on the way down and returns on the way up. bar--dark matches it to a dark first section.
• Newsletter. A static form that collects one email and shows a thank-you message without sending anything. Give it an action for Mailchimp, Buttondown, ConvertKit or Formspree and delete initNewsletter().

The bag

initBagPanel() builds one slide-out panel, shared by every page. It keeps a list of skus in localStorage (wrapped in try/catch, so a blocked store only means the bag lasts one page), and draws quantities, removal, an emptied state, shipping, a vial credit and a total. The credit rule is ORIEL_SHOP.credit; delete it and its row if you have no equivalent. Nothing is reserved or charged: the checkout button only prints a message. To sell for real, replace the data-bag-checkout handler with your cart, such as Shopify Buy Button, Stripe Payment Links or Snipcart.

Any form[data-buy] adds to the bag. Radios carry data-sku; a single product uses a hidden input with data-sku. The price, any [data-pack-for="sku"] picture and the data-in-bag line follow the choice. salt-cedar.html?size=100 opens with that size chosen.

Inner pages

• salt-cedar.html. Buy form, then the how-it-wears section: a native range crossfades three stacked clips (each with a lazy poster image underneath) and redraws three strengths. Change the words in ORIEL_WEAR, the colour points in draw(). Then notes, refill (#refill), shipping and care (#shipping).
• collection.html. Each [data-range-row] names its picture with data-range-key. data-lasts holds millilitres; the slider divides by ORIEL_ML_PER_SPRAY. On phones each row shows its own picture instead of the large one.
• atelier.html. Offset portraits, then the ledger. The bars are generated from ORIEL_LEDGER, and the height of each is the swell; use it for vintages or harvests with any number that varies.
• formula.html. Rows hold their own percentage, place and story; the strip and the amounts are generated from them. Keep the percentages summing with the carrier rows to 100. On phones the picture opens under the row you tap.
• stockists.html. See below.
• journal.html and the two articles. Letters are native <details> filtered by data-letter. data-stepper steps through written states with a range or radios, and without JavaScript every state prints as text.

Stockists

A real street map: MapLibre GL on OpenFreeMap tiles, loaded only when the map reaches the viewport. There is no key or account. Each shop is a list item with data-lng, data-lat, data-region and optional data-refills, data-loft and data-home; each one gets its own pin, and the filters read the same attributes. The style and library URLs are constants above initStockists(). Keep the OpenStreetMap attribution, which the licence requires. Without WebGL or JavaScript the container keeps a link to the place on openstreetmap.org. Wheel and one-finger touch scroll the page, not the map.

Clips are 1920x1080, 24fps, six seconds, with no audio track, cross-faded end to start so they loop without a jump. Fig and cedar ship as a VP9 WebM, listed first because it is a fraction of the size, with an H.264 MP4 fallback; salt ships as MP4 only, because on dense surf H.264 came out both smaller and sharper. Only the hero clip autoplays: the chapter clips are preload="none" and start a chapter before they are needed, so the page does not fetch footage nobody has scrolled to. When you swap a clip, keep that pattern, or drop the WebM <source> and keep the MP4. Slow, textured footage refracts best; flat or blurred clips make the glass look empty. Photographs are baked WebP derivatives; to use your own, replace the files in assets/img/ at the same sizes.

hero-still.webp and hero-still-portrait.webp are frames rendered from the WebGL stage itself; after changing the bottle or clips, screenshot your own stage with the copy hidden and replace them.

pack-salt-50, pack-salt-100, pack-salt-vial, pack-notes, pack-flask, pack-loft, range and their -800 and -960 sizes are the product pictures. They are rendered from the same 3D bottle as the home page, with simple modelled vials and a flask, over the footage or a photograph, and they carry the Oriel label wording, so replace them with your own pack shots at the same names and proportions. pack-flask uses the foam photograph above as its ground, and pack-loft uses https://www.pexels.com/photo/26976385/. Photographs of people are stock photographs of models, not of anyone named in the copy. foam, range, pack-salt-50, bench-dark, shop-counter and rui-pour have a smaller phone-sized file, used through srcset; replace both.

Fonts

Castoro (regular and italic) and Red Hat Text are self-hosted in assets/fonts/, so the page makes no render-blocking third-party request. The files are the Latin subsets Google Fonts serves; Red Hat Text is one variable file covering weights 400 to 500. They are declared by the @font-face rules at the top of assets/style.css, and the two regular faces are preloaded in the <head>. The canvas wordmark and bottle label draw with the same family names, so keep them if you swap the files.

Licence: SIL Open Font License 1.1, full text in assets/fonts/OFL.txt. Castoro: copyright 2020 The Castoro Project Authors (https://github.com/TiroTypeworks/Castoro). Red Hat Text: copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont).

To change a typeface, put your .woff2 in assets/fonts/, point the @font-face rule and the --font-display or --font-body token at it, and change or drop the font preload in the <head>. To load a Google font instead, delete the @font-face rules and the preloads and add the Google Fonts <link> to the <head>.

One palette. Measured contrast pairs are recorded in the :root comment of assets/style.css. Type over footage sits in the lower third, where the stage scrim is strongest; keep new stage copy there. --cedar is never body text on salt; use --cedar-ink.

Content is real HTML throughout: the stage copy, chapter headings and index are in the document whether or not the canvas exists, and the canvas is aria-hidden. All actions are native links and buttons with visible focus, a skip link leads to the content, and the menu manages focus. The pointer lens and tilt are decorative; the spray has a keyboard button. Under reduced motion the WebGL stage never starts, the clips are held on their poster frames and every reveal is visible. With JavaScript off the stacked stage and all pages render without gates, the bar links to a page list in the footer, and the slider and stepper content prints as plain lists. With the CDN blocked the menu, bag and hands-on controls still work. The bag is a labelled dialog that holds focus and returns it; ranges announce their state through aria-valuetext; the formula strip is a pointer convenience alongside the row buttons, which are the real controls. Page transitions are a short CSS crossfade that is turned off under reduced motion.

GSAP 3.15.0 and ScrollTrigger (compatibility floor GSAP 3.12+), Lenis 1.3.17 (optional), three.js r180 through the import map on the home page only, and MapLibre GL 4.7.1 with OpenFreeMap tiles on the stockists page only. Castoro (regular and italic) and Red Hat Text (400, 500) are self-hosted in assets/fonts/ (see Fonts). GSAP owns the matchMedia branches, teardown, stage scroll progress, the hero intro, chapter copy transitions, reveals and the collection picker; the three.js loop on gsap.ticker owns every continuous stage value (pointer chase, bottle turn, footage dissolve, mist). If your site already imports three.js, reuse that module in the shim rather than loading a second copy.

Pages are ordinary loads, so nothing needs tearing down in the shipped site. If you move a page into a client-routed app, call window.gsapContext.revert() before removing it. It stops the frame loop, disconnects the observers, disposes every geometry, material and texture, releases the WebGL context, removes the canvas, the map, the bag panel and all owned listeners, destroys the Lenis instance it created and leaves unrelated animations alone.

index.html, salt-cedar.html, collection.html, atelier.html, formula.html, stockists.html, journal.html, journal-salt-has-no-smell.html, journal-six-weeks-in-the-dark.html, assets/style.css, assets/script.js (every page), assets/stage.js (home only), assets/favicon.svg, assets/video/, assets/img/ and assets/fonts/ make up the deployable site.

The WebGL stage needs WebGL 2 and import maps (current Chrome, Edge, Firefox and Safari). Everything else falls back to the stacked stage. On a device that will run the stage, the probe in the <head> starts three.js downloading straight away (modulepreload), in parallel with the rest of the page; other devices never fetch it. The glass uses three.js transmission, which renders the backdrop a second time each frame; the stage only renders while it is on screen. Lower dprFine first, then set dispersion to 0 in the glass material. The three clips total about six megabytes. Inner pages load no three.js; the footage on the product page starts only when its section is on screen, and the map library loads only when the map is reached.