Grid pattern
A hairline grid in the site's border colour with a few cells breathing in and out on --ambient-breathe. Forked from Magic UI and re-tokened; the cells only exist while the grid is on-screen.
npx shadcn add @gc/grid-patternOne ambient effect per viewport
Structure under the content, breathing slowly enough to ignore.
Each cell fades in on --ease-enter and out on --ease-exit over one breathe cycle, then moves. Turn reduced motion on to see the grid alone.
Craft score
Measured on b38543d. All scores
- Perf mobile
- 96
- Perf desktop
- 100
- CLS
- 0
- LCP mobile
- 2771 ms
- Gzipped source
- 2.0 kB
- Reduced motion
- Pass