Hole Background
betaA perspective tunnel into a black hole: rings recede and flow inward, radial lines run down the walls and particles swirl in faster and faster; the vanishing point follows the pointer.
- Effects & motion
- 2 files
- 1 npm package
- Accessibility notes
- Draws on a canvas
- See it in Backgrounds
pnpm dlx @dowel-ui/cli add hole-backgroundnpm packages installed: class-variance-authority.
import { HoleBackground } from "@/components/ui/hole-background";Default
Tunnel
Warp
<HoleBackground>
| Prop | Type | Default |
|---|---|---|
colorColour of rings, lines and particles: a token or any CSS colour. Default | string | "foreground" |
densityParticles per area; 1 is about one per 2,500 square pixels. Default 1. | number | 1 |
glowColorColour of the event horizon's rim and of particles about to fall in. Default | string | "primary" |
interactiveThe vanishing point eases toward the pointer. Default true. | boolean | true |
ringsNumber of rings. Default 18. | number | 18 |
seedSeed for the particles. Default 1. | number | 1 |
shape
| HoleShape | "well" |
speedFlow speed multiplier for rings and particles. Default 1. | number | 1 |
spokesNumber of radial lines. Default 28. | number | 28 |
vignette | "none" | "soft" | "strong" | "soft" |
Plus every attribute of <div>.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes