Waves `<mv-waves>`

1 つの canvas に描く波の線：パースペクティブで見た等高線の海がかすんだ地平線から押し寄せ、近づくにつれてうねりを増します。または、細い糸でできた数本のねじれるリボンを描きます。

仕組み

1 つの canvas に描く波の線：パースペクティブで見た等高線の海がかすんだ地平線から押し寄せ、近づくにつれてうねりを増します。または、細い糸でできた数本のねじれるリボンを描きます。interactive を指定すると、ポインターの下で線が柔らかく盛り上がり、ポインターが動いたり押したりした場所に波紋が広がります。色は CSS 変数から取得してテーマに従い、ループは画面外で休止し、モーション軽減では静止フレームを表示します。

カテゴリー	背景
タイプ	Web Component（`<mv-waves>`）
ステータス	安定版
Keywords	safe-rewrite, waves, lines, ribbons, noise, perspective, ripple, interactive, hero, canvas

When to use

A SaaS or product hero needs a calm sea of moving lines behind the headline, in light or dark themes
Visitors should feel the page respond: the lines swell under the pointer and ripple where it moves or taps
Flowing lines or twisting ribbons are wanted from one 2D canvas, without a WebGL context

Avoid when

A still wave pattern is enough and nothing should move → use Backdrop instead

インストール

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

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["waves"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/i18n.js, core/motion.js, core/pointer.js, components/waves/waves.js, components/waves/waves.css。

使い方

基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：

<div style="display:flex;flex-wrap:wrap;min-height:320px">
  <section style="flex:1.6 1 22rem;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:2rem 1.5rem">
    <mv-waves data-fill interactive></mv-waves>
    <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">Ride the next wave</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">Lines roll in from the horizon. Move your cursor to send ripples across them.</p>
      <a class="mv-button" href="#waves">Get started</a>
    </div>
  </section>
  <section style="flex:1 1 14rem;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-left:1px solid var(--mv-border);min-height:220px;padding:1.5rem">
    <mv-waves data-fill variant="ribbons" interactive></mv-waves>
    <div style="position:relative">
      <strong style="display:block;font-size:1.1rem">Ribbons</strong>
      <span style="font-size:.85rem;color:var(--mv-fg-muted)">variant="ribbons"</span>
    </div>
  </section>
</div>

API

Attributes

Name	タイプ	Default	Description
`variant`	lines \| ribbons	`lines`	A sea of lines in perspective, or twisting ribbons made of strands.
`count`	number	`44 (lines) / 3 (ribbons)`	Number of lines on the sea (2 to 80) or of ribbons (1 to 8).
`colors`	list of CSS colors	`--mv-waves-1, -2, -3`	Comma-separated palette (tokens and var() accepted, follows the theme). Lines run through it from left to right, ribbon strands from one edge to the other.
`amplitude`	number	`1`	Swell height (0 flattens the lines).
`speed`	number	`1`	Speed multiplier for the flow and the ripples.
`interactive`	boolean		The lines rise in a soft swell under the pointer, moving it sends ripples and a press sends a stronger one (listens on the parent with data-fill).
`radius`	number	`220`	Pointer reach in px: how far a ripple travels before it dies out, and the size of the swell.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0) and lets the pointer through.

Content structure

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

CSS variables

Name	Default	Description
`--mv-waves-1 / -2 / -3`	`accent hue −40° / accent / +95°`	Default palette, darker in light theme and lighter in dark theme.
`--mv-waves-weight`	`1`	Line width multiplier.
`--mv-waves-haze`	`1`	Strength of the glow along the horizon (lines variant, 0 removes it).
`--mv-waves-mask`	`none`	Mask applied to the canvas, for example a fade on the sides.

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; ripples come from pointer events on the parent and never block clicks. The loop stops off screen and in hidden tabs. Reduced motion (OS or [data-motion="reduce"]): one still frame, no swell and no ripples. Forced colors and print hide the canvas. Keep text readable over the lines: the far lines near the horizon are the faintest, so a centered headline sits well there.