Waves
Líneas de ruido Perlin con tensión elástica.
- Código: RODD·BG·056
- Familia: Fondos
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/Waves-TS-TW
Cuándo usarlo
Detrás de un hero o una sección de impacto. Uno por página y con el texto siempre legible encima.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| lineColor | string | black |
| backgroundColor | string | transparent |
| waveSpeedX | number | 0.0125 |
| waveSpeedY | number | 0.005 |
| waveAmpX | number | 32 |
| waveAmpY | number | 16 |
| xGap | number | 10 |
| yGap | number | 32 |
| friction | number | 0.925 |
| tension | number | 0.005 |
| maxCursorMove | number | 100 |
| style | object | {} |
| className | string | |
Otros efectos de fondos
- Beams — Haces de luz arquitectónicos cruzados.
- DotField — Campo de puntos que se abomba con el cursor.
- FlickeringGrid — Rejilla de puntos que parpadean como un panel de datos.
- Globe — Globo terráqueo 3D interactivo que gira solo.
- GridMotion — Rejilla de elementos en perspectiva que sigue al ratón.
- LetterGlitch — Matriz de caracteres en glitch constante.