∞ forever components

Fractals & Automata

Elementary CA

Elementary CA rows scroll upward, aging live cells from bright gold to deep green. Auto-cycles through Rule 30, 90, 110 and other interesting rules.

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 ambient backgrounds, generative/math-themed hero sections, screensavers, or any context evoking emergence and complexity.

When not to

Light backgrounds (hardcoded dark), contexts needing legible text overlays, or low-end devices where per-pixel ageGrid updates may stutter.

Working with an AI agent

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

Change the accent palette to amber — set HOT=[255,220,100], MID=[255,170,50], COOL=[180,100,20] and slow the step rate to STEP_MS=120. 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

  • step rate (STEP_MS=78)
  • color palette (HOT/MID/COOL arrays)
  • active rule set (RULES array)
  • cell pixel size (divisor 150 in resize)
  • reseed interval (ROWS*3)
  • fade steps (STEPS=12)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • ring-buffer head index logic in render()
  • visibilitychange pause/resume guard
  • prefers-reduced-motion static fallback
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS — must edit both html/body and #fr08-stage to change
  • Per-pixel ageGrid loop is O(COLS*ROWS) every frame — heavier than it looks on large screens
  • No user interaction — purely ambient; cannot be wired to clicks without adding event listeners

cellular-automatafractalcanvasgenerativerule-30pixelscrolling

More Fractals & Automata components

  • Mandelbrot ZoomEscape-time Mandelbrot set zooms slowly into a filigree boundary seam, rendered in smooth red-to-gold color bands on a near-black background.
  • Julia MorphJulia set fractal whose complex constant traces a slow Lissajous loop, morphing green filaments between connected and dendritic forms over ~70 seconds.
  • Game of LifeConway's Game of Life with glowing magenta cells aging through three color tiers; field reseeds automatically when population collapses.
  • LeniaLenia smooth-life automaton: glowing teal-to-cyan blobs drift and pulse on a dark field via a typed-array convolution sim scaled up with CSS.
  • L-System FernA fractal fern draws itself branch by branch via an L-system grammar, coloring segments brown-to-gold by depth; it holds then restarts.
  • Domain WarpSlowly flowing domain-warped fractal noise rendered in green, sage, and ink tones; layered fbm warp passes produce marbled smoke patterns.