Dependencies
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
animate | boolean | false | Set true if you want to animate the background. |
direction | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right | top | Direction of the animation movement. You can use the const PATTERN_BACKGROUND_DIRECTION. |
variant | grid | dot | grid | Type of pattern. You can use the const PATTERN_BACKGROUND_VARIANT. |
size | xs | sm | md | lg | md | Size of the background pattern. |
mask | ellipse | ellipse-top | ellipse | Add a mask over the background pattern. You can use the const PATTERN_BACKGROUND_MASK. |
speed | number | 10000 | Duration of the animation in ms, the bigger it is, the slower the animation. (20000 slower than 5000). You can use the const PATTERN_BACKGROUND_SPEED. |
Credits
- Inspired by Magic UI’s Dot Pattern component
- Inspired by Magic UI’s Grid Pattern component
- Inspired by Magic UI’s Animated Grid Pattern component
- Credits to Nathan De Pachtere for porting this component