Strands

Hebras luminosas que ondulan y se entrelazan.

  • Código: RODD·AN·037
  • Familia: Animaciones
  • Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/Strands-TS-TW

Cuándo usarlo

Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.

Props para personalizarlo

PropTipoPor defecto
colorsstring[]["#FF4242", "#7C3AED", "#06B6D4", "#EAB308"]
countnumber3
speednumber0.5
amplitudenumber1
wavinessnumber1
thicknessnumber0.7
glownumber2.6
tapernumber3
spreadnumber1
hueShiftnumber0
intensitynumber0.6
saturationnumber1.5
opacitynumber1
scalenumber1.5
glassbooleanfalse
refractionnumber1
dispersionnumber1
glassSizenumber1

Otros efectos de animaciones

  • BorderBeam — Haz de luz que recorre el borde de un contenedor.
  • Cubes — Rejilla de cubos 3D que se inclinan hacia el cursor.
  • ElectricBorder — Borde eléctrico con arcos de energía y brillo ajustable.
  • GooeySvgFilter — Filtro SVG que une elementos como gotas.
  • LaserFlow — Haz láser que fluye y se derrama sobre una superficie.
  • MagnetLines — Campo de agujas que apuntan hacia el cursor.