Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.
Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.
REFERENCE - Gallery page: https://magpui.com/en/i/dot-matrix-dissolve-shader-on-a-product-photo-e3d719 - First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dot-matrix-dissolve-shader-on-a-product-photo-e3d719/shot.jpg - Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dot-matrix-dissolve-shader-on-a-product-photo-e3d719/clip.mp4 - Original post: https://x.com/logan_liffick/status/2110822273615573461 by @logan_liffick 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 dark e-commerce hero: headline on the left, a product photo on the right whose right half dissolves into an animated dot-matrix pattern that pulses and drifts across the image. DESIGN SYSTEM - Background #000, headline 40px white weight 500, small pill button. - Dots: white, 3-6px, on a 10px grid; dot size driven by image luminance. MOTION - Fragment shader samples the photo on a grid; dot radius = luminance * pulse, where pulse = 0.6 + 0.4 * sin(time * 1.5 + noise(uv * 3)). - A soft vertical boundary at 50% width with 8% feather separates photo from dots; it drifts ±3% over 6s. - Pointer adds a local ripple that enlarges dots within 120px. SECTIONS - Nav. - Hero text block. - Shader canvas over the product image. IMPLEMENTATION - WebGL (three.js ShaderMaterial or OGL) on a canvas sized to the image; cap DPR at 2; pause off screen. - Fallback: the plain photo. - 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 - Dots read the shape of the product, not random noise. - The boundary feels soft, never a hard line. - CPU stays near idle (all work on the GPU).