"use client";

import { CurvedScrollWall } from "./index";

export interface DemoProps {
  bend?: number;
  scrollSpeed?: number;
  borderRadius?: number;
  textColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ bend = 3, scrollSpeed = 2, borderRadius = 8, textColor = "#FFFFFF" }: DemoProps) {
  return (
    <div className="w-full p-6">
      <CurvedScrollWall bend={bend} scrollSpeed={scrollSpeed} borderRadius={borderRadius} textColor={textColor} />
    </div>
  );
}

1d:T25ac, 1e:T1ed25,

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";

const props = withDefaults(
  defineProps<{
    bend?: number;
    scrollSpeed?: number;
    borderRadius?: number;
    textColor?: string;
  }>(),
  { bend: 3, scrollSpeed: 2, borderRadius: 8, textColor: "#FFFFFF" },
);

interface Photo {
  caption: string;
  colors: [string, string];
  blob: string;
  blobX: number;
  blobY: number;
}

const TILE_W = 128;
const TILE_H = 158;
const GAP = 24;
const SPACING = TILE_W + GAP;

const PHOTOS: Photo[] = [
  { caption: "Kyoto, Autumn", colors: ["#FF9142", "#8C2E12"], blob: "#FFD9A0", blobX: -24, blobY: -34 },
  { caption: "Basalt Coast", colors: ["#1B6E86", "#08222B"], blob: "#8FEEDD", blobX: 20, blobY: -20 },
  { caption: "Dune Light", colors: ["#F6C94A", "#B9740A"], blob: "#FFEFC0", blobX: -16, blobY: 24 },
  { caption: "Harbor Mist", colors: ["#4E76B0", "#152238"], blob: "#C7DEFF", blobX: 22, blobY: 18 },
  { caption: "Terraced Hills", colors: ["#5F9A3B", "#1E3410"], blob: "#D3F5A6", blobX: -20, blobY: -18 },
  { caption: "Glacier Blue", colors: ["#3FC2FB", "#0B4157"], blob: "#DFF7FF", blobX: 18, blobY: -26 },
  { caption: "Market Lanterns", colors: ["#FF5590", "#7A1140"], blob: "#FFD3E4", blobX: -22, blobY: 20 },
  { caption: "Salt Flats", colors: ["#E4D8C4", "#8F8168"], blob: "#FFF8E8", blobX: 16, blobY: -14 },
  { caption: "Cedar Ridge", colors: ["#9FE562", "#2E4E14"], blob: "#EAFFC8", blobX: -18, blobY: 26 },
  { caption: "Coral Reef", colors: ["#FF7A29", "#7C1B6E"], blob: "#FFD8F0", blobX: 20, blobY: 22 },
];

function clamp(value: number, min: number, max: number): number {
  return Math.min(max, Math.max(min, value));
}
function smoothstep(edge0: number, edge1: number, x: number): number {
  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
  return t * t * (3 - 2 * t);
}
function tracePill(ctx: CanvasRenderingContext2D, w: number, h: number, r: number) {
  const rad = Math.max(0, Math.min(r, w / 2, h / 2));
  const x = -w / 2;
  const y = -h / 2;
  ctx.beginPath();
  ctx.moveTo(x + rad, y);
  ctx.lineTo(x + w - rad, y);
  ctx.arcTo(x + w, y, x + w, y + rad, rad);
  ctx.lineTo(x + w, y + h - rad);
  ctx.arcTo(x + w, y + h, x + w - rad, y + h, rad);
  ctx.lineTo(x + rad, y + h);
  ctx.arcTo(x, y + h, x, y + h - rad, rad);
  ctx.lineTo(x, y + rad);
  ctx.arcTo(x, y, x + rad, y, rad);
  ctx.closePath();
}

const wrapEl = ref<HTMLDivElement | null>(null);
const canvasEl = ref<HTMLCanvasElement | null>(null);
const dragging = ref(false);

let scroll = 0;
let velocity = 0;
let isDragging = false;
let pointerX = 0;
let pointerT = 0;
let raf: number | null = null;
let lastFrame: number | null = null;
let size = { width: 0, height: 0, dpr: 1 };
let reduceMotion = false;
let ro: ResizeObserver | null = null;

function draw() {
  const canvas = canvasEl.value;
  const ctx = canvas?.getContext("2d");
  if (!canvas || !ctx || size.width <= 0 || size.height <= 0) return;

  ctx.save();
  ctx.scale(size.dpr, size.dpr);
  ctx.clearRect(0, 0, size.width, size.height);
  ctx.fillStyle = "#0b0d10";
  ctx.fillRect(0, 0, size.width, size.height);

  const half = size.width / 2;
  const centerY = size.height * 0.42;
  const radius = clamp(props.borderRadius, 0, Math.min(TILE_W, TILE_H) / 2);
  const low = Math.floor((scroll - half - TILE_W) / SPACING);
  const high = Math.ceil((scroll + half + TILE_W) / SPACING);

  for (let i = low; i <= high; i++) {
    const worldX = i * SPACING;
    const cx = half + (worldX - scroll);
    const rawT = (cx - half) / half;
    const curveT = clamp(rawT, -1, 1);
    const alpha = 1 - smoothstep(0.6, 1.05, Math.abs(rawT));
    if (alpha <= 0.02) continue;

    const yOffset = props.bend * 14 * curveT * curveT;
    const scale = 1 - 0.26 * Math.abs(curveT);
    const rotation = curveT * props.bend * 0.085;
    const photo = PHOTOS[((i % PHOTOS.length) + PHOTOS.length) % PHOTOS.length];

    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.translate(cx, centerY + yOffset);
    ctx.rotate(rotation);
    ctx.scale(scale, scale);

    tracePill(ctx, TILE_W, TILE_H, radius);
    ctx.save();
    ctx.clip();
    const fill = ctx.createLinearGradient(-TILE_W / 2, -TILE_H / 2, TILE_W / 2, TILE_H / 2);
    fill.addColorStop(0, photo.colors[0]);
    fill.addColorStop(1, photo.colors[1]);
    ctx.fillStyle = fill;
    ctx.fillRect(-TILE_W / 2, -TILE_H / 2, TILE_W, TILE_H);
    const glow = ctx.createRadialGradient(photo.blobX, photo.blobY, 2, photo.blobX, photo.blobY, TILE_W * 0.6);
    glow.addColorStop(0, `${photo.blob}bb`);
    glow.addColorStop(1, `${photo.blob}00`);
    ctx.fillStyle = glow;
    ctx.fillRect(-TILE_W / 2, -TILE_H / 2, TILE_W, TILE_H);
    ctx.restore();

    ctx.lineWidth = 1.4;
    ctx.strokeStyle = "rgba(255,255,255,0.16)";
    ctx.stroke();

    ctx.globalAlpha = alpha * 0.92;
    ctx.fillStyle = props.textColor;
    ctx.font = "600 13px ui-sans-serif, system-ui, sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    ctx.fillText(photo.caption, 0, TILE_H / 2 + 14);

    ctx.restore();
  }
  ctx.restore();
}

function ensureLoop() {
  if (raf != null) return;
  const tick = (time: number) => {
    const last = lastFrame ?? time;
    const dt = Math.min(time - last, 48);
    lastFrame = time;
    let moving = isDragging;
    if (!isDragging) {
      if (!reduceMotion && Math.abs(velocity) > 0.0015) {
        scroll += velocity * dt;
        velocity *= Math.pow(0.93, dt / 16.6667);
        moving = true;
      } else {
        velocity = 0;
      }
    }
    const total = SPACING * PHOTOS.length;
    if (scroll > total * 4096 || scroll < -total * 4096) {
      scroll = ((scroll % total) + total) % total;
    }
    draw();
    if (moving) {
      raf = requestAnimationFrame(tick);
    } else {
      raf = null;
      lastFrame = null;
    }
  };
  raf = requestAnimationFrame(tick);
}

function onWheelNative(event: WheelEvent) {
  if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
  event.preventDefault();
  const delta = event.deltaX * 0.45 * props.scrollSpeed;
  scroll += delta;
  if (!reduceMotion) velocity += delta * 0.018;
  ensureLoop();
}

function onPointerDown(event: PointerEvent) {
  isDragging = true;
  dragging.value = true;
  velocity = 0;
  pointerX = event.clientX;
  pointerT = performance.now();
  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
  ensureLoop();
}
function onPointerMove(event: PointerEvent) {
  if (!isDragging) return;
  const now = performance.now();
  const dx = event.clientX - pointerX;
  const dt = Math.max(now - pointerT, 1);
  scroll -= dx;
  velocity = reduceMotion ? 0 : -dx / dt;
  pointerX = event.clientX;
  pointerT = now;
  draw();
}
function endDrag(event: PointerEvent) {
  if (!isDragging) return;
  isDragging = false;
  dragging.value = false;
  const el = event.currentTarget as HTMLElement;
  if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
  ensureLoop();
}
function onKeyDown(event: KeyboardEvent) {
  if (event.key === "ArrowRight") {
    event.preventDefault();
    if (reduceMotion) scroll += SPACING * 0.6;
    else velocity += 0.5 * props.scrollSpeed;
    ensureLoop();
  } else if (event.key === "ArrowLeft") {
    event.preventDefault();
    if (reduceMotion) scroll -= SPACING * 0.6;
    else velocity -= 0.5 * props.scrollSpeed;
    ensureLoop();
  }
}

onMounted(() => {
  const wrap = wrapEl.value;
  const canvas = canvasEl.value;
  if (!wrap || !canvas) return;

  reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  ro = new ResizeObserver((entries) => {
    const entry = entries[0];
    if (!entry) return;
    const { width, height } = entry.contentRect;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    size = { width, height, dpr };
    canvas.width = Math.max(1, Math.round(width * dpr));
    canvas.height = Math.max(1, Math.round(height * dpr));
    draw();
  });
  ro.observe(wrap);
  wrap.addEventListener("wheel", onWheelNative, { passive: false });

  if (!reduceMotion) {
    velocity = 0.62;
    ensureLoop();
  } else {
    draw();
  }
});

onBeforeUnmount(() => {
  ro?.disconnect();
  wrapEl.value?.removeEventListener("wheel", onWheelNative);
  if (raf != null) cancelAnimationFrame(raf);
  raf = null;
  lastFrame = null;
});
</script>

<template>
  <div
    ref="wrapEl"
    role="region"
    aria-roledescription="carousel"
    aria-label="Curved photo wall"
    tabindex="0"
    class="curved-scroll-wall"
    :class="{ dragging: dragging }"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="endDrag"
    @pointercancel="endDrag"
    @keydown="onKeyDown"
  >
    <canvas ref="canvasEl" aria-hidden="true" class="curved-scroll-wall__canvas" />
    <p class="sr-only">Drag, scroll, or use the left and right arrow keys to browse the wall of photos.</p>
    <ul class="sr-only">
      <li v-for="photo in PHOTOS" :key="photo.caption">{{ photo.caption }}</li>
    </ul>
  </div>
</template>

<style scoped>
.curved-scroll-wall {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.curved-scroll-wall.dragging {
  cursor: grabbing;
}
.curved-scroll-wall:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.4);
}
.curved-scroll-wall__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Nearby