#078
Materials
Five Surface tiles, one per material, over a brand to info to success gradient so the translucency is visible.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Materials" pattern (@codeatlasdev/ui demo #078, surfaces/surface) in my app.
Call get_demo({ ids: ["#078"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Comparing auto, solid, frosted, glass and liquid materials before picking one for a card or panel.
Keep these library parts, with the props and tokens the demo uses:
- Surface from "@codeatlasdev/ui"
Behaviour to keep:
- `const materials = ['auto', 'solid', 'frosted', 'glass', 'liquid'] as const`
- `<Surface {material} elevation={3} p="4" class="tile">` rendered with `{#each materials as material (material)}`
- Each tile prints its material name in a `.name` paragraph
- `.backdrop` paints `linear-gradient(135deg` behind the tiles
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
- `const materials = ['auto', 'solid', 'frosted', 'glass', 'liquid'] as const`
- `<Surface {material} elevation={3} p="4" class="tile">` rendered with `{#each materials as material (material)}`
- Each tile prints its material name in a `.name` paragraph
- `.backdrop` paints `linear-gradient(135deg` behind the tiles
Related
Loading source.