REFERENCE
- Gallery page: https://magpui.com/en/i/halftone-liquid-wipe-between-icons-7a409f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/halftone-liquid-wipe-between-icons-7a409f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/halftone-liquid-wipe-between-icons-7a409f/clip.mp4
- Original post: https://dribbble.com/shots/27833788-Selected-Marks-Halftone-Liquid-Transition by Lepisov Branding
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 transition effect for a showcase of marks or icons: each mark sits in a big rounded square tile. To go to the next one, a soft wavy vertical edge sweeps left to right across the tile. Behind the edge the tile turns into a halftone made of tiny triangles (dark tile, light mark or the inverse) and the mark morphs into the next shape. The edge carries a thin red/cyan chromatic split. Precise, graphic, a bit glitchy.
DESIGN SYSTEM
- Page background #E9E9E9; tile 300x300px, radius 64px, centered.
- Two tile states: white #FFFFFF with a black halftone mark, or black halftone tile with a white solid mark.
- Halftone: triangle dots on a 6px grid, dot size driven by luminance (0 to 5px).
- Small UI text 11px #888 in the corners (label top right, year bottom left, caption bottom right with one word on a black highlight).
MOTION
- Each mark holds for 1600ms, then the wipe runs for 900ms cubic-bezier(0.65, 0, 0.35, 1).
- Wipe edge: x position animated 0 -> 1, edge displaced by a sine wave (amplitude 12px, 2 waves along the height) plus a slight bulge in the middle so it looks liquid.
- Inside the edge band (24px wide): RGB split of 2-3px and the dots dissolve.
- The mark morphs during the wipe: old shape on the left side of the edge, new shape on the right.
- Loop through 4-6 marks.
SECTIONS
- Corner labels.
- Tile with the current mark.
- Wipe edge with chromatic split.
IMPLEMENTATION
- One WebGL fragment shader on a quad (OGL or Three.js): sample two textures (current and next mark rendered to canvas), compute the halftone with a triangular grid in the shader, mask with the wavy edge, offset the R and B channels near the edge.
- Tile radius via an SDF rounded box in the shader so edges stay sharp.
- prefers-reduced-motion: crossfade between marks in 300ms, no wipe.
- Render only while the wipe runs (requestAnimationFrame on demand), cap DPR at 2.
ADAPT TO THE PROJECT
- Reuse the project's existing design tokens, components and fonts; map the colors to the closest existing tokens.
- Never copy logos, brand names, photos or illustrations from the reference. Use neutral placeholders.
SUCCESS CHECK
- The edge sweeps across the full tile and the halftone is crisp, no blurry dots.
- The mark changes only behind the edge, never before.
- CPU/GPU is idle during the hold phase.
