REFERENCE
- Gallery page: https://magpui.com/en/i/490-hand-drawn-icons-forming-a-logo-1e9cb4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/490-hand-drawn-icons-forming-a-logo-1e9cb4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/490-hand-drawn-icons-forming-a-logo-1e9cb4/clip.mp4
- Original post: https://x.com/_eugrl/status/2109709276004655361 by @_eugrl
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
A logo reveal made of hundreds of small outline icons that drop onto a white canvas, cluster into the logo silhouette, then crossfade into the clean wordmark.
DESIGN SYSTEM
- Background #FFFFFF, icons 24px outline #111 at 1.5px stroke, slight random rotation ±8deg.
MOTION
- Each icon starts above the viewport and falls to a target point sampled inside the logo shape, 900ms, cubic-bezier(0.22, 1, 0.36, 1), with random delays over 2.5s.
- Once all land, icons shrink to 0 over 400ms while the wordmark fades in.
SECTIONS
- Canvas with icons.
- Final wordmark.
IMPLEMENTATION
- Sample target points from the logo SVG path (point-in-path on a grid); render icons with canvas 2D or instanced SVG <use>.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- The silhouette is readable before the wordmark appears.
- Runs smoothly with 500 icons.
- Plays once, then stays on the wordmark.
