REFERENCE
- Gallery page: https://magpui.com/en/i/particle-horse-races-a-wireframe-track-2167da
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/particle-horse-races-a-wireframe-track-2167da/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/particle-horse-races-a-wireframe-track-2167da/clip.mp4
- Original post: https://x.com/UXzadriel/status/2115004293933842666 by @UXzadriel
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.
- Horse gallop pose sheet: Side-view silhouette reference sheet of a racehorse gallop cycle, 12 evenly spaced poses, solid black silhouettes on a plain white background, no rider, clean edges, 16:9
Inspired by an original piece shared by zadriel (@UXzadriel) on X: https://x.com/UXzadriel/status/2115004293933842666 . Credit him in a small caption or the footer.
BUILD: Build a dark landing hero where a horse made of glowing particles gallops along a racecourse drawn as a grey wireframe (track rails, grandstands, a tractor, a checkered start line) under a sticky top nav. The camera tracks the horse through a long curve, swings behind it on the straight, then pulls back. Under the hooves, the track surface is a grid of small tiles that light up like video frames as the horse passes. A big centered distance counter ("12 m", "44 m", "138 m") ticks up during the run. When the camera pulls back, a two-line product headline and two buttons appear at bottom left. It should feel cinematic, technical and a bit playful (endless-runner energy).
DESIGN SYSTEM: Background #1b1b1c with fog to #111; wireframe lines #5a5a5c at 1px with 40% opacity, closer geometry lighter #8a8a8c. Particle horse: 20-40k points with additive blending in a gradient of magenta #ff4fd8, pink #ff8fa3, amber #ffc24a, lime #b6ff5a and cyan #59e1ff, size 1.5-3px, with a soft trail. Tiles: 24x14px rounded 2px, dim #2a2a2c, lit with random warm/cool frame colors at 80% then decaying. Nav: 56px tall, logo left, 5 links at 13px #cfcfcf, right side a "Login" link, a white pill "Try free" (#fff, text #111, radius 999px, 32px tall) and an outline pill. Headline: clean grotesk, 44px/1.05, #f2f2f2, weight 500; buttons 32px pills. Counter: 44px tabular numbers #fff with a 10px uppercase caption #8a8a8a below.
MOTION: (1) Intro: scene fades from black over 800ms, wireframe draws in from far to near (line dash offset) in 1200ms cubic-bezier(0.22,1,0.36,1). (2) Gallop loop: horse particles sample a looping gallop animation (baked as morph targets or a point cache of 12-16 poses) at about 12 poses per second; each particle lerps to its target with slight per-particle delay so the silhouette shimmers and leaves sparks behind (spawn 200 sparks/s, life 600-1200ms, drift upward, fade). (3) Camera: a CatmullRom spline along the track, 24s loop; side view on the curve, chase view on the straight, wide pull-back at the end; ease with cubic-bezier(0.45,0,0.55,1) between keyframes. (4) Tiles: when the horse passes within 1 tile, set intensity 1 and decay over 1500ms. (5) Counter: appears on the chase view (fade+8px rise, 300ms), counts with the horse's distance along the spline, hides on pull-back. (6) Headline and buttons fade in 500ms when the wide shot starts, out when the chase starts. Ambient colored bokeh dots float in the foreground.
SECTIONS: Sticky nav; full-viewport 3D hero (wireframe track, particle horse, lit tile floor, bokeh); distance counter; bottom-left headline with primary and secondary buttons; a small round sound/replay button bottom right.
IMPLEMENTATION: Three.js (or React Three Fiber) with a WebGL2 renderer. Track and props as LineSegments from EdgesGeometry of simple low-poly meshes. Horse as THREE.Points with a custom ShaderMaterial: positions from a GPU texture of baked poses, interpolated in the vertex shader; additive blending, depthWrite false. Tile floor as one InstancedMesh with a per-instance intensity attribute. Use UnrealBloomPass sparingly (strength 0.6). Cap pixel ratio at 1.75, pause the loop when the tab is hidden or the hero is offscreen. prefers-reduced-motion: render a single wide still of the horse mid-stride with no camera motion. The headline and buttons are real DOM above the canvas, focusable, with visible focus rings; the canvas is aria-hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest tokens; never copy logos, brand names or the original copy; use placeholder headline text and your own low-poly track.
SUCCESS CHECK:
- The particle horse reads clearly as a galloping horse at all camera angles and leaves a sparkling trail.
- Tiles under the horse light up and fade as it passes, and the distance counter matches its progress along the track.
- The hero stays above 50fps on a mid-range laptop and the DOM headline/buttons remain usable over the canvas.
