Iridescence `<mv-iridescence>`

세로로 세운 WebGL 비누막입니다. 중력 때문에 위는 얇고 아래는 두껍게 흘러내려 간섭색이 띠 모양으로 쌓이고, 느린 소용돌이가 그 띠를 말아 마블 무늬를 만들며, 가장 두꺼운 막은 강조 색의 진주처럼 모입니다.

작동 방식

세로로 세운 WebGL 비누막입니다. 중력 때문에 위는 얇고 아래는 두껍게 흘러내려 간섭색이 띠 모양으로 쌓이고, 느린 소용돌이가 그 띠를 말아 마블 무늬를 만들며, 가장 두꺼운 막은 강조 색의 진주처럼 모입니다. 두 개의 스트립 라이트가 막에 비칩니다. 포인터는 이 조명을 미끄러뜨리고 보는 각도를 바꿔 주변의 색을 이동시킵니다. 막은 테마를 따라 다크 페이지에서는 반사광으로 빛나고, 라이트 페이지에서는 뒤에서 비추는 빛을 받아 투과된 파스텔 색을 보여 줍니다. 화면 밖에서는 일시 정지하고, 페이지의 WebGL 컨텍스트 예산을 공유하며, 동작 줄이기 설정에서는 정지 프레임을 유지합니다.

카테고리	배경
유형	WebGL 요소 (`<mv-iridescence>`)
상태	안정
함께 설치되는 항목	shader
Keywords	safe-rewrite, webgl, shader, iridescent, holographic, soap-film, pearl, hero

When to use

A beauty, fashion, crypto or creative brand wants a holographic, soap-film sheen as a hero backdrop
The backdrop should answer the pointer: reflections slide and colors shift where the visitor moves
The same iridescent hero must work in light (pastel, backlit) and dark (glowing) themes without extra tuning

Avoid when

The holographic look should apply to cards and buttons, not the page background → use Surface instead
A reflective liquid-metal surface is the intended look → use Liquid Chrome instead
A still section background is enough and no WebGL should run → use Backdrop instead

설치

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

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["iridescence"], 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/observe.js, core/webgl.js, components/shader/shader.js, components/shader/shader.css, components/iridescence/iridescence.js, components/iridescence/iridescence.css.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<mv-iridescence data-fill></mv-iridescence>
<div style="position:relative;display:grid;place-items:center;height:100%;min-height:320px;padding:2rem 1rem;box-sizing:border-box;text-align:center;pointer-events:none">
  <div>
    <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em;color:var(--mv-fg);text-shadow:0 0 28px var(--mv-bg),0 0 10px var(--mv-bg)">Thin as light</p>
    <p style="margin:.6rem auto 0;max-width:26rem;color:var(--mv-fg);text-shadow:0 0 16px var(--mv-bg),0 0 6px var(--mv-bg)">A soap film drains into bands of color. Move the pointer to tilt the light.</p>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`color`	CSS color	`var(--mv-accent)`	Pearl into which the thickest film settles; only its hue counts (tokens accepted, read again on theme change).
`scale`	number	`1`	Size of the swirls.
`amplitude`	number	`1`	Strength of the eddies that stir the bands (0 = flat horizontal bands).
`saturation`	number	`1`	Vividness of the interference colors (0 = a neutral sheen, max 3).
`depth`	number	`0.5`	Tonal depth: 0 = the whole film shows its colors, 1 = colors mostly where the strip lights fall.
`glint`	number	`1`	Strength of the strip-light reflections and their glare (0 = none, max 3).
`speed`	number	`1`	Time multiplier.
`paused`	boolean		Freezes the animation on the current frame.
`interactive`	boolean		Follows the pointer only over the element (otherwise across the whole window).
`dpr`	number	`1.5`	Max pixel density (capped at 2).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Events

Name	Description
`mv-error`	The shader failed to compile on this GPU. detail: { message }. The element gets data-error and shows its fallback.

Content structure

Name	Description
`children`	Content placed inside the element sits above the film.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events, and content placed inside stays in the normal reading order. The loop stops off screen and in hidden tabs; reduced motion (OS or <html data-motion="reduce">) and paused keep a still, representative frame. Without WebGL2 a still band of soap-film colors in the theme tokens is shown; forced colors and print hide the canvas. The bands are vivid and change brightness, so text placed over them needs a halo or a backing panel to stay readable.