Textured surface
Visible grain over layered color fields.
The overlay has enough area and contrast to read as a material treatment, not a faint system artifact.
Noise
Texture overlay that adds grain and atmosphere to surfaces without external assets
Noise overlay
Use grain to break up flat surfaces and keep dark UI from feeling plastic.
This demo uses a split-tone poster with multiple contrast bands so the texture is visible right away, even without animation.
Poster stock
High contrast surfaces make the grain obvious without turning the demo into static.
Warm slate
The overlay keeps the surface from feeling flat while preserving the underlying tone.
Soft highlight
A brighter panel shows how the pattern reacts across different luminance levels.
Accessibility
- This component does not add meaning by itself; ensure child content supplies the required headings, labels, and landmarks.
- Only add landmark or region semantics when the section has a unique, meaningful label.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Noise, Card } from '@dryui/ui';
</script>
<Noise opacity={0.12} blend="soft-light">
<Card.Root>
<Card.Content>Grain adds atmosphere without loading an external texture.</Card.Content>
</Card.Root>
</Noise>Import options
Root package
ts
import { Noise } from '@dryui/ui'Per-component subpath
ts
import { Noise } from '@dryui/ui/noise'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| opacity | number | — | 0.22 | — | — |
| blend | soft-lightoverlaymultiply | — | 'overlay' | — | — |
| animated | boolean | — | false | — | — |
| grain | finemediumcoarse | — | 'medium' | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |