Pitch Momentum
A soccer pitch of dots where two rival particle mountains surge and clash as momentum swings, crests whitening where the fronts collide.
A soccer pitch rendered as a dense field of dots — full FIFA markings, wireframe goals and a rounded platform — where two rival particle mountains surge, wander and clash as momentum swings between the teams. Crests whiten where the fronts collide; team colors are yours to pick.
Inspired by this Three.js match visual by @kaolti.
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Animation speed multiplier. |
height | number | 1.7 | Peak height of the momentum mountains. |
density | number | 230 | Points across the platform's length (grid resolution). |
colorA | string | "#60a5fa" | Color of the first team's mountain. |
colorB | string | "#dc2626" | Color of the second team's mountain. |
className | string | — | Classes for the wrapper element (set its height here). |
theme | "auto" | "light" | "dark" | "auto" | Color source. auto reads the live shadcn theme. |
speednumberAnimation speed multiplier.
1heightnumberPeak height of the momentum mountains.
1.7densitynumberPoints across the platform's length (grid resolution).
230colorAstringColor of the first team's mountain.
"#60a5fa"colorBstringColor of the second team's mountain.
"#dc2626"classNamestringClasses for the wrapper element (set its height here).
—theme"auto" | "light" | "dark"Color source. auto reads the live shadcn theme.
"auto"