∞ forever components

CSS 3D & Perspective

Parallax Depth

A glowing sun with colored orbiting dots on layered CSS 3D planes that tilt and parallax toward the pointer; auto-orbits until interaction.

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

Hero backgrounds, product showcases, or landing pages needing ambient 3D depth without canvas overhead.

When not to

Contexts requiring legible text overlays — tilt motion competes with reading. Avoid on pages where pointer events are consumed by other UI.

Working with an AI agent

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

Change the sun color to warm gold-white (#fff4d6 to #D8D097 gradient), increase dot count in the near layer from 6 to 10, and slow orbit speed by halving all `sp` values. 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

  • sun gradient colors (#ffe39a, #ff7a45)
  • dot color palette (colors array)
  • orbit dot counts (spawn calls: 8 mid, 6 near)
  • tilt intensity (tx*0.18 / ty*0.18 multipliers)
  • perspective depth (700px on #stage)
  • auto-orbit idle speed (auto+=0.02)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • transform-style:preserve-3d on #card
  • visibilitychange pause/resume
  • prefers-reduced-motion guard (reduce var)
  • layer depth cache outside rAF loop
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No reduced-motion static fallback — tile simply freezes on first frame rather than showing a non-animated state
  • Background color hardcoded to #1D1917 in CSS — must edit to change theme
  • Dot sizes in vmin may appear too small on very large screens

parallax3dtiltcss-3dorbitpointerspacedepth

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.
  • Wireframe GlobeA teal wireframe globe of 6 longitude and 5 latitude rings rotates in CSS 3D perspective; pointer steers spin speed and tilt angle.