Originals
Caustics
A glass card casts caustics — the moving net of light at the bottom of a pool — onto the page behind it, split into colors like a prism. Move the pointer: you are holding the lamp.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { CausticCard } from '@vizzele/react/gl';
<CausticCard spread={90} scale={70}>
<h3>Liquid light</h3>
<p>The light underneath moves with your pointer.</p>
</CausticCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
spread | number | 90 | How far the light spills around the card (px). |
scale | number | 70 | Size of the light cells (px). |
speed | number | 0.6 | Animation speed. |
intensity | number | 1 | Brightness. |
radius | number | — | Corner radius of the projection (defaults to the card’s). |
cardClassName | string | — | Class for the glass card. |
Accessibility
- Decorative canvas (aria-hidden); the card content is plain HTML.
- Pauses offscreen and renders one still frame under reduced motion. No WebGL: a soft glow instead.