∞ forever components

Psychedelic

Mandala Breathe

Radial petal mandala with two counter-rotating rings that breathe open and closed in a 9-second sine cycle; gold-teal gradients on dark background.

svgmedium 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

Meditative or ambient hero backgrounds, wellness/mindfulness apps, psychedelic-themed creative portfolios.

When not to

Content-heavy layouts where slow cyclic motion competes with reading. Light-background UIs — background color is hardcoded dark.

Working with an AI agent

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

Change the outer ring petal count to 16 by editing the first buildRing call (12 → 16), and shift the gradient accent to green by updating ps09-g3 stop colors to #7aff9b and #00c94a. 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

  • outer ring petal count (buildRing first arg: 12)
  • inner ring petal count (buildRing first arg: 8)
  • breath period in seconds (9s in sin divisor and CSS animation-duration)
  • gradient stop colors (ps09-g1, ps09-g2, ps09-g3)
  • petal length and width (len/wid params)
  • breath scale range (sOut 0.82..1.12, sMid 0.80..1.10)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • visibilitychange pause/resume guard
  • prefers-reduced-motion static fallback
  • separate breath wrapper groups (bOut/bMid) that avoid fighting CSS spin transforms
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded to dark (#0a0612) in both CSS and radial-gradient — must edit both to change
  • JS writes SVG transform attributes every frame; will not composite on GPU like CSS transforms would
  • Breath and spin are separate layers (wrapper trick) — removing wrappers will break animation

mandalapsychedelicsvgbreathingradialambientloop

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.
  • Kaleidoscope9 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…
  • 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.