Beta

Beams `<mv-beams>`

Lichtstrahlen auf einem Canvas: Kometen mit verblassenden Schweifen rasen über Kurven, die in der oberen rechten Ecke zusammenlaufen, oder Strahlen fallen immer schneller und zerstieben in Funken auf einem leuchtenden Boden. Die Farben kommen aus CSS-Variablen und folgen dem Theme; die Schleife ruht außerhalb des Bildschirms, und bei reduzierter Bewegung erscheint ein Standbild ohne Funkenausbrüche.

Kategorie	Hintergründe
Typ	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

Installation

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

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["beams"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): 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.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<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	Typ	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.