Templates / Ember
Ember — shader-hero brand template
A brand landing page built around a live WebGPU shader — a molten gradient of crimson, umber, and sand folding into itself behind huge serif type. Dressed here as a fragrance house; re-brand it with six CSS variables and one shader config.
Perfume in three states
What the fire leaves behind
What's included
- Full Next.js 15 + React 19 + TypeScript source
- Live WebGPU shader hero — a molten warped-gradient composition running on @basementstudio/shader-lab, exported straight from their editor. Swap the config object to re-art-direct the whole hero
- Graceful degradation built in: no WebGPU (or reduced motion) and the hero falls back to a CSS echo of the same three gradient points — nothing breaks, nothing looks empty
- GSAP + ScrollTrigger choreography: parallax veil handoff, word-by-word manifesto scrub, burn-down progress line, count-up facts
- Micro-interactions that earn their keep — heat-bloom product cards, magnetic CTA, sliding link underlines, counter-drifting ingredient marquees
- One SVG flacon tinted per scent — no product photography needed to look finished
- The whole page reads its palette from six CSS variables — re-brand in one file
- Instrument Serif display voice, mono apothecary kickers, mobile-first Tailwind v4
- Every animation gated behind prefers-reduced-motion
- README covering setup, the shader config, and how each section works
Questions
What license do I get?
A lifetime commercial license for unlimited end products, personal or client work. You can't resell or redistribute the template itself.
What if my visitor's browser has no WebGPU?
The hero detects WebGPU on mount and falls back to a static CSS gradient in the same palette. The rest of the page — GSAP animation included — runs everywhere.
How is it delivered?
Instantly after checkout — a zip with the full source and a README covering setup, deployment, and how the shader hero and scroll choreography work.
Do I get updates?
Yes. Every improvement to this template is free, forever, delivered through your original download link.
Who handles payment and taxes?
Checkout runs through Dodo Payments, our merchant of record. Cards, UPI, and local payment methods work; invoices and taxes are handled for you.