Shadcn.io is not affiliated with official shadcn/ui
React Kaleidoscope Background
Hypnotic N-fold symmetric kaleidoscope background for React and Next.js — colored blobs drift through a mirrored wedge to paint an ever-morphing mandala.
React Kaleidoscope Background preview
The ornamental hush of a paper kaleidoscope rendered in pure canvas. A handful of colored blobs drift along noise-perturbed paths inside a single wedge; the canvas then mirrors that wedge N times around the center, so every drift produces a perfectly symmetric flower that morphs without ever breaking its symmetry. One requestAnimationFrame loop, zero dependencies, and a single bright central dot to anchor the eye — ideal for meditative hero sections, launch pages, creative-tool marketing, and portfolio covers that want ornament instead of noise.
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 kaleidoscope background into my projectRelated Components
Orbits
Concentric orbital rings of particles
Ripple
Expanding concentric ripple rings
Vortex
Swirling simplex-noise particle vortex
Mesh Gradient
Stripe-style blurred gradient blobs
Circles
Drifting translucent circle field
Aurora
Emerald northern-lights sheets
FAQ
Was this page helpful?
Sign in to leave feedback.
Interference
Two-source wave interference background for React and Next.js — classic physics demo where two drifting point sources radiate concentric ripples that cross into hyperbolic fringe bands of constructive and destructive interference.
Labyrinth
Animated maze background for React and Next.js — a recursive-backtracker perfect maze fills the viewport while glowing pulses wander its corridors like flashlights threading a puzzle.