Light Rays `.mv-light-rays`

위에서 쏟아지는 신비로운 빛줄기를 순수 CSS로 구현합니다. 흐릿한 원뿔형 그라디언트 부채꼴 두 개가 천천히 흔들리고 맥동하며, 시작점에 글로우가 있습니다.

카테고리	배경
유형	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.