Overview
Lotus Perfume is a production-ready one-page landing for a fragrance, told as a single 3D scene in three.js. Visitors enter through a fogged-glass screen they wipe with the pointer, then a lotus bud falls onto a stone in a pink sea, ripples spread and the flower opens under the line "Bloom is not a season. It's a scent." Scrolling drives the story: a ruby bottle rises out of the petals ("Lift the jewel, slowly."), sprays a rose-red mist ("Three breaths of lotus, one soft red veil."), arcs over the flower and plunges into the water, and sinks through light shafts and bubbles to a stone plinth. There, a frosted-glass showroom lets the visitor pick a size, set a quantity, read the notes and add the perfume to the bag while orbiting the bottle. A chapter timeline, ambient music with a sound toggle, adaptive 3D quality tiers and reduced-motion support are included. Built with Vite 8 and three.js 0.186 with custom GLSL shaders, HDR lighting and bloom; the download ships the editable source, a ready-built dist folder and docs for running, customizing and deploying it.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
