Smoke trail card · magpui

Components

Smoke trail card

A black card where the pointer leaves a trail of soft grey smoke particles that drift and fade.

Industries: websiteportfolio
Colors: blackgreywhite
Styles: darkatmosphericminimal
Category: visual effectcardcursor

REFERENCE
- Gallery page: https://magpui.com/en/i/smoke-trail-card-87f73f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/smoke-trail-card-87f73f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/smoke-trail-card-87f73f/clip.mp4
- Original post: https://21st.dev/@jatin-yadav05/components/smoke-card by Jatin Yadav
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 black square card where moving the pointer emits soft grey particles that grow, drift upward and fade like smoke, leaving a curved trail that follows the gesture.

DESIGN SYSTEM
- Card 360x360 black #000, radius 4px, on a white page.
- Particles: circles 4-14px, #BFBFBF to #FFFFFF, opacity 0.6 to 0, slight blur 1-2px.

MOTION
- Spawn 2-4 particles per pointer move event at the pointer, with a velocity from the pointer direction (x0.2) plus upward drift 10-30px/s.
- Each particle grows 1 to 2.2x and fades out over 1.2-2s with ease-out; light noise wobble.
- Cap 300 particles; idle card shows nothing.

SECTIONS
- Card, canvas layer.
- States: idle, trailing.

IMPLEMENTATION
- Canvas 2D with a particle array and requestAnimationFrame; resize with devicePixelRatio; stop the loop when no particles are alive.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.

ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.

SUCCESS CHECK
- The trail follows the pointer and fades within two seconds.
- No frame drops with fast movements.
- Nothing runs while the card is idle.

Paste the prompt in your agent

Compare with the original