# Prism Hero

> A scroll-driven hero built around a faceted crystal that genuinely refracts the headline behind it — real transmission with chromatic dispersion, not a blur filter. The headline is rendered to a canvas texture inside the 3D scene, so the glass bends the actual type. Fully procedural: no GLTF models, no HDRI, no textures, no external assets of any kind, which means it survives being pasted into an agent and renders in any sandbox. Adaptive quality tiers scale samples and buffer resolution by device, rendering pauses when the hero scrolls off-screen, and a staticProgress prop pins the build for marketplace covers. Respects prefers-reduced-motion.

- Author: [BEVEL UI](https://21st.dev/@bevelui)
- License: mit
- Tags: 3D Hero, Hero, WebGL, Three.js, Glass
- npm dependencies: three, motion, @react-three/drei, @react-three/fiber
- Live preview: https://21st.dev/@bevelui/components/prism-hero

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/bevelui/prism-hero?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/3d-hero.md