리브 유리

이 프로젝트에 Duchamp 모션 배경 "리브 유리"(골을 타고 흐르는 빛)를 실시간 셰이더 배경으로 넣어 줘.

## 배경 정보
- 엔진: Shaders(shaders.com) — MIT, 상업적 사용 가능. 패키지 `shaders@4.0.2` (버전 고정)
- WebGPU 로 그린다. 글자·이미지·폰트 없음 — 위에 내 글자를 얹어 쓰는 배경
- 정지 포스터: https://duchamp.app/readymade/backgrounds/shader-fluted-glass.large.webp
- 같은 장면의 영상(9:16 MP4, 반복): https://pub-a4aa81cc9139413c99493d10e0d4398d.r2.dev/backgrounds/shader-fluted-glass/073d74404cb93be0f719d727451f6151773312ce154d2d86490c89bd4152db8a.mp4

## 넣는 방법
1. `npm i shaders@4.0.2` (pnpm·yarn 이면 그 도구로). 버전을 올리지 않는다.
2. 아래 코드를 `FlutedGlassBackground.tsx` 컴포넌트로 만든다(기존 components 폴더 관례를 따른다). 효과 순서·속성 값은 그대로 둔다. Next.js(App Router)면 파일 맨 위에 "use client".
3. 배경으로 깐다: 감싸는 섹션을 `position: relative; overflow: hidden` 으로 두고, `<Shader>` 에 `style={{ position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0 }}`, 내용은 그 위(zIndex 1)에 둔다. 따로 말하지 않았으면 첫 화면(히어로) 섹션에 깐다.
4. WebGPU 를 못 쓰는 브라우저: `<Shader onUnavailable={...}>` 에서 상태를 바꿔 포스터 이미지(https://duchamp.app/readymade/backgrounds/shader-fluted-glass.large.webp, object-fit: cover)로 대신 보여 준다. 처음 그려지기 전 빈 화면이 보이지 않게 같은 포스터를 CSS 배경으로 깔아 둔다.
5. `prefers-reduced-motion: reduce` 면 셰이더를 띄우지 말고 포스터만 보여 준다.

```tsx
import {
  Shader,
  FilmGrain,
  FlutedGlass,
  LightLeak,
  LinearGradient,
  RadialGradient,
  Vignette,
} from 'shaders/react'

export default function FlutedGlassBackground() {
  return (
    <Shader>
      <LinearGradient
        colorSpace="oklab"
        end={{
          x: 0.5,
          y: 1
        }}
        start={{
          x: 0.5,
          y: 0
        }}
        stops={[{ color: "#d3d1cd", position: 0 }, { color: "#c9cbd0", position: 0.5 }, { color: "#c9c4bc", position: 1 }]} />
      <RadialGradient
        aspect={0.85}
        center={{
          x: 0.5,
          y: 0.24
        }}
        colorSpace="oklab"
        radius={0.36}
        stops={[{ color: "#fffaf1", position: 0 }, { color: "rgba(249, 241, 228, 0.85)", position: 0.3 }, { color: "rgba(238, 230, 217, 0.35)", position: 0.62 }, { color: "rgba(232, 225, 214, 0)", position: 1 }]} />
      <LightLeak
        colorFringe="#bdb6ad"
        colorHot="#fffaf2"
        colorMid="#efe6d8"
        flicker={0.7}
        intensity={0.07}
        position={{
          x: 0.5,
          y: -0.2
        }}
        seed={5}
        speed={1.1}
        spread={0.45}
        streaks={0.05} />
      <FlutedGlass
        aberration={0.05}
        frequency={12}
        highlight={1.4}
        highlightSoftness={0.35}
        lightAngle={35}
        refraction={2.2}
        shape="rounded"
        speed={0.1429}
        waveAmplitude={0} />
      <Vignette
        center={{
          x: 0.5,
          y: 0.3
        }}
        color="#8f96a3"
        falloff={0.75}
        intensity={0.8}
        radius={0.26} />
      <FilmGrain
        bias={0}
        strength={0.05} />
    </Shader>
  )
}
```

## 지켜 줄 것
- 배경 위 글자는 대비를 확인한다(어두운 배경엔 밝은 글자). 필요하면 배경 쪽에 반투명 막을 한 겹 더하되 셰이더 값은 건드리지 않는다.
- 서버 렌더에서 깨지지 않게 셰이더 컴포넌트는 클라이언트에서만 그린다.
- 알아 둘 것: Shaders 는 기본으로 방문의 5% 표본에서 성능 기록(사이트 도메인·브라우저 종류·기기 종류·FPS)을 shaders.com 으로 보낸다. 내가 끄라고 했거나 사이트 개인정보 정책상 외부 전송을 막아야 하면 `<Shader disableTelemetry>` 를 붙인다. 따로 말이 없으면 그대로 두고, 끝난 뒤 보고에 이 사실을 한 줄 알려 준다.
- 끝나면 바뀐 파일 목록과, 실제로 움직이는 배경이 보이는지 확인한 방법(개발 서버 화면 등)을 알려 줘.

출처: Duchamp 모션 배경 https://duchamp.app/readymade/backgrounds/shader-fluted-glass