beta

Light Rays — `.mv-light-rays`

Divine light rays falling from above, in pure CSS: two fans of blurred conic gradients that slowly sway and pulse, with a glow at the origin.

Category	Backgrounds
Type	CSS only (`.mv-light-rays`)
Status	beta
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

Install

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

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["light-rays"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/light-rays/light-rays.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;grid-template-columns:1.6fr 1fr;min-height:320px">
  <section style="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="position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-left:1px solid 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	Type	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: aria-hidden, pointer-events: none. Reduced motion: static rays.