---
id: "2115798572180353074"
source: https://x.com/godlydotdesign/status/2115798572180353074
author: "Godly Design (@godlydotdesign)"
media: "video, 824x720, 13.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Paper Invoice With Pen Annotations

## Summary
A membership settings page on near-black where choosing "Get Invoice" makes a cream paper invoice unfold out of the list like a printed receipt, then red pen marks strike through the original price and circle the total paid. It is a charming example of skeuomorphic paper physics and hand-drawn annotation applied to a dull billing screen.

## Style
- Theme: dark (with a cream paper sheet)
- Mood: tactile, elegant, witty, calm, crafted
- Tags: invoice, paper-fold, skeuomorphic, hand-drawn, settings-list, receipt, svg-stroke
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #060505 |
| Paper | #F9F4ED |
| Paper highlight | #FBF6F0 |
| Card terracotta | #673528 |
| Divider | #E6E2DD |
| Muted text | #B3AFA9 |
| Button white | #F6F4F1 |
| Pen red | #D3302C |

## Typography
- Page heading ("Membership"): book serif, regular 400, title case, about 6% of frame height, dim grey on black. EB Garamond (400) or Cormorant Garamond (500).
- Invoice title ("Invoice"): same serif, about 3.5% of frame height, near black. EB Garamond (400).
- Invoice body (meta lines, addresses, line items, totals): small sans 9 to 11px, labels in grey, values in near black, totals medium. Inter (400 and 500).
- List rows and button ("Get Invoice", "Library Updates", "Need Help?", "Download PDF"): sans regular 12px, grey on black; button label dark on white. Inter (500).

## Layout
- Roughly 8:7 canvas (824x720) cropped from a wider page; content in a left column about 380px wide.
- Settings list: rows about 56px tall with a 20px outline icon at left, label, and a chevron at right, separated by subtle 1px #1A1A1A lines.
- Invoice sheet: about 300x400px, square corners (2px), cream paper with a faint top-to-bottom gradient and a soft shadow 0 20px 40px rgba(0,0,0,0.5).
- Inside the sheet: 20px padding, title row with a small multicolour placeholder logo at the right, three meta lines, a two-column From and Bill to block with a tiny "Edit" chip, empty space, then line items separated by a 1px rule and the Total paid row.
- Download PDF: white pill about 110x30px centred 16px under the sheet.
- A terracotta membership card with an engraved line pattern peeks from the bottom right at about 20deg.

## Elements
- Serif "Membership" heading partly covered by the sheet.
- Outline icon list rows with chevrons.
- Cream invoice with placeholder company name, placeholder address and placeholder email, invoice number and dates.
- Line items: Membership with the original price, a discount code row at 30% off, a Total paid row.
- Red pen strike-through across the original price and a hand-drawn ellipse around the total.
- Terracotta card with fine wavy line engraving.
- White Download PDF pill.

## Motion
- 0 to 1s: the sheet slides up out of the "Get Invoice" row while its top half hinges forward (rotateX about 30deg to 0) like paper leaving a printer, 600ms ease-out.
- 1 to 3s: the sheet settles flat; the red strike draws left to right in about 250ms, then the ellipse draws around the total in about 400ms.
- 4 to 6s: the bottom third folds up toward the viewer (rotateX -60deg) and back, showing the paper bending, about 800ms each way.
- 8 to 13s: annotations erase and redraw on a loop; the Download PDF pill fades in 200ms after the sheet settles.

## Rebuild it
1. Page: `bg-[#060505] text-neutral-400` with a serif `h1` at `text-5xl text-neutral-500` and a list of rows `flex items-center gap-3 h-14 border-b border-white/5`.
2. Sheet: `absolute w-[300px] bg-gradient-to-b from-[#FBF6F0] to-[#F9F4ED] shadow-2xl p-5` with `transformPerspective: 1000`.
3. Split the sheet into a top and bottom `motion.div` each with `transformOrigin` at the fold line; animate `rotateX` for the unfold and fold beats.
4. Pen marks: absolutely positioned SVGs over the price and total; animate `pathLength` 0 to 1 (strike 0.25s, ellipse 0.4s, delay 0.3s) with a 1.5px #D3302C stroke and round caps, slightly irregular hand-drawn paths.
5. Download pill: `rounded-full bg-[#F6F4F1] text-neutral-900 text-xs px-5 py-2`, revealed with opacity and y 6px.
6. Terracotta card: a rotated div with `bg-[#673528]` and a repeating SVG wave pattern in #8A4636.

## Generation prompt
A dark minimal billing page with a dim serif heading and a list of outline-icon settings rows; a cream paper invoice unfolds out of the list like a sheet leaving a printer, with a serif title, small sans line items and a colourful square logo placeholder, then a red pen strikes through the old price and circles the total; a terracotta engraved card peeks from the corner, soft shadows, tactile paper bending, elegant and calm.