---
id: "2112973721011208264"
source: https://x.com/shedsgns/status/2112973721011208264
author: "Juliette (@shedsgns)"
media: "video, 2880x2160, 9.0s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Platinum Card Layer Breakdown

## Summary
A brushed-metal payment card floats on soft white, then separates into an exploded stack of six thin layers (metal base, brushed grain, sheen, frosted films and the printed details) before snapping back together. It shows how a premium surface is mostly subtle, low-opacity layers rather than one fancy texture.

## Style
- Theme: light
- Mood: premium, precise, calm, educational
- Tags: credit-card, brushed-metal, exploded-view, layers, sheen, 3d, product-ui
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #F3F3F3 |
| Silver light | #E6E6E7 |
| Silver | #D2D2D3 |
| Steel | #CBCBCD |
| Shadow | #ADACAD |
| Print ink | #3A3A3C |
| Chip gold | #D9A84A |

## Typography
- Tier label ("PLATINUM"): tiny uppercase sans with wide tracking, grey. Inter (500).
- Card number: monospaced embossed digits in four groups. OCR-A or JetBrains Mono (500).
- Expiry and name: very small uppercase sans.
- Network mark: bold italic wordmark (use a placeholder).

## Layout
- 4:3 frame (2880x2160); card centred at about 40% of the frame width, standard 1.586:1 ratio, 16px radius.
- Chip and contactless icon on the left above the number, a settings-like glyph top right, name and expiry bottom left, network mark bottom right.
- Exploded state: layers spread vertically along a tilted axis (about 55 degrees isometric).

## Elements
- Base: solid silver plate with a darker edge.
- Brushed layer: fine horizontal grain texture at low opacity.
- Sheen: a diagonal soft highlight band.
- Frosted films: two white translucent sheets under 10% opacity.
- Print layer: chip, numbers, labels and logo in dark grey.

## Motion
- 0 to 2s: the card floats flat, the sheen sliding slowly across.
- 2 to 3s: the camera tilts to isometric while the layers separate upward (staggered 60ms, ease-out).
- 3 to 6s: hold the exploded stack; layers drift slightly.
- 6 to 8s: layers collapse back in reverse order and the camera returns to flat.

## Rebuild it
1. Stack six absolutely positioned divs with `transform-style: preserve-3d` inside a parent with `perspective: 1200px`.
2. Base: `bg-gradient-to-br from-neutral-200 to-neutral-400`; grain: a repeating-linear-gradient of 1px lines at 6% opacity; sheen: a rotated white gradient with `mix-blend-mode: soft-light`.
3. Print layer: chip as a gold gradient rect, digits in a monospaced font, placeholder logo.
4. Animate the parent to `rotateX(55deg) rotateZ(-30deg)` and each layer's `translateZ` (0 to 120px) with a stagger, then reverse.
5. Keep shadows soft and the background near white.

## Generation prompt
A premium brushed silver payment card on a soft white background that separates into an exploded isometric stack of thin translucent layers (metal base, fine brushed grain, a diagonal sheen, frosted films, and a printed layer with a gold chip, embossed numbers and small labels), then snaps back together; precise, elegant product visualization, no real bank or network branding.