∞ forever components

Loaders

Fluid Metaballs

Three glowing blobs (cyan, purple, pink) merge and divide through an SVG feColorMatrix gooey filter on a near-black background.

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 screens wanting organic, fluid motion. Dark-theme apps with a techy or futuristic aesthetic.

When not to

Light backgrounds (background hardcoded). Performance-sensitive mobile — SVG feGaussianBlur filter is GPU-intensive.

Working with an AI agent

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

Change colors by updating each .c11-ball background and its box-shadow rgba to a new trio. Slow the animation by increasing the 3s duration on all three keyframes. Make blobs larger by increasing 44px width/height on .c11-ball. 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

  • ball colors (background + box-shadow rgba on .c11-ball, .c11-ball--2, .c11-ball--3)
  • animation duration (3s on all c11-move-* keyframes)
  • ball sizes (44px / 30px width+height)
  • travel distance (38px in translateX/Y keyframe values)
  • SVG filter blur intensity (stdDeviation=9) and gooey threshold (feColorMatrix values 20 / -9)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • SVG filter #c11-filter — the feColorMatrix gooey effect; removing it turns blobs into plain circles
  • visibilitychange pause handler in IIFE
  • prefers-reduced-motion guard
  • c11- namespace prefix on all classes
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • SVG feGaussianBlur filter can be GPU-intensive on low-end or older devices
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default

metaballsfluidgooeycss-filterbloborganicphysics

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.