Interactive components for modern interfaces.
A set of beautifully crafted React components and interactions you can customize, extend, and build on.
Embers
ProA slow fire in a fragment shader. Coals burn white along the bottom edge, flames lick up through heat haze, and sparks lift into the dark and wink out. The pointer stirs it.
Installation
npx shadcn add @useplanes/embers
Unlock with Planes Pro
$99 once · 80 Pro components · lifetime updates.
<div className="relative h-[560px] bg-black">
<Embers heat={0.6} />
<h1 className="absolute inset-x-0 top-1/4 text-center text-white">
Your headline
</h1>
</div>Use cases
Hero background
Fire stays in the lower half, so a headline sits on near-black above it.
Launch or countdown page
Turn heat up as the date approaches; the frame gets hotter without a redesign.
Footer or CTA band
Low heat gives a bed of coals and sparks under a single call to action.
Related components
All WebGL components
Logo Flare
Turn any logo into a light source. The SVG becomes a distance field lit with a white-hot core, halo, needle flares, and soft petals over film grain.
Prism
Light through glass. Soft streaks bend across the frame with true chromatic dispersion: blue on one edge, amber on the other, white in the core.
Skywriter
A stunt plane skywrites around your headline. Its smoke hangs in the sky, drifts, puffs up, and dissolves while the next lap is drawn.
Wind Tunnel
Streamlines of real potential flow bend around an invisible wing where your headline sits, with smoke pulses and a turbulent wake.
Cloud Sea
The window seat: a cloud deck seen from altitude, drifting forward under a blue-hour sky with cirrus overhead.
Paper Planes
A flock of paper planes that streams around your headline, chases the pointer, and leaves long-exposure light trails.