KURA Ritual — Skin that feels like morning air.
A brand-first product landing for a four-step morning skincare kit—engineered so ritual education, 3D product storytelling, and batch waitlist conversion share one calm narrative.
View demo siteRole
Design + Front-end
Stack
HTML · CSS · JS · GSAP
Type
Product landing
Year
2026
Challenge
Quiet DTC without catalog clutter.
Barrier-first skincare launches often drown in ingredient lists, review widgets, and stacked promo chips. KURA needed the opposite: a first viewport that belongs only to the brand, then a path that teaches the ritual before asking for an email.
The brief was a single-page showcase for Cloud Cleanse, Dew Essence, Barrier Seal, and Soft Oil—formulated as a set so nothing fights—shipping as a static experience on GitHub Pages.
Solution
One composition. Four quiet steps.
The page opens on brand, headline, one supporting line, and a full-bleed kit stage. Scroll unlocks a sticky product orbit; hover turns a 3D spotlight. Ritual steps, Portland origins, and a batch waitlist close the loop without secondary marketing noise in the hero.
- Hero kit stage with depth-parallax bottles
- Scroll-driven orbit synced to captions and spotlight
- Four-minute ritual section—no guessing
- Origins proof + Batch 47 waitlist CTA
Craft
Motion that earns its place.
Interaction is scoped to product understanding—tilt, orbit, and spotlight—not decorative chrome.
Brand-led atmosphere
Syne display and Figtree body type set a quiet, ritual tone. Mist and sage gradients, grain, and soft orbs replace flat backgrounds so the first viewport feels like morning air—not a catalog grid.
Parallax kit stage
Four product floats sit on depth layers. Pointer tilt and scroll scrub move each bottle independently so the hero reads as one composition with physical presence.
Scroll-synced orbit
A sticky orbit section rotates the kit in 3D as the user scrolls. Captions, dots, and the product spotlight stay locked to the nearest formula—education without a carousel chrome.
Motion with an off-ramp
GSAP + ScrollTrigger power the experience, but prefers-reduced-motion and a no-GSAP path keep layout and copy readable. Motion supports hierarchy; it never gates content.
Outcome
A shippable ritual story on a static stack.
Clear narrative
Brand → kit → how-to → origins → reserve. Each section has one job; the kit never competes with itself.
Lightweight deploy
Vanilla HTML, CSS, and JS with GSAP progressive enhancement—hosted on GitHub Pages with no build step required to preview.
Presence without noise
Intentional scroll and pointer motion establish hierarchy. Reduced-motion users still get the full ritual and waitlist.
Need a product experience that sells the ritual, not the clutter?
HELIDE designs and ships brand-led landing systems with interaction craft that stays out of the way of conversion.