Denim-textured stamp shader · MagpUI

Motion

Denim-textured stamp shader

A perforated postage stamp rendered with deep black textile and lacquer texture that catches light as it tilts.

Industries: portfoliofashion
Colors: blackcharcoalsilver
Styles: textureddarkcrafted
Category: 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.

Paste the prompt in your agent

Compare with the original