Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.
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).