design-infraReport a problem or share feedback← Catalog
Animated Beam
curatedfreemagicui/animated-beam
An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
$
npx shadcn@latest add @magicui/animated-beamnpm deps: motion
Our notes
SVG beams flowing between refs — the 'integrations' diagram (your app in the middle, tools around it). Default gradient is orange→purple: set gradientStartColor/StopColor to var(--primary).- Source
- Magic UI
- Kind
- component
- Categories
- misc
- Use as
- drop-in — replaces your component
- Applies to
- featuresillustration
- Motion
- on loop · medium · motion + svg · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Box model · Anatomyanatomy/box-modelImport BoxModel from "anatomy-figures/box-model" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.
- Debounce and throttle · Anatomyanatomy/debounceImport Debounce from "anatomy-figures/debounce" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.
- Hash map collisions · Anatomyanatomy/hash-mapImport HashMap from "anatomy-figures/hash-map" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.