물리 픽셀 그레인으로 완성하는 소프트 그라디언트와 세선 문양 카드 월

외부 이미지나 외부 라이브러리 없이 순수 HTML, CSS, 오프스크린 Canvas, 인라인 SVG만으로 그레인 그라디언트 카드 월을 구현해 주세요.

1. 배치와 카드 골격
- 그리드 구성은 데스크톱에서 [3열 2행, 총 6장]으로 배치하고 모바일에서는 1열로 배치합니다.
- 각 카드는 정사각형(aspect-ratio: 1 / 1)으로 만듭니다. 모서리 반경 20px(border-radius: 20px), overflow: hidden, isolation: isolate, container-type: inline-size를 적용합니다.
- 카드 안쪽 테두리는 ::after 의사 요소에 box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 15%)를 적용하고 다크 모드에서는 rgb(255 255 255 / 16%)로 전환합니다.
- 중앙 표제는 카드 정중앙에 두 줄로 배치합니다. 흰색(#FFFFFF), 글자 크기 max(14px, 8cqi), 굵기 400, 줄간격 1.16, 자간 -0.018em를 적용합니다.
- 카드별 표제 목록은 [01 Product Teardowns / 02 Indie Builders Weekly / 03 AI Workflow Handbook / 04 Design Notes / 05 Late Night Shipping / 06 Build in Public] 순서로 넣습니다.

2. 카드 내부 5겹 레이어 순서 (아래에서 위 순서)
- 1층(.card-base)에는 위쪽이 밝고 차가운 색이고 아래쪽이 어둡고 따뜻한 색인 수직 선형 그라디언트를 적용합니다.
- 2층(.card-blobs)에는 카드 크기의 78%인 원형 색덩어리 4개를 네 모서리 외곽(-18% inset)에 배치하고 filter: blur(26px) saturate(112%)를 적용합니다. 색상환 반대편의 보색을 섞지 말고 반드시 색상환에서 서로 이웃한 색만 조합합니다.
- 3층(.card-pattern)에는 viewBox="0 0 400 400" 인라인 SVG로 흰색(#FFFFFF), 두께 0.8px, 불투명도 0.32의 기하학 세선 문양을 그립니다. 문양은 물결 방사선, 동심 등고선, 수평 음파선, 도트 매트릭스, 양볼록 렌즈 격자입니다. 중앙 표제가 잘 읽히도록 radial-gradient 마스크로 중심 반경 18%를 투명하게 비운 뒤 52% 지점까지 서서히 드러나게 합니다.
- 4층(.card-glow)에는 포인터 좌표를 따라가는 반경 160px의 흰색 방사형 소프트 글로우를 두고 호버 시에만 서서히 밝아지게 합니다.
- 5층(.card-grain)에는 오프스크린 Canvas(128x128)에서 생성한 무작위 회색조(R=G=B=0..255, A=255) 노이즈 타일을 덮습니다. background-size는 (128 / window.devicePixelRatio)px로 계산합니다. 여기에 image-rendering: pixelated, mix-blend-mode: overlay, opacity: 0.40을 적용해 노이즈 입자 1개가 물리 픽셀 1개에 대응하도록 맞춥니다.

3. 모션과 스프링 호버 반응
- 평상시에는 4개의 색덩어리에 21초에서 28초 주기의 서로 다른 @keyframes 부유 애니메이션을 적용합니다.
- 포인터가 움직일 때는 고정 시간 CSS 전환을 쓰지 말고, 강성(stiffness) 70, 감쇠비(damping ratio) 0.86의 2차 스프링 미분방정식을 requestAnimationFrame으로 적분합니다. 커서가 움직이면 색덩어리는 커서 방향으로 최대 +28px, 세선 문양은 반대 방향으로 최대 -14px 이동하게 하고, 그레인 타일은 0px로 고정합니다.
- 운영체제의 모션 축소(@media (prefers-reduced-motion: reduce))가 켜진 환경에서는 부유 애니메이션과 스프링 이동을 모두 중단합니다.

function applyPhysicalGrain(root = document.documentElement) {
  const size = 128;
  const dpr = Math.max(1, window.devicePixelRatio || 1);
  const canvas = document.createElement("canvas");
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  const imgData = ctx.createImageData(size, size);
  const data = imgData.data;
  let seed = 0x6D2B79F5;
  function nextRand() {
    seed |= 0;
    seed = (seed + 0x6D2B79F5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  }

  for (let i = 0; i < data.length; i += 4) {
    const v = Math.floor(nextRand() * 256);
    data[i] = v;
    data[i + 1] = v;
    data[i + 2] = v;
    data[i + 3] = 255;
  }

  ctx.putImageData(imgData, 0, 0);
  root.style.setProperty("--grain-url", `url("${canvas.toDataURL("image/png")}")`);
  root.style.setProperty("--card-grain-tile-size", `${(size / dpr).toFixed(3)}px`);
}

.grain-card {
  container-type: inline-size;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}

.card-blobs {
  position: absolute;
  inset: -18%;
  z-index: 1;
  filter: blur(26px) saturate(112%);
  transform: translate3d(var(--blob-x, 0px), var(--blob-y, 0px), 0px);
}

.card-pattern {
  position: absolute;
  inset: -6%;
  z-index: 2;
  opacity: 0.32;
  transform: translate3d(var(--pat-x, 0px), var(--pat-y, 0px), 0px);
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 18%,
    rgb(0 0 0 / 36%) 35%,
    #000 52%,
    #000 100%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 18%,
    rgb(0 0 0 / 36%) 35%,
    #000 52%,
    #000 100%
  );
}

.card-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: var(--grain-url);
  background-repeat: repeat;
  background-size: var(--card-grain-tile-size, 128px) var(--card-grain-tile-size, 128px);
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

const stiffness = 70;
const damping = 2 * 0.86 * Math.sqrt(stiffness);

function attachCardSpring(card) {
  const state = { x: 0, y: 0, vx: 0, vy: 0, tx: 0, ty: 0, raf: null, last: 0 };

  function step(now) {
    const dt = Math.min((now - (state.last || now)) / 1000, 1 / 30);
    state.last = now;
    state.vx += (-stiffness * (state.x - state.tx) - damping * state.vx) * dt;
    state.vy += (-stiffness * (state.y - state.ty) - damping * state.vy) * dt;
    state.x += state.vx * dt;
    state.y += state.vy * dt;

    card.style.setProperty("--blob-x", `${(state.x * 28).toFixed(2)}px`);
    card.style.setProperty("--blob-y", `${(state.y * 28).toFixed(2)}px`);
    card.style.setProperty("--pat-x", `${(state.x * -14).toFixed(2)}px`);
    card.style.setProperty("--pat-y", `${(state.y * -14).toFixed(2)}px`);

    const dist = Math.hypot(state.x - state.tx, state.y - state.ty);
    const speed = Math.hypot(state.vx, state.vy);
    if (dist < 0.002 && speed < 0.01) {
      state.x = state.tx;
      state.y = state.ty;
      state.raf = null;
      return;
    }
    state.raf = requestAnimationFrame(step);
  }

  card.addEventListener("pointermove", event => {
    const rect = card.getBoundingClientRect();
    state.tx = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
    state.ty = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
    card.style.setProperty("--glow-x", `${(event.clientX - rect.left).toFixed(1)}px`);
    card.style.setProperty("--glow-y", `${(event.clientY - rect.top).toFixed(1)}px`);
    if (!state.raf) {
      state.last = 0;
      state.raf = requestAnimationFrame(step);
    }
  });

  card.addEventListener("pointerleave", () => {
    state.tx = 0;
    state.ty = 0;
    if (!state.raf) {
      state.last = 0;
      state.raf = requestAnimationFrame(step);
    }
  });
}