Beams <mv-beams>
1 つの canvas に描く光のビーム：薄れていく尾を引く彗星が右上の角に収束する曲線に沿って駆け抜けるか、光線がどんどん速く落ちてきて、光る床で火花となって弾けます。
仕組み
1 つの canvas に描く光のビーム：薄れていく尾を引く彗星が右上の角に収束する曲線に沿って駆け抜けるか、光線がどんどん速く落ちてきて、光る床で火花となって弾けます。色は CSS 変数から取得されてテーマに追従します。画面外ではループが休止し、モーション軽減では弾けない静止フレームを表示します。
| カテゴリー | 背景 |
|---|---|
| タイプ | Web Component（<mv-beams>） |
| ステータス | 安定版 |
| 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
インストール
node scripts/add.mjs beams --out ./src/marvelousMarvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["beams"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。
コピーされるファイル（依存関係を含む）：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。
使い方
基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：
<div style="display:flex;flex-wrap:wrap;min-width:0;min-height:320px">
<section style="flex:1.6 1 20rem;min-height:320px;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="flex:1 1 14rem;min-height:240px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;box-shadow:-1px 0 0 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 | タイプ | 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.