beta

Beams `<mv-beams>`

Light beams on one canvas: comets with fading tails race along curves that converge on the top-right corner, or rays fall faster and faster and burst into sparks on a glowing floor. Colors come from CSS variables and follow the theme; the loop rests off screen, and reduced motion shows a still frame with no bursts.

Category	Backgrounds
Type	Web Component (`<mv-beams>`)
Status	beta
Keywords	safe-rewrite, beams, light, comet, collision, sparks, hero, canvas

When to use

A dark tech or AI hero needs streaks of light racing along fanned curves toward a focal point
A playful section where rays fall and burst into sparks on impact (collision variant)
Streaking light is wanted from one lightweight 2D canvas instead of a shader

Avoid when

The beam must visibly connect two specific elements, as in an integration diagram → use Animated Beam instead
Light should travel around the border of a single card or button → use Border Beam instead
Still rays behind a section are enough and nothing should move → use Backdrop instead

Install

node scripts/add.mjs beams --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["beams"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/motion.js, components/beams/beams.css, components/beams/beams.js.

Usage

Canonical markup, to start from and customize with attributes, data-* and CSS variables:

<div style="display:grid;grid-template-columns:1.6fr 1fr;min-height:320px">
  <section style="position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:2rem">
    <mv-beams data-fill></mv-beams>
    <div style="position:relative">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">Deploy at the speed of light</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">One light canvas that rests whenever it leaves the screen.</p>
      <a class="mv-button" href="#beams">Start your project</a>
    </div>
  </section>
  <section style="position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-left:1px solid var(--mv-border);padding:1.5rem">
    <mv-beams variant="collision" data-fill></mv-beams>
    <div style="position:relative">
      <strong style="display:block;font-size:1.1rem">Collision</strong>
      <span style="font-size:.85rem;color:var(--mv-fg-muted)">Rays burst into sparks on the floor</span>
    </div>
  </section>
</div>

API

Attributes

Name	Type	Default	Description
`variant`	sweep \| collision	`sweep`	Comets along converging curves, or rays that fall and burst.
`count`	number	`16 (sweep) / 9 (collision)`	Number of beams (up to 40 curves or 30 rays).
`speed`	number	`1`	Speed multiplier.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0) and ignores the pointer.

Content structure

Name	Description
`children`	Without data-fill, content placed inside the element sits above the beams.

CSS variables

Name	Default	Description
`--mv-beams-from / -via / -to`	`accent hue −80° / accent / +50°`	Beam colors: the sweep gradient runs from the bottom-left to the top-right; rays fade from via to to.
`--mv-beams-line`	`fg 7%`	Resting curves (sweep).
`--mv-beams-glow`	`4px`	Halo around the comet heads (0 removes it).

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events, and content placed inside stays readable by assistive tech. With data-fill the whole element ignores the pointer. The loop stops off screen and in hidden tabs. Reduced motion (OS or [data-motion="reduce"]): one still frame, beams mid-course, no bursts. Forced colors and print hide the canvas.