∞ forever components

CSS 3D & Perspective

Gyroscope Rings

Three golden gimbal rings spin on independent axes around a glowing core, slowly precessing like a gyroscope. Pointer tilts the whole assembly.

cssmedium 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

Dark-mode hero sections, mechanical or engineering themes, ambient background accent with depth.

When not to

Light backgrounds (hardcoded dark brown). Contexts where constant 3D rotation competes with foreground content.

Working with an AI agent

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

Change ring color to silver by setting .gyr-seg background to linear-gradient(180deg,#e8e8e8,#888), increase SEGS to 60 for smoother rings, and slow precession by changing gyr-prec to 22s. 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

  • ring segment count (SEGS=40)
  • ring radius fraction (RAD=0.46)
  • precession duration (14s)
  • spin speeds (3.6s / 5.9s / 8.7s)
  • gold gradient colors on .gyr-seg
  • pointer nudge range (34deg / 22deg)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion static fallback
  • visibilitychange pause via gyr-paused class
  • transform-style:preserve-3d on all nested elements
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded to dark brown (#1a1410) in CSS
  • Ring geometry built entirely from flat divs — no true toroid mesh, so segments visible at high zoom
  • Pointer nudge disabled under reduced-motion

3dgyroscoperingsperspectivecss-animationambientgold

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.