Osma is a single-file HTML template for a perfume house, written as a dark scroll story that follows one perfume from flower to bottle. It is made for niche fragrance brands, independent perfumers and beauty labels with a scent to launch. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs: every visual is drawn in code, and the Bodoni Moda and Hanken Grotesk typefaces are embedded in the page.
One WebGL scene sits behind the entire page: 60,000 particles on desktop, 36,000 on tablets and 16,000 on phones. As you scroll, every point travels on its own delay from one form to the next and curls through a slow current halfway there. The forms are generated in code: a rose whose 26 petals follow the golden angle, the copper coil of a still with liquid running through it and vapour lifting off, a vanillin molecule built to real bond lengths and colored by element, and a bottle filling with liquid that sloshes when you scroll fast. After the bottle the particles unwind into a trail of scent that keeps drifting beneath the collection, the atelier, the discovery set, the FAQ and the newsletter.
The hero moves from the first second, before anyone touches the page. The rose pulses outward from its heart and its petals ripple like silk moving under water, threads of scent and pollen rise out of it, and a wash of color shifts at the edges of the frame. The last word of the headline keeps changing, three note names circle the flower in 3D and dim as they pass behind it, the buttons drift toward the cursor, and a ticker of raw materials slides along the foot of the screen. Move the pointer and the particles part around it in widening rings; the first flick of the scroll stirs the whole scene.
When a scroll gesture ends, the page glides on to the next chapter or section instead of stopping between two. Chapter names in the header track your progress and jump straight to each form, and titles build letter by letter, running in reverse when you scroll back up. Below the story, pale paper cards float over the live scene: three perfumes with dot signatures for their top, heart and base notes, a discovery set, an FAQ that keeps one answer open at a time and a newsletter form with inline messages. The download is a ZIP with the finished page (index.html) and RECREATE.md, which holds the complete page source and notes on how the motion system works. Brand names, prices and contact details are placeholders for your own.
Key Features
– Plain HTML, CSS and JavaScript in one file, with no framework, no build step and no image files
– WebGL scene of up to 60,000 particles that morphs from rose to still, molecule, flacon and scent trail
– Hero that moves before any input: a pulsing rose, rising scent threads, a changing headline word and orbiting note names
– Scrolling that glides on to the next chapter, plus header chapter links that jump straight to each form
– Perfume cards with dot signatures for top, heart and base notes, a discovery set card and an FAQ accordion
– Reduced-motion mode with a still of each form, and a static layout wherever WebGL is unavailable
– Native dialog menu, skip link and a labeled newsletter field with inline error and thank-you messages
Ideal For
Niche perfume houses, independent perfumers and new fragrance launches.
Beauty and craft brands that want to show how their product is made.
Studios pitching a dark, motion-led brand site with no photography to license.
