인디고 리소

이 프로젝트에 Duchamp 모션 배경 "인디고 리소"(번지는 망점)를 실시간 셰이더 배경으로 넣어 줘.

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

## 넣는 방법
1. `npm i shaders@4.0.2` (pnpm·yarn 이면 그 도구로). 버전을 올리지 않는다.
2. 아래 코드를 `IndigoHalftoneBackground.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-indigo-halftone.large.webp, object-fit: cover)로 대신 보여 준다. 처음 그려지기 전 빈 화면이 보이지 않게 같은 포스터를 CSS 배경으로 깔아 둔다.
5. `prefers-reduced-motion: reduce` 면 셰이더를 띄우지 말고 포스터만 보여 준다.

```tsx
import {
  Shader,
  Dither,
  MeshGradient,
  Paper,
} from 'shaders/react'

export default function IndigoHalftoneBackground() {
  return (
    <Shader>
      <MeshGradient
        count={4}
        drift={0.6}
        seed={7}
        smoothness={2.4}
        speed={6}
        stops={[{ color: "#1a1f5a", position: 0 }, { color: "#5b62a8", position: 0.35 }, { color: "#c9cbe6", position: 0.7 }, { color: "#ffffff", position: 1 }]}
        swirl={0.4}
        variation={0.45} />
      <Dither
        colorA="#2b33b8"
        colorB="#f2efe6"
        pattern="clusteredDot"
        pixelSize={6} />
      <Paper
        displacement={0.08}
        grainScale={1.4}
        roughness={0.25}
        seed={5} />
    </Shader>
  )
}
```

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

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