Animazioni

Francobollo con texture di denim

Un francobollo dentellato reso con tessuto nero profondo e lacca che cattura la luce mentre si inclina.

Settori: portfoliofashion
Colori: blackcharcoalsilver
Stili: textureddarkcrafted
Categoria: 3dshader

REFERENCE
- Gallery page: https://magpui.com/en/i/denim-textured-stamp-shader-80d76c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/denim-textured-stamp-shader-80d76c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/denim-textured-stamp-shader-80d76c/clip.mp4
- Original post: https://x.com/loficosmos1/status/2099656245200191690 by @loficosmos1
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 portfolio centerpiece: a single postage stamp with perforated edges, embossed with a dense textile and lacquer pattern, floating on a dark olive background and tilting toward the cursor so light rakes across the relief.

DESIGN SYSTEM
- Background #23221C, stamp 260x320 with perforated edge, small caption text under it in 10px grey caps.

MOTION
- Tilt toward the pointer up to 12deg with spring (stiffness 120, damping 18).
- Light direction rotates with the tilt so highlights move across the normal map.
- Idle: slow 6s float of 4px.

SECTIONS
- Stamp mesh.
- Caption.

IMPLEMENTATION
- Plane with a normal map and roughness map (generated or baked), MeshPhysicalMaterial with clearcoat; perforations via alpha mask.
- 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
- Relief reads as fabric, not noise.
- Edges stay crisp at 2x DPR.
- Falls back to a static render.

1
Incolla il prompt nel tuo agente
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.
Claude Code Codex
Usa
Three.js React Three Fiber
2
Confronta con l'originale
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Incolla il prompt nel tuo agente

Confronta con l'originale