Beams `<mv-beams>`

캔버스 하나에 그리는 빛줄기입니다. 희미해지는 꼬리를 단 혜성이 오른쪽 위 모서리로 모이는 곡선을 따라 질주하거나, 광선이 점점 빠르게 떨어지다가 빛나는 바닥에서 불꽃으로 터집니다.

작동 방식

캔버스 하나에 그리는 빛줄기입니다. 희미해지는 꼬리를 단 혜성이 오른쪽 위 모서리로 모이는 곡선을 따라 질주하거나, 광선이 점점 빠르게 떨어지다가 빛나는 바닥에서 불꽃으로 터집니다. 색상은 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/marvelous

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