∞ forever components

Loaders

Newton's Cradle

Five pendulum wires hang from a gold bar; the leftmost (magenta) and rightmost (mauve) balls swing alternately with a 0.6s phase offset, simulating momentum transfer.

csslight 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 states that benefit from a physics or computation-in-progress metaphor. Developer tools, data-processing or simulation apps.

When not to

Contexts narrower than 180px width. Confirm the static middle balls read correctly as intentional — they can look broken if the context is unfamiliar.

Working with an AI agent

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

Change ball colors by editing .c15-wire::after background and box-shadow rgba for the magenta balls, and .c15-wire:nth-child(5)::after for the mauve ball. Increase swing angle by changing 35deg in both c15-swing-l and c15-swing-r keyframes. Speed up by reducing 1.2s animation duration. 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

  • magenta ball color (::after background + box-shadow rgba on .c15-wire)
  • mauve ball color (::after on .c15-wire:nth-child(5))
  • swing angle (35deg in c15-swing-l and c15-swing-r keyframes)
  • swing speed (1.2s on animation duration)
  • bar color (#C0B459 on border-top of .c15-cradle)
  • wire opacity (0.15 rgba on .c15-wire background)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • animation-delay: 0.6s on .c15-wire:nth-child(5) — exactly half the cycle; changing this breaks the cradle illusion
  • transform-origin: top center on .c15-wire — pivot at the bar; changing breaks the swing
  • visibilitychange pause handler
  • c15- namespace on all classes
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Middle 3 balls are static (CSS-only, no true physics engine). The alternating swing is a visual illusion.
  • Swing angle above ~50deg breaks the illusion — the balls appear to pass through each other

newtons-cradlephysicspendulumswingmomentumcsssciencetechy

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.