Light Rays `.mv-light-rays`

CSS のみで描く、上から降り注ぐ神々しい光線です。ぼかした円錐グラデーションの 2 つの扇がゆっくり揺れて脈打ち、光源には輝きがあります。

カテゴリー	背景
タイプ	CSS のみ（`.mv-light-rays`）
ステータス	安定版
Keywords	light, rays, god-rays, conic-gradient, hero, css

When to use

A calm, uplifting glow should fall from the top of a hero onto the headline
The light should come from a top corner with slanted rays across the section
A light-from-above mood is wanted with zero JavaScript and minimal rendering cost

インストール

node scripts/add.mjs light-rays --out ./src/marvelous

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

コピーされるファイル（依存関係を含む）：tokens/tokens.css、core/base.css、components/light-rays/light-rays.css。

使い方

基本となるマークアップです。ここから属性、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">
    <div class="mv-light-rays" data-fill aria-hidden="true"></div>
    <div style="position:relative;margin-top:2.5rem">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">Put your ideas in the spotlight</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">Heaven-sent rays, made from a few conic gradients.</p>
      <a class="mv-button" href="#light-rays">Watch the keynote</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">
    <div class="mv-light-rays" data-fill data-origin="right" aria-hidden="true" style="--mv-light-rays-color:light-dark(oklch(0.7 0.15 190 / .45), oklch(0.85 0.12 190 / .5));--mv-light-rays-glow:light-dark(oklch(0.75 0.14 190 / .3), oklch(0.8 0.12 190 / .3))"></div>
    <div style="position:relative">
      <strong style="display:block;font-size:1.1rem">From a corner</strong>
      <span style="font-size:.85rem;color:var(--mv-fg-muted)">data-origin="right", custom tint</span>
    </div>
  </section>
</div>

API

Attributes

Name	タイプ	Default	Description
`data-origin`	left \| right	`(center)`	Light source in a top corner, with slanted rays.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

CSS classes

Name	Description
`mv-light-rays`	Ray layer (no JS). Place it behind the content with data-fill; the content stays a sibling.

CSS variables

Name	Default	Description
`--mv-light-rays-color`	`accent (light) / tinted white (dark)`	Ray color (alpha included).
`--mv-light-rays-glow`		Glow around the source.
`--mv-light-rays-intensity`	`1`	Overall opacity (0-1).
`--mv-light-rays-blur`	`6px`	Ray softness.
`--mv-light-rays-speed`	`16s`	Duration of one sway.
`--mv-light-rays-x`	`50%`	Horizontal position of the source.
`--mv-light-rays-length`	`90%`	Distance at which the rays fade out.
`--mv-light-rays-spread`	`44%`	Fan opening.

Accessibility

Decorative and pure CSS: put aria-hidden="true" on the layer and keep the content as a sibling placed above it; the layer never takes pointer events. Reduced motion (OS or [data-motion="reduce"]): the rays stay still. prefers-contrast: more halves the layer; forced colors and print remove it. Check the contrast of text laid over the brightest part of the fan (near the origin), especially with a custom tint.