Bloom Flower — 3D Beauty-Brand Landing Page
Beauty-brand landing page in one HTML file: a 3D flower of sixty petals that opens as you scroll, with petals drifting past.
A complete, scrollable beauty-brand landing page with the 3D built into it: a 3D flower of sixty petals that opens as you scroll, with petals drifting past. It is one self-contained HTML file, built entirely in code, with no image files, no 3D models and no build step. Under the hood: Three.js, petals from one bent shape with vertex-colour gradients, five rings on hinged pivots, instanced stamens, drifting petal particles, scroll-driven opening. What a visitor can do: scroll to open the flower, move and it leans toward you, click for a gust of petals, 4 presets (Peony, Saffron, Lotus, Orchid). Best for: Skincare and fragrance, florists, spas and wellness, wedding and event brands. Three.js loads from a CDN through an import map and the type (Cormorant, Inter) from Google Fonts, so there is still nothing to install. The page is real HTML — a navigation bar, a full-height hero, content sections, a call to action and a footer — so the brand name, headlines and cards are edited as plain text. Colours, counts and speeds sit in a CONFIG block and a PRESETS array, colour themes restyle the page and the 3D together from a small swatch pill, ?embed hides the pill and ?tour scrolls the page by itself.
How to run this
Nothing to install and nothing to configure. Works in any modern browser on Windows, macOS and Linux.
- Built with
- Single HTML file
- Requires
- A modern browser
- 1. Unzip the download.
- 2. Double-click index.html. It opens in your browser and runs. To serve it instead (the microphone and some browsers want a server), run
npx serve .in the folder and openhttp://localhost:3000.
Note — Three.js loads from the jsDelivr CDN through an import map, so the first load needs an internet connection. Its typefaces load from Google Fonts, with system fallbacks if they cannot. It is a full landing page: upload index.html to any static host and it is live. Add ?embed to hide the theme pill, ?preset=N to start on a colour theme, and ?tour to scroll the page automatically.
More like this
Browse 3D designs →
PremiumSunset Arcade — 3D Luxury Hotel Landing Page
Luxury hotel landing page in one HTML file: walk a colonnade at sunset, with long shadows, swinging lanterns and the sea ahead.
PremiumIce Cave — 3D Consulting Landing Page
Consulting landing page in one HTML file: fly through a faceted blue ice tunnel toward the light as you scroll.
PremiumSky Lanterns — Lanterns Rising Over a Lake
Lanterns rising over a lake, in one HTML file. Release your own.
