REFERENCE
- Gallery page: https://magpui.com/en/i/orbiting-rings-form-a-sphere-2a51cb
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/orbiting-rings-form-a-sphere-2a51cb/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/orbiting-rings-form-a-sphere-2a51cb/clip.mp4
- Original post: https://x.com/okazz_/status/2114730656135819528 by @okazz_
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a looping generative animation of a hollow sphere composed of colored outline rings and short line segments. The changing projected ellipses should make its volume readable without a filled surface. DESIGN SYSTEM: Use a near-black #10120f background, centered sphere occupying 75% of a square canvas, roughly 90 rings and 35 short strokes. Use 1-2px lines in estimated #e4434b, #e4c84b, #3678ae, #e89d48 and #e7ebe7. Vary ring radii from 4 to 35px at a 400px canvas size; no text, controls, panel or glow. MOTION: Start automatically. Suggested reconstruction: rotate the group through a full turn in 18000ms with cubic-bezier(0,0,1,1); each ring tumbles around its local axis over 4000-12000ms with the same linear easing and seeded phase offsets from 0-12000ms. Maintain the spherical boundary while projected ellipses narrow and widen. SECTIONS: A single full-canvas animation with sparse center and denser edges; pause when offscreen. IMPLEMENTATION: Use Three.js line loops and line segments with an orthographic camera, seeded spherical placement and local quaternion rotation. Batch geometry where possible, cap device pixel ratio at 2 and keep allocations out of the frame loop. No interactive controls are needed; mark a decorative canvas aria-hidden and provide an accessible description if meaningful. Reduced motion renders one still composition. ADAPT TO THE PROJECT: Reuse the project's tokens, fonts and components, map these colors to the closest tokens, and never copy logos, brand names, photos or illustrations; use procedural geometry. SUCCESS CHECK:
- The silhouette remains spherical throughout the loop.
- Rings show changing orientation without filled faces.
- Reduced-motion mode is static and offscreen animation pauses.
