REFERENCE
- Gallery page: https://magpui.com/en/i/dithered-animal-specimen-board-a87e6b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dithered-animal-specimen-board-a87e6b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dithered-animal-specimen-board-a87e6b/clip.mp4
- Original post: https://x.com/Oriku175/status/2114696044478902462 by @Oriku175
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Looping animal clips: Short seamless looping grayscale video of a single animal in motion (wolf howling, horse galloping, cheetah running, sea turtle swimming, owl flying, frog), high contrast silhouette, side view, plain white background, square 1:1
BUILD: An editorial hero that reads like a museum specimen board. A big two-line title and a short subtitle sit top left. Around them, white cards of different sizes float on a light gray canvas, joined by thin elbow connector lines like a diagram. Each card holds one animal in motion (a howling wolf, a galloping horse, a running big cat, a swimming turtle, a bird in flight, a small frog), drawn as a single-color dither of tiny dots, and each loops its own short motion. Small monospace captions label every card with an index and a concept. It should feel scientific, quiet and alive.
DESIGN SYSTEM: Canvas #E9E9E9 with very faint 1px grid or connector lines #D6D6D6. Title in a clean grotesk sans, about 44px/1.1, weight 400, color #111111; subtitle 14px #555555, max width 280px. Cards: white #FFFFFF, radius 10px, padding 8px, no border, shadow 0 1px 2px rgba(0,0,0,0.04); sizes vary from about 60x60px to 200x200px. Connector lines: 6px wide white bars with 90 degree elbows linking cards, sitting behind them. Captions in monospace 9px uppercase-ish, #777777, like 02 PACKED FOLD or 05 GENE EXPRESSION, placed just outside a card corner. Each animal uses one saturated ink: wolf #1E3FD8, horse #6A2BE0, big cat #E0247A, bird #F06A2C, turtle #22A88A, frog #2DBE3A.
MOTION: Each card plays a seamless loop of its animal (gallop, howl, wing beats, swim strokes), 1.2 to 2.4s per cycle, each card on a different duration so the board never syncs. The dither is recomputed every frame so the dots shimmer slightly as the shape moves. On load, cards pop in with a stagger of 80ms (scale 0.94 to 1, opacity 0 to 1, 420ms, cubic-bezier(0.22,1,0.36,1)) and connector lines draw from one card to the next (stroke length 0 to full, 500ms, ease-out). Optional: hovering a card scales it to 1.03 in 200ms and darkens its caption to #111111.
SECTIONS: Title block top left; a large hero card (wolf) center left; medium cards around it (horse right, big cat lower right, bird top right, turtle bottom left); a small card far left (frog); connector lines between them; captions per card.
IMPLEMENTATION: Render each animal from a looping grayscale video or sprite sheet (placeholder clips) into a small canvas, then apply an ordered Bayer 4x4 dither in a WebGL fragment shader (or a 2D canvas pass for small sizes) that maps luminance to dot on or off, tinted with the card's ink color. Run one shared requestAnimationFrame loop, pause cards outside the viewport with IntersectionObserver, cap internal resolution to about 160px per card and upscale with image-rendering: pixelated. With prefers-reduced-motion, show a single dithered still per card and skip the entrance stagger. Cards are decorative; give the board one aria-label and keep the title as real text.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, typography and layout primitives, map the ink colors to the closest existing tokens, and never copy the original's footage, title or captions; use placeholder animal clips and your own labels.
SUCCESS CHECK:
- Every card loops its own animal as visible dither dots in its single ink color, out of sync with the others.
- Cards stagger in and connector lines draw between them on load.
- Off-screen cards stop rendering and reduced motion shows still dithered frames.
