Hole Background
Portal tunnel with rings and particles. Pro · Effects › Backgrounds
A tunnel — a portal into the page: rings slide away into a vanishing point along a mesh of lines, while particles rise out of the hole. The tunnel takes the area's proportions, and its far end sits just above the middle under a shade, so content centred in the area sits in the hole. Drawn on a canvas at a capped pixel ratio, only while on screen and the tab is visible; reduced motion keeps one still frame. A graphic scene: keep text over it short.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add hole-backgroundnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { HoleBackground } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
strokeColor | string | Colour of the tunnel's rings and lines (default: the theme's faint foreground). | |
numberOfLines | number | 50 | Lines running into the hole (default 50). |
numberOfDiscs | number | 50 | Rings travelling into the hole (default 50). |
particleColor | string | Colour of the drifting particles (default: the theme's accent). |
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
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Spotlight — Stage beams and a cursor spotlight
- Meteors — Falling meteors
- Background Pattern — Fading dot, grid and line backgrounds
- Particles — Particle field that reacts to the cursor
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
Previous: Hexagon Background · Next: Fireworks Background · All Effects