∞ forever components

Loaders

Seed Dispersal Loader

A round tooth-textured plate on pressed-fibre ground where up to twenty-eight seeds lift off a small seed head and drift out of frame on three-hair pappus tails, fading as they reach the rim and respawning at the centre. A specimen-tag label counts the seeds.

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

Loading and processing states in ecological, garden, field-science or slow-craft products; a full-screen wait that should feel like growth rather than a spinner.

When not to

Inline or button-sized waits, or contexts that need a determinate figure.

Working with an AI agent

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

Change N (cap MAX=28), the seed tone via the token read in syncTheme() (--sd21-butter), the head size and drift speed (v in spawn), and the label text; the canvas reads its colours from the tokens and re-reads on a theme switch. 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

  • seed count N (hard cap MAX=28)
  • drift speed and spin (v, spin, drift in spawn())
  • seed tone (the token read into accent) and head ink
  • plate size (min(58vmin,240px)) and the tooth / fibre textures
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • syncTheme() — canvas colours come from the tokens, re-read on forever:theme
  • DPR clamped to 2, one draw per frame, seeds capped at 28
  • prefers-reduced-motion guard (one painted scatter, no rAF loop)
  • visibilitychange pause
  • role=status + aria-live on the stage
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Canvas-drawn: the plate re-fits on resize by reseeding the scatter
  • Noto Sans stacks fall back to the system sans

loaderseedsdispersalcanvasbiophilicpappusdriftorganic

More Loaders components

  • Morphing BlobAurora-gradient blob slowly morphs border-radius and rotates, with an inset dark ghost layer counter-rotating. Soft glow on dark backdrop.
  • DNA HelixTwo columns of 10 glowing dots swing left-right in opposite phases, tracing a rotating DNA double helix. Cycling status messages fade in below.
  • Skeleton ShimmerDark content-placeholder card with avatar circle and staggered text bars swept by a looping gold-to-tan shimmer gradient. Pure CSS, no JS logic.
  • Particle Orbit18 glowing iris, cyan, and magenta particles orbit a white core on wobbling elliptical paths; trailing fill creates a comet-like motion blur effect.
  • Concentric PulseFour concentric rings ripple outward in staggered teal, tan, and slate waves from a beating gradient core dot on a dark background.
  • Equalizer BarsSeven pill-shaped vermillion-to-tan gradient bars bounce at staggered offsets, mimicking an audio equalizer. Pure CSS scaleY animation.