#543
Paper grain
Three solid Surface tiles: static paper grain, animated paper grain and no grain.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Paper grain" pattern (@codeatlasdev/ui demo #543, surfaces/surface) in my app.
Call get_demo({ ids: ["#543"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Giving a card or panel a printed-paper texture for editorial and marketing layouts.
Keep these library parts, with the props and tokens the demo uses:
- Surface from "@codeatlasdev/ui"
Behaviour to keep:
- `<Surface material="solid" elevation={2} grain p="4" class="tile">` is the static grain
- `grain="animated"` shifts the noise and stays still under reduced motion
- The third tile has no `grain` prop
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Surface
@codeatlasdev/ui
How it is built
- `<Surface material="solid" elevation={2} grain p="4" class="tile">` is the static grain
- `grain="animated"` shifts the noise and stays still under reduced motion
- The third tile has no `grain` prop
Related
Loading source.