React Prism Background
Animated optical-bench prism background for React and Next.js — a white beam enters a triangular glass prism and exits as a fanning rainbow spectrum that sweeps gently across the viewport.
React Prism Background preview
A scientific-poster moment rendered in pure 2D canvas: a dim triangular prism sits on a faint optical-bench grid while a single white beam strikes one face, refracts, and exits as seven dispersed color bands — red bending least, violet bending most, exactly as Snell and Newton predicted. The incoming angle oscillates slowly, so the rainbow fan sweeps across the right edge of the page like light through a slowly rotating crystal. Zero dependencies, one requestAnimationFrame loop, palette and angle range fully controllable via props. Perfect for physics and optics product pages, design-tool launches, creative-agency landings, AI/ML hero sections that want to evoke "prism of possibilities", and any dark hero that needs a single decisive, memorable light beat.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the prism background into my projectRelated Components
Aurora
Emerald northern-lights sheets
Silk
Iridescent flowing satin gradient
Gradient
Soft animated gradient wash
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Beams
Parallel animated gradient beams
Light Waves
Ambient vertical color washes
FAQ
Was this page helpful?
Sign in to leave feedback.
Portal
Concentric rings receding into a vanishing point — a hypnotic perspective tunnel for React and Next.js with glowing cyan and violet rings, a slow axial twist, and continuous forward travel.
Rain
Atmospheric rain animation with realistic falling droplets, depth layers, and subtle lightning flashes