REFERENCE
- Gallery page: https://magpui.com/en/i/pulses-through-a-dotted-neural-form-655a37
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pulses-through-a-dotted-neural-form-655a37/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pulses-through-a-dotted-neural-form-655a37/clip.mp4
- Original post: https://x.com/yashisinghh/status/2113540944704180619 by @yashisinghh
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 standalone looping motion study: an organic branching neural-like shape built entirely from tiny dots on black, with white activation pulses moving across its colored paths. Keep the whole silhouette centered and stable; motion comes primarily from changing dot brightness.
DESIGN SYSTEM: Use a square black #030303 stage with roughly 10% margins. Construct a regular grid of circular dots approximately 2px across on a 4px pitch at a 400px stage size. Shape the grid into a knotted central body with thin winding branches and hollow spaces. Color the center deep blue #3435C8, upper and lateral regions green #42B86A, outer tips mustard #CFB356 and occasional lower tips muted red #AB4149. Bright pulses are ivory #F3F0DE. No typography, borders or controls inside the artwork.
MOTION: Start automatically when visible. As a proposed reconstruction timing, send irregular white activation bands along branch paths over 900ms with 150ms offsets, fading back to base colors over 350ms; repeat a 4000ms sequence without abrupt resets. Use cubic-bezier(0.4,0,0.6,1) brightness interpolation. Preserve dot spacing and silhouette while varying which paths light up.
SECTIONS: One centered stage; base multicolor dotted silhouette; traveling white pulses; paused offscreen state.
IMPLEMENTATION: Use Three.js Points with a custom shader assigning fixed grid positions, a procedural silhouette mask, base colors and per-path pulse phase. A small authored path graph may define the shape; sample it onto the regular grid. Keep under 20000 points and one draw call. Cap device pixel ratio at 2, pause offscreen, and show a static colored frame for prefers-reduced-motion. Treat as decorative with an accessible description; if playback controls are added, make them keyboard accessible with visible focus.
ADAPT TO THE PROJECT: Reuse existing project tokens, components and fonts; map the colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use procedural placeholders.
SUCCESS CHECK:
- Shape remains readable as connected winding branches with hollow areas.
- White pulses travel through the colored dot field without moving the grid.
- Offscreen and reduced-motion states stop continuous rendering.
