Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
fractal-glass-hero-demo
We shape the slow moment between a glance and a look.
Vitreo Studio, Lisbon 2026
import { FractalGlassHero } from "@/registry/tween/fractal-glass-hero"
export function FractalGlassHeroDemo() {
return <FractalGlassHero />
}
Installation
Usage
import { FractalGlassHero } from "@/components/ui/fractal-glass-hero"<FractalGlassHero
imgSrc="https://example.com/hero.jpg"
imgAlt="Portrait lit through fluted glass"
headline="We shape the slow moment between a glance and a look."
caption="Vitreo Studio, Lisbon 2026"
/>The hero renders the source image to a Three.js plane and samples it through a stripe of refracted glass that tracks the cursor with eased parallax. Tune glassStrength and stripesFrequency to dial the distortion in or out, and lerpFactor to control how loosely the effect follows the pointer. Users with prefers-reduced-motion: reduce see a static <img> fallback instead of the animated canvas.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imgSrc | string | default hero | Source URL of the hero image. |
imgAlt | string | portrait alt | Alt text for the fallback <img> shown to reduced-motion users. |
brand | ReactNode | Vitreo + mark | Top-left brand link content. |
navLinks | FractalGlassNavLink[] | 3 defaults | Top-right nav links — each { label, href? }. |
headline | ReactNode | Default copy | Bottom-left headline. |
caption | ReactNode | Default copy | Bottom-right caption. |
lerpFactor | number | 0.035 | Per-frame interpolation toward the cursor target. Lower = more drift. |
parallaxStrength | number | 0.1 | Base parallax amplitude before distortion amplification. |
distortionMultiplier | number | 10 | How much the distorted region amplifies the parallax offset. |
glassStrength | number | 2.0 | Stripe displacement strength. |
glassSmoothness | number | 0.0001 | Offset between the 11 averaged samples — raise for softer stripes. |
stripesFrequency | number | 35 | Number of vertical stripes across the image width. |
edgePadding | number | 0.1 | Fraction of the width where the distortion fades to none at the left and right edges. |
className | string | — | Extra classes on the outer section. |