∞ forever components

Psychedelic

Oil Slick

Layered sine interference across a 120x120 grid maps to a magenta-violet-cyan-gold LUT, producing slow liquid oil-film color bands that scroll and morph.

canvasmedium 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-mode hero backgrounds, psychedelic or holographic brand themes, ambient screensaver-style displays.

When not to

Light-background layouts (background hardcoded dark), contexts needing legible text overlays, or low-end mobile where the pixel loop may stutter.

Working with an AI agent

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

Change the palette by editing the stops array — replace the cyan stop ([0.52, 40,210,235]) with lime green ([0.52, 80,255,80]) and slow the animation by halving all three phase multipliers (0.00018, 0.00011, 0.00026). 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

  • palette LUT stops array (color anchors)
  • simulation grid resolution (FW=120, FH=120)
  • phase speed multipliers (0.00018, 0.00011, 0.00026)
  • sine layer coefficients (3.1, 3.7, 4.2, 5.0)
  • vignette glow CSS rgba values
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • low-res offscreen pattern (FW/FH upscale — critical for perf)
  • IIFE wrapper
  • reduced-motion static fallback (render(8200))
  • visibilitychange pause/resume
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • 120x120 pixel loop runs every frame — moderate CPU cost on battery-constrained devices
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • No pointer/touch interactivity — purely passive

iridescentoil-slickcanvaspsychedelicgenerativeambientcolor-field

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.