Líneas 3D flotantes que reaccionan al cursor.
npx shadcn@latest add https://reactbits.dev/r/FloatingLines-TS-TW
Detrás de un hero o una sección de impacto. Uno por página y con el texto siempre legible encima.
| Prop | Tipo | Por defecto |
|---|---|---|
| linesGradient | string[] | undefined |
| enabledWaves | Array<'top' | 'middle' | 'bottom'> | ['top', 'middle', 'bottom'] |
| lineCount | number | number[] | [6] |
| lineDistance | number | number[] | [5] |
| topWavePosition | { x: number; y: number; rotate: number } | undefined |
| middleWavePosition | { x: number; y: number; rotate: number } | undefined |
| bottomWavePosition | { x: number; y: number; rotate: number } | { x: 2.0, y: -0.7, rotate: -1 } |
| animationSpeed | number | 1 |
| interactive | boolean | true |
| bendRadius | number | 5 |
| bendStrength | number | -0.5 |
| mouseDamping | number | 0.05 |
| parallax | boolean | true |
| parallaxStrength | number | 0.2 |
| mixBlendMode | React.CSSProperties['mixBlendMode'] | 'screen' |