---
id: "2115715258786713689"
source: https://x.com/bestdesignsonx/status/2115715258786713689
author: "Best Designs On X (@bestdesignsonx)"
media: "video, 720x720, 6.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Postage Stamp Collage Zoom Hero

## Summary
A paper-collage hero where three perforated postage stamps sit fanned among scraps of office documents (a chat thread, a signed email, a spreadsheet printout, glitchy color bars). Clicking the blue stamp lifts it out: the background goes dark and the stamp scales up to fill the frame, showing its halftone arc artwork, before everything snaps back. Worth studying for the tactile stamp metaphor and the focus-zoom transition.

## Style
- Theme: mixed (white paper collage, near-black focus state)
- Mood: tactile, editorial, crafted, trustworthy, playful
- Tags: postage-stamp, paper-collage, halftone, zoom-transition, perforated-edge, hero-animation, skeuomorphic
- Category: Hero, Motion

## Palette
| Role | Hex |
|---|---|
| Paper background | #F6F6F6 |
| Focus black | #080808 |
| Charcoal dim | #252526 |
| Stamp navy | #264970 |
| Steel blue arcs | #7296A9 |
| Chat paper blue | #D7E4EA |
| Note paper cream | #E5E3CD |

## Typography
- Stamp title: soft transitional serif, regular, title case, white, about 6% of the stamp width (shown as a placeholder wordmark). Closest free font: Newsreader 400 or Source Serif 4.
- Stamp issue code (ISSUED/001): tiny monospace, uppercase, top right of the stamp. JetBrains Mono 500.
- Gray stamp headline: the same serif in dark gray, two lines, cropped by the stamp edge.
- Document scraps: small monospace at about 1% of frame height (IBM Plex Mono 400) for the email, chat and spreadsheet text.
- Verification tag: black-and-white label with a mono ID and an uppercase mono status with a dot.

## Layout
- Square 720x720 frame. Stamps fanned in the centre, rotated about -12, -6 and +8 degrees, overlapping by about 40%.
- Scraps pinned near the edges: chat paper top right with a torn bottom edge, color-bar strips top left, spreadsheet bottom right, cream email note bottom left.
- Stamps have scalloped perforated borders with an 8px white margin and soft shadow (0 6px 18px rgba(0,0,0,0.15)).
- Focus state: single stamp centred on #080808, filling about 60% of the frame height.

## Elements
- Black stamp with a white placeholder emblem (sweeping arcs) and a thin rainbow color strip at the bottom.
- Light gray stamp with a large serif headline and small reference code.
- Blue stamp: navy field with halftone dot arcs in steel blue and cream, title top left, issue code top right, fine print at the bottom.
- Tag label above the blue stamp on hover: ID in black box plus a verified chip.
- Glitchy horizontal color bars (gray, cyan, blue blocks) and a pixel strip along the bottom in the dark state.

## Motion
- 0.2 to 1.3s: hover on the blue stamp raises it slightly and shows the tag label (150ms fade).
- 1.3 to 2.4s: click; the collage dims to charcoal and fades out while the stamp straightens toward 0 degrees and moves to centre (about 600ms, ease-in-out).
- 2.4 to 4.6s: stamp scales from about 1x to 3x on black; the halftone arcs shimmer as it grows.
- 4.6 to 5.6s: reverse; the stamp shrinks back into the fan and the paper collage returns (about 500ms).
- Loops every 6s.

## Rebuild it
1. Build the collage as an absolutely positioned stage (`relative aspect-square bg-[#F6F6F6] overflow-hidden`) with each scrap a rotated `div` or image.
2. Perforated edge: a CSS `mask` with a repeating `radial-gradient(circle at 6px 6px, transparent 5px, black 5.5px)` along each side, or an SVG path with scallops.
3. Stamp artwork: navy gradient plus an SVG of concentric arcs filled with a halftone dot pattern (`pattern` element with 3px dots).
4. Focus transition: give the stamp a `layoutId`; on click render it inside a fixed overlay `bg-[#080808]` with `AnimatePresence`, so Motion animates position, rotation and scale (spring stiffness 180, damping 24).
5. Fade the collage with opacity 1 to 0 over 300ms while the overlay fades in.
6. Hover: `whileHover={{ y: -6, rotate: 0 }}` and show the tag with a 150ms fade.

## Generation prompt
A tactile paper collage on an off-white background: three perforated postage stamps fanned in the center (one black with a white emblem, one light gray with a serif headline, one deep navy with halftone dotted arcs and a serif title), surrounded by scraps of office paperwork, a light blue chat printout, a cream email note and a yellow spreadsheet; the navy stamp lifts out, the scene goes black and the stamp zooms up to fill the frame, then returns; crafted, editorial, no real brand names.