∞ forever components

CSS 3D & Perspective

Möbius Ribbon

60 CSS quads form a rotating Möbius strip with amber-to-slate gradient and shimmering edge glints. Pointer nudges the spin.

cssmedium complexitymoderate motionpointermobile-ready

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 →
1

When to use it

Dark-mode hero backgrounds, geometric/mathematical themes, creative portfolio sections needing ambient 3D motion.

When not to

Light backgrounds (hardcoded dark navy). Contexts where continuous rotation competes with readable foreground content.

Working with an AI agent

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

Change ribbon color from amber to electric teal by replacing rgba(224,164,88,...) with rgba(64,220,200,...) and updating the edge glint border color to rgba(160,255,240,var(--e)). 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

  • ribbon color (rgba(224,164,88))
  • quad count N=60
  • radius multiplier (0.30)
  • strip half-width (0.42)
  • rotation speed (t += 0.0042)
  • tilt angle (rotateX(58deg))
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard
  • visibilitychange pause/resume
  • resize handler rebuilding quads
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

  • 60 divs with per-frame inline style writes — can strain low-end CPUs
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Seam visible if N reduced below ~40
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

3dmobiusribboncss-3dgeometryambientperspective

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.
  • Coverflow RingEight vivid gradient cards orbit in a 3D coverflow ring with CSS perspective and per-card reflections. Pointer X position steers rotation speed.
  • 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.