Skip to content

feat(dish-card): hand-laid rotation pattern - alternating 0.3-0.4deg tilts - #444

Open
laichunpongben wants to merge 1 commit into
mainfrom
feat/dish-card-rotation
Open

feat(dish-card): hand-laid rotation pattern - alternating 0.3-0.4deg tilts#444
laichunpongben wants to merge 1 commit into
mainfrom
feat/dish-card-rotation

Conversation

@laichunpongben

Copy link
Copy Markdown
Owner

Per 2026 "imperfect by design" trend (Canva 2026, Fontfabric editorial direction, itsnicethat anti-perfection movement), uniform grids read as machine-generated. Slight intentional asymmetry reads as human-laid.

Adds nth-child rotations to .dish-grid > .dish-card:

  • 3n+1: -0.4deg from top-left
  • 3n+2: 0.3deg from top-right
  • 3n+3: -0.3deg from top-center

Like polaroids tossed on a board. Tilt resets to 0 on hover (small but felt interactivity).

prefers-reduced-motion disables tilts entirely.

Sources:

Files:

  • src/styles/global.css (+17 / -1)

Generated with Claude Code

…tilts

Per 2026 "imperfect by design" trend (Canva 2026, Fontfabric editorial direction, itsnicethat anti-perfection movement), uniform grids read as machine-generated. Slight intentional asymmetry reads as human-laid.

Adds subtle nth-child rotations to .dish-grid > .dish-card:
- 3n+1: -0.4deg from top-left
- 3n+2: 0.3deg from top-right
- 3n+3: -0.3deg from top-center

Like polaroids tossed on a board. Tilt resets to 0 on hover so the card straightens as the reader engages with it (small but felt interactivity).

prefers-reduced-motion disables the tilts entirely.

Sources:
- https://www.canva.com/learn/design-trends/
- https://www.fontfabric.com/blog/

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant