bêta

Beams `<mv-beams>`

Faisceaux lumineux sur un seul canvas : des comètes à la traîne évanescente filent le long de courbes qui convergent vers le coin supérieur droit, ou des rayons tombent de plus en plus vite et éclatent en étincelles sur un sol lumineux. Les couleurs viennent de variables CSS et suivent le thème ; la boucle se met en pause hors écran, et le mouvement réduit affiche une image fixe, sans éclats.

Catégorie	Arrière-plans
Type	Web Component (`<mv-beams>`)
Statut	bêta
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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["beams"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

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