3D and Three.js prompt
With a planA four-chapter product page with one sticky canvas: a procedural gem in transmissive, dispersive glass lit by a baked studio, on a lit sweep with a rim glow, while the camera dollies along a spline and the finish changes as you scroll. Three.js, no HDR files.
A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.
Want this on your own site? Pick it for your plan.
Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.
Facet Scroll Product Showcase is included with every Dapols plan
Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.
Unlocking this prompt gives you:
Already have a paid plan?
Not on a plan yet?
The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.
See the plansWant to try one now? Browse the free prompts.
Facet is a product page that tells its story through one object. A faceted gem, built from nothing but procedural geometry, hangs in a single sticky canvas while four chapters of text scroll over it. As the visitor scrolls, a damped timeline moves the camera along a smooth spline, turns the gem, and changes its finish from clear to amber to rose to jade while the page tone and the thin rings behind it shift to match. The glass is a physically based material with transmission, high-index dispersion, a touch of iridescence and clearcoat, lit by a contrasty studio the page bakes itself from a tiny scene of dark gradients, bright blades and softboxes, so there are no HDR files to download. Behind it a lit sweep falls into darker corners, a tinted glow rims the silhouette and a soft contact shadow grounds it, while the glass panels carry a hairline gradient edge, an italic accent word and a progress rail. Scrolling stays completely native, panels keep text above AA contrast, phones get a lower pixel ratio and simpler geometry, reduced motion snaps the gem to each chapter instead of sweeping, and without WebGL a flat SVG gem takes its place. It suits a launch page for a single hero product.
Pairs well with the Atelier and Foundry Looks in the Dapols website studio. See website examples.
No. This page uses completely native scrolling. A tall track holds a sticky canvas, and the script only measures how far the track has scrolled, then smooths that value so the camera and the gem move gently.
The page bakes its own environment with PMREMGenerator from a tiny scene: a dark gradient sky and a few bright rectangles that act as softboxes and blades, which is what gives the facets their contrast. The glass reflects and refracts that, so there is nothing to download.
Phones get a lower pixel ratio, half-resolution transmission, no dispersion and fewer gem facets. With reduced motion there is no loop; the gem snaps to the pose of the chapter in view. Without WebGL a flat SVG gem and fully readable chapters are shown.
3D and Three.jsWith a plan
A cinematic full-viewport hero over 52,000 GPU particles that breathe between a ribbon and a sphere, with depth of field, bokeh, additive glow, a hot core thread, film grain and a lens reticle. Three.js, dark and light.
3D and Three.jsWith a plan
A drop-in animated background: one full-screen shader plane drawing luminous contour lines with relief tints, a key light and depth fog, four CSS-driven colours, a pointer bend and a refined glass card on top.
HeroWith a plan
A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.
Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.
