Refraction Glass Hero
Free React Hero Section built with Three.js, WebGL, GLSL, GSAP, SVG, TypeScript.
An ultra-minimal, near-black studio hero in Geist with no borders, shadows or background gradients, every space on an 8px grid. A Three.js serpentine ribbon with round U-turns runs edge to edge, its words flowing endlessly along the curve, and its crests rise behind the second line of a headline made of clear, thick glass. The letters really refract it: a WebGL pass bends and magnifies the ribbon inside each letter with a hint of chromatic dispersion, while an SVG lighting filter on the real, selectable HTML text adds a bright top lip, a cool blue bottom lip, a fine hairline and a soft specular highlight from a light that slowly sways across the letters and leans towards the pointer. GSAP runs the intro (nav items rise, letters un-blur into place with SplitText, the ribbon draws on from left to right, then the glass settles in), the scroll drift of the headline and a velocity-based speed-up of the ribbon. A slim three-column nav with a single blue Sign up button, a caption beside the second line and a monospaced meta row. It adapts to tablets and phones, pauses its canvas when off-screen and respects reduced motion.
Installation
npm install three gsapMore Hero Sections
- Lime Studio Hero – React Hero Section
- Ember Desk Hero – React Hero Section
- Perspective Dashboard Hero – React Hero Section
- Formline Studio Hero – React Hero Section
- Card Conveyor Upload Hero – React Hero Section
- Resonance Arch Hero – React Hero Section