∞ forever components

CSS 3D & Perspective

Wireframe Globe

A teal wireframe globe of 6 longitude and 5 latitude rings rotates in CSS 3D perspective; pointer steers spin speed and tilt angle.

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

Dark hero backgrounds, data/tech branding, space or network-themed landing pages needing ambient 3D motion.

When not to

Light backgrounds (color hardcoded dark navy). Contexts where pointer hijacking disrupts scrolling UX on mobile.

Working with an AI agent

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

Change ring color to gold (rgba(255,200,60,.55)), increase longitude ring count from 6 to 10, and slow the auto-spin from ry+=0.5 to ry+=0.25. 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

  • longitude ring count (LON=6)
  • latitude ring positions (LAT array)
  • ring border color (rgba(60,230,200,.55))
  • auto-spin speed (ry+=0.5)
  • pointer tilt range (30deg multiplier)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • prefers-reduced-motion guard + static fallback
  • visibilitychange pause/resume
  • transform-style:preserve-3d on #globe
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Latitude rings use vmin-based translateZ so scaling the globe size requires updating both CSS and JS values

globewireframe3dcss-3drotationambientspace

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.