#226
Material tiers
Five glass surfaces at elevations 1 to 5, from Ultra thin to Chrome, over a three color gradient.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Material tiers" pattern (@codeatlasdev/ui demo #226, foundation/materials) in my app.
Call get_demo({ ids: ["#226"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing the glass tier by how much blur and fill a panel needs over its background.
Keep these library parts, with the props and tokens the demo uses:
- Surface from "@codeatlasdev/ui"
Behaviour to keep:
- `{#each tiers as tier (tier.elevation)}` renders 5 `<Surface material="glass" elevation={tier.elevation} class="tier">`
- Tiers: Ultra thin (`elevation: 1`), Thin (`elevation: 2`), Regular (`elevation: 3`), Thick (`elevation: 4`), Chrome (`elevation: 5`)
- Each tier shows a `label` and a `desc`, for example Subtle background hint and Heaviest blur and fill
- Backdrop gradient uses `var(--ca-brand-main) 0%`, `var(--ca-semantic-info) 50%` and `var(--ca-semantic-success) 100%`
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
- `{#each tiers as tier (tier.elevation)}` renders 5 `<Surface material="glass" elevation={tier.elevation} class="tier">`
- Tiers: Ultra thin (`elevation: 1`), Thin (`elevation: 2`), Regular (`elevation: 3`), Thick (`elevation: 4`), Chrome (`elevation: 5`)
- Each tier shows a `label` and a `desc`, for example Subtle background hint and Heaviest blur and fill
- Backdrop gradient uses `var(--ca-brand-main) 0%`, `var(--ca-semantic-info) 50%` and `var(--ca-semantic-success) 100%`
Related
Loading source.