Background Pattern
Fading dot, grid and line backgrounds. Pro · Effects › Backgrounds
A dot, grid, line or diagonal pattern behind content, faded out by a radial mask so it reads as texture rather than a box. The optional drift moves the pattern by one cell per cycle with a transform, so it is seamless and costs no repaints; it pauses off screen and with reduced motion.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add background-patternnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { BackgroundPattern } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
variant | 'dots' | 'grid' | 'lines' | 'diagonal' | 'grid' | Pattern drawn per cell: dots, a square grid, horizontal lines or 45° diagonal stripes. |
size | number | 24 | Size of one cell of the pattern, px. |
fade | 'center' | 'top' | 'bottom' | 'none' | 'center' | Where the pattern stays visible; it fades out radially away from there. none covers the whole area evenly. |
animated | boolean | false | Drift the pattern slowly. |
Related components
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
- Hole Background — Portal tunnel with rings and particles
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Spotlight — Stage beams and a cursor spotlight
- Meteors — Falling meteors
- Particles — Particle field that reacts to the cursor
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
Previous: Meteors · Next: Particles · All Effects