Cursore a distorsione liquida · magpui

Animazioni

Cursore a distorsione liquida

Una goccia di vetro liquido segue il puntatore sulla foto, rifrangendo e trascinando l'immagine lungo una scia morbida.

Settori: creative
Colori: greensky blueskin tones
Stili: liquidrefractionwebgl
Categoria: cursorheroshader

REFERENCE
- Gallery page: https://magpui.com/en/i/liquid-distortion-cursor-fae117
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/liquid-distortion-cursor-fae117/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/liquid-distortion-cursor-fae117/clip.mp4
- Original post: https://x.com/sabosugi/status/2097693324660625616 by @sabosugi
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 full-bleed hero image with a liquid lens that follows the cursor: inside the lens the image is refracted and magnified, the edge is blurred, and a fading trail of distortion stays behind the movement.

DESIGN SYSTEM
- Full viewport image, cover.
- Lens radius 140px; refraction strength 0.35; edge blur 12px; trail length about 20 samples.

MOTION
- Lens position eases toward the pointer (lerp 0.15 per frame).
- Distortion = normal from a metaball field built from the trail points; older points shrink and fade over 600ms.
- On fast moves the lens stretches along velocity (up to 1.6x).

SECTIONS
- Canvas over the hero image.
- Optional debug panel with sliders for radius, refraction, blur, trail.

IMPLEMENTATION
- WebGL fragment shader: render trail points into a low-res float texture (ping-pong) and use its gradient to offset UVs; cap DPR at 2.
- On touch devices animate the lens along a slow Lissajous path.
- 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
- Image outside the lens is untouched and sharp.
- Trail fades fully within a second after stopping.
- Stays at 60fps on a laptop with a 4K screen (low-res field texture).

Incolla il prompt nel tuo agente

Confronta con l'originale