∞ forever components

CSS 3D & Perspective

Coverflow Ring

Eight vivid gradient cards orbit in a 3D coverflow ring with CSS perspective and per-card reflections. Pointer X position steers rotation speed.

csslight complexitymoderate motionpointer

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

Music app hero sections, portfolio carousels, product showcases needing depth and ambient motion.

When not to

Content requiring legible card labels — cards are gradient-only with no text. Low-end devices sensitive to many simultaneous CSS 3D transforms.

Working with an AI agent

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

Change card count to 6 (N=6), swap palette entry 0 to ['#00f5a0','#00d9f5'], and slow base rotation speed by setting vel=0.2. 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

  • card count (N=8)
  • ring radius (R=20vmin)
  • color palettes (palettes array)
  • base rotation speed (vel=0.4)
  • pointer influence range (2.4 multiplier)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause/resume
  • prefers-reduced-motion guard
  • cached vw on resize to avoid per-frame layout reads
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Cards have no text or labels — purely visual
  • Reflection uses CSS mask which may not render on older WebKit
  • Rotation speed snaps on pointer leave (no easing back to default vel)

css-3dcoverflowcarouselringgradientperspectiveambient

More CSS 3D & Perspective components

  • Rotating CubeGlowing sage-green wireframe cube slowly auto-rotates in CSS 3D with a subtle sine-wave tilt; pointer movement offsets the rotation to follow the cursor.
  • Card Deck FanSeven gold-and-mauve playing cards fan open and closed in a sine-wave 3D arc using CSS rotateZ and perspective transform.
  • Folding Paper4-panel paper accordion folds and unfolds in a zig-zag CSS 3D motion, slowly rotating on a dark green background. Cream front and sage back faces alternate.
  • Isometric Blocks3x3 grid of soft lilac CSS 3D cubes bobs in a staggered sine wave on a dark lilac-tinted ground. Three shaded faces per cube simulate isometric lighting.
  • Parallax DepthA glowing sun with colored orbiting dots on layered CSS 3D planes that tilt and parallax toward the pointer; auto-orbits until interaction.
  • Wireframe GlobeA teal wireframe globe of 6 longitude and 5 latitude rings rotates in CSS 3D perspective; pointer steers spin speed and tilt angle.