Paper texture
The dots show up when the backdrop has a bright tonal range to work against.
Halftone
SVG halftone dot pattern overlay with configurable size, angle, and color
Halftone print surface
Make the dots compete with tonal range.
Put the overlay over a bright poster, a lit paper card, and a few saturated blocks so the pattern and ink color are obvious instead of invisible.
Angle
A slight rotation makes the pattern feel like print rather than a flat overlay.
Opacity
Enough contrast to read, not so much that it turns into noise.
Accessibility
- Treat the effect as decorative and keep underlying content understandable without color, blur, or motion alone.
- Respect reduced-motion and contrast requirements when animation or filtering is enabled.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
Import options
Root package
ts
import { Halftone } from '@dryui/ui'Per-component subpath
ts
import { Halftone } from '@dryui/ui/halftone'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| dotSize | finemediumcoarse | — | 'medium' | — | — |
| angle | number | — | 45 | — | — |
| color | string | Semantic color or tone applied to the component. | 'currentColor' | — | — |
| opacity | number | — | 0.3 | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |