∞ forever components

Psychedelic

Kaleidoscope

9 liquid blobs drift in a source wedge mirrored into 6-fold kaleidoscope symmetry on canvas; the whole disc rotates slowly with a hot-pink/violet/amber palette.

canvasheavy complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dark-background hero sections, loading screens, ambient psychedelic or music-festival aesthetics.

When not to

Light-background UIs (background hardcoded #0a0612). Layouts where content overlaps the canvas — the constant motion competes with reading.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change SEG from 12 to 16 for 8-fold symmetry, swap PAL first entry to [0,220,255] for a cyan-dominant palette, and slow the global spin to t*0.00004. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • segment count / symmetry order (SEG=12)
  • blob count (N=9)
  • color palette (PAL array)
  • global rotation speed (t*0.000085)
  • blob wobble speed (t*0.0006)
  • blob size range (bs[i] = 0.05..0.16)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • offscreen source canvas pattern (perf-critical — never draw wedge onto visible canvas)
  • IIFE wrapper
  • reduced-motion guard (matchMedia + drawFrame(1200) static fallback)
  • visibilitychange stop/start
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS (#0a0612) — must edit to change
  • Blob shapes are polygons with wobble, not true bezier curves — visible at low blob counts
  • No touch/pointer interactivity — fully passive

kaleidoscopesymmetrypsychedeliccanvasgenerativeambientblobs

More Psychedelic components

  • Liquid Melt7 lava-lamp blobs drift and merge with cycling pink-to-cyan hues on a dark canvas; "MELT" lettering warps per-glyph with skew and scale transforms above.
  • Warp TypeBold serif "WARP" sliced into vertical columns that ripple and bulge over swirling gold-amber lava blobs rendered with additive screen blending.
  • Swirl Vortex5 petal arms across 11 rings rotate at differential speeds to create a slow inward vortex in pink-violet-cyan hues with a glowing core.
  • Blob Lamp9 glowing metaballs slowly rise, sway, merge and split through a violet-magenta-amber color ramp on a dark canvas — lava lamp in canvas pixels.
  • Ripple Bloom22 lobed color rings bloom outward from a glowing center in pink-magenta-violet-cyan hues, cycling with a slow organic wobble via additive blending.
  • Paisley Drift30 psychedelic paisley teardrops drift and morph across a near-black field in green, sage, and gold using additive blending and a trail-wash smear effect.