∞ forever components

UI Micro-interactions

Skeleton to Content

Dark profile card cycles shimmering placeholders then resolves into avatar, image, and text. CSS shimmer sweep plus a JS class toggle drive the reveal.

csslight complexitysubtle 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

Demonstrating loading states, onboarding screens, or any UI that fetches remote data and needs a graceful placeholder before content arrives.

When not to

Production data-fetch wiring — remove the auto-cycle loop and drive `.loaded` class from your actual fetch promise instead.

Working with an AI agent

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

Change the revealed name to 'Sam Park', set avatar gradient to #00d4aa/#A19887, and extend the skeleton delay from 1300ms to 2000ms. 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

  • shimmer speed (@keyframes sh 1.3s)
  • skeleton-to-content delay (setTimeout 1300ms)
  • cycle interval (setInterval 3000ms)
  • avatar gradient colors (#E8AB30, #C09C59)
  • revealed name and subtitle text
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause + clearInterval
  • prefers-reduced-motion guard (jumps to loaded state)
  • .shimmer::after pseudo-element pattern
  • .loaded class toggle driving all reveal states
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Auto-cycles indefinitely — replace cycle loop with real fetch callback before shipping
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default

skeletonloadingshimmerprofile-cardui-patternrevealloop

More UI Micro-interactions components

  • Add to Cart FlyProduct tile flings a mini clone in a bezier arc into a cart icon on click; badge count bumps with a spring bounce. Auto-cycles as demo.
  • Notification BellSVG bell swings and rings with a ripple wave on click; a red badge counter pops in with a springy bounce and increments each ring. Auto-cycles every 2…
  • Copy ConfirmCopy icon morphs to a drawn-stroke checkmark with a green button flash and a "Copied!" toast on click; auto-cycles as a demo loop.
  • Swipe Card StackTinder-style draggable card stack — drag the top card left/right to reveal NOPE/LIKE stamps; fling-away animates it off-screen and cycles to the next card.
  • Pull to RefreshA phone-frame mockup with draggable list rows; pulling down reveals a teal arc spinner that fills and rotates, then triggers a skeleton-row flash on release.
  • Accordion ExpandThree FAQ panels smoothly expand and collapse with a CSS height transition; a chevron rotates 180 degrees to indicate open state. Auto-cycles as demo.