REFERENCE
- Gallery page: https://magpui.com/en/i/symbol-to-point-cloud-225c8f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/symbol-to-point-cloud-225c8f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/symbol-to-point-cloud-225c8f/clip.mp4
- Original post: https://x.com/spoonyvu/status/2108663551015440665 by @spoonyvu
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: Create a self-contained generative motion study for an abstract, original symbol. Keep the same recognizable silhouette as it transforms through a soft scan-line render, a tracked wireframe, a dense LiDAR point cloud, a technical blueprint outline, and a skeletal tracking view. Present the animation like a restrained experimental instrument readout on a near-black canvas, not as a product landing page. Use a newly designed abstract glyph rather than copying any existing mark.
DESIGN SYSTEM: Use a full-viewport near-black #050609 field. Center a single symbol within a 640px square composition, with a thin cool-blue #526BFF line system and restrained icy-white #D9E3FF highlights. Build the symbol from rounded, connected geometric strokes with a clear central opening and asymmetrical upright extension. Keep surrounding overlays very small: sparse coordinate ticks, thin orbit lines, a faint rectangular scan volume, and a tiny data readout in a monospace family. Use 1px hairlines, low-opacity blue-gray surfaces, no cards or shadows, and generous empty space.
MOTION: On load, fade the symbol from 0 to 1 opacity and scale from 0.96 to 1 over 500ms, cubic-bezier(0.22,1,0.36,1). Cycle automatically through five visualization states in order: scan lines, tracked outline, point cloud, blueprint, skeleton. Each transition lasts about 800ms with 120ms overlap, cubic-bezier(0.65,0,0.35,1); interpolate position and opacity of particles and line segments rather than swapping the silhouette. In the point-cloud state, reveal points in a 500ms directional sweep with a 12ms stagger per row. In the blueprint state, draw the outline over 900ms using stroke-dashoffset, cubic-bezier(0.4,0,0.2,1). Drift orbiting scan guides slowly over 6s, linear, and pulse the scan cursor every 1.4s over 180ms. Pause the cycle on pointer hover; resume after 1s.
SECTIONS: One centered motion stage. Include the abstract mark, a subtle scan volume, sparse coordinate labels, and a small state label. States: idle/load, each of the five visual treatments, hover-paused, and reduced-motion static blueprint.
IMPLEMENTATION: Use SVG paths for the glyph and guide geometry, with canvas 2D for the larger particle field; keep particles under 1,500 and cap device pixel ratio at 2. Use requestAnimationFrame and deterministic seeded point positions. Keep the motion local to this component; no external animation dependency is needed. Respect prefers-reduced-motion by showing a static clean outline and a state selector. Provide keyboard-accessible state controls with visible focus rings, and do not require hover to understand the piece.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components, and fonts. Map these colors to the closest existing tokens. Never copy logos, brand names, photos, or illustrations from the reference; use an original abstract glyph and placeholder readouts.
SUCCESS CHECK:
- The same original glyph remains recognizable in all five treatments.
- The point cloud and blueprint draw smoothly without noticeable frame drops.
- Reduced-motion users see a clear static state and can switch treatments by keyboard.
