Infinitude
Mirrored Light Box
12 nested glowing squares dive inward in a perpetual zoom loop while rotating; colored corner dots hue-rotate continuously over a deep dark stage.
cssmedium complexitymoderate motion
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Dark-mode hero backgrounds, screensavers, or ambient loop visuals needing a hypnotic tunnel-of-light effect.
When not to
Light backgrounds (hardcoded dark stage), or contexts where constant motion competes with foreground content.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change the palette to cool blues by replacing cols with ['#00cfff','#D8C197','#00ffcc','#ffffff','#BCA9AB','#00b4d8'] and slow the spin to 40s in .dot06-rot.
Safe to edit
- frame count (N=12)
- color palette (cols array)
- spin duration (26s in .dot06-rot)
- dive/zoom duration (6s in .dot06-f)
- hue-rotate cycle speed (18s / 8s)
- frame border thickness (2px solid)
Keep intact
- IIFE wrapper
- prefers-reduced-motion guard (REDUCED check + animation:none media query)
- aria-label on stage div
- animationDelay stagger logic (-i*0.5s)
Known limitations
- Background color hardcoded in both CSS and inline style — must change in two places
- No visibilitychange listener — animation runs while tab is hidden
- Corner dots clip at very small viewport sizes
More Infinitude components
- Pulsing Dot FieldA lattice of red dots pulses in radius and alpha via staggered sine waves; bright dots flash yellow at peak. No user input required.
- Mirror Tunnel26 rings of colored dots recede toward a vanishing point, growing in size and radius as they rush toward the viewer — a looping mirrored tunnel illusion.
- The Dotted GourdAn orange ribbed gourd rendered on canvas with 110 dark dots scaled by curvature and depth; the whole form sways gently as if in a breeze.
- The Endless NetA grid of scalloped double-arc loops drawn on deep red canvas, each cell pulsing in brightness on its own sine-wave phase, evoking woven netting.
- Dissolve115 colored dots orbit an empty center in a slow ellipse, periodically dissolving outward in a breathing scatter pattern with depth-based opacity.
- Cadmium Gourd StripesWavy cadmium-yellow and black bands undulate horizontally while 70 white and red dots drift upward through the field in a looping scroll.