∞ forever components

Orphist Colour Discs

Colour Wheel Pulse

36-segment spectral disc spins while an energy crest sweeps its segments, causing slices to pulse outward and flare bright as the wave passes.

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 hero backgrounds, loading screens, or art installations inspired by Orphist simultaneous-contrast colour theory.

When not to

Light backgrounds (hardcoded dark canvas). Contexts needing legible text overlay — constant radial motion competes with reading.

Working with an AI agent

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

Change SPECTRUM to warm sunset tones (['#ff6b35','#f7c59f','#efefd0','#e63946','#457b9d','#1d3557']), slow the spin by setting vel=0.08, and increase SEG to 48 for finer segments. 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

  • colour palette (SPECTRUM array)
  • segment count (SEG=36)
  • spin velocity (vel=0.25)
  • crest sweep speed (dt*7)
  • radial pulse depth (0.62+0.38 ratio)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware fitCanvas sizing
  • visibilitychange pause/start
  • prefers-reduced-motion guard (single static frame)
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No user interactivity — purely autonomous; cannot be driven by pointer or click
  • Background colour hardcoded to #0c0d11 in both CSS and canvas fill

colour-wheelcanvasspectralloopambientgenerative

More Orphist Colour Discs components

  • Simultaneous Disc7 concentric spectrum rings counter-rotate in alternating directions; a shimmer overlay and pulsing center dot evoke Orphist colour.
  • Circular Rhythm26 color discs pulse with sine-wave rhythm via radial gradients on a dark canvas; additive blending creates luminous overlaps in the Orphist palette.
  • Prismatic Window20 colored rectangular planes in a 5x4 grid breathe, skew, and pulse opacity in staggered sine waves over a dark background, evoking Orphist window planes.
  • Endless RhythmA horizontal band of split half-disc circles in spectral colors marches endlessly left in a seamless CSS loop, inspired by Orphist's rhythm motifs.
  • Contrast PairsThree split circles rotate complementary halves against each other — red/green, blue/orange, violet/yellow — enacting Orphist's simultaneous contrast law.
  • Sun & Moon DiscsTwo large radial-gradient discs — a warm sun and cool moon — orbit the canvas center in opposite phase, blending with 'lighter' compositing where they…