DryUI — Human-led, agent-assisted UI

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.

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.

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

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, Text } from '@dryui/ui';
</script>

<Noise opacity={0.12} blend="soft-light">
  <Text>Grain adds atmosphere without loading an external texture.</Text>
</Noise>

Import options

Root package

import { Noise } from '@dryui/ui'

Per-component subpath

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.	—	—	—