AnimatedBeam

Haces de luz que conectan elementos, ideal para integraciones.

  • Código: RODD·CP·046
  • Familia: Componentes
  • Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT

Cómo instalarlo

npx shadcn@latest add "https://magicui.design/r/animated-beam.json"

Cuándo usarlo

Sustituyen a un componente estándar cuando la experiencia es parte del producto.

Props para personalizarlo

PropTipoPor defecto
classNameunknown
containerRefunknown
fromRefunknown
toRefunknown
curvaturenumber0
reversebooleanfalse
durationnumber5
delaynumber0
pathColorstring"gray"
pathWidthnumber2
pathOpacitynumber0.2
gradientStartColorstring"#ffaa40"
gradientStopColorstring"#9c40ff"
repeatunknownInfinity
repeatDelaynumber0
startXOffsetnumber0
startYOffsetnumber0
endXOffsetnumber0
endYOffsetnumber0

Otros efectos de componentes

  • BubbleMenu — Menú de burbujas que se expande con elementos escalonados.
  • CircularGallery — Galería curva infinita que se arrastra o se desplaza con scroll.
  • DepthCarousel — Tarjetas en un raíl 3D con profundidad, arrastre y autoplay.
  • ElasticSlider — Slider cuyo tirador se estira y vuelve con muelle.
  • GlassIcons — Iconos con efecto de cristal esmerilado.
  • Lanyard — Credencial 3D colgante con física de péndulo realista.