Cards Rotate Slider

"use client";

import { useEffect } from "react";
import CardsRotateSlider from "@/components/ui/cards-rotate-slider";

export default function CardsRotateSliderDemo() {
  // The pinned track is the first thing on this page, so ScrollTrigger reads
  // its start position relative to page-top. Some embedded-preview
  // environments mount already scrolled (scroll restoration, a stale anchor,
  // or the preview's own cover/video capture pass) — ScrollTrigger then
  // evaluates that stale scroll position on init and jumps straight to a
  // mid-scroll frame instead of starting at card 1. Force back to the top
  // once on mount so the demo always starts clean.
  useEffect(() => {
    if (typeof window === "undefined") return;
    const previousRestoration = "scrollRestoration" in window.history ? window.history.scrollRestoration : undefined;
    if ("scrollRestoration" in window.history) window.history.scrollRestoration = "manual";
    window.scrollTo(0, 0);
    return () => {
      if (previousRestoration && "scrollRestoration" in window.history) {
        window.history.scrollRestoration = previousRestoration;
      }
    };
  }, []);

  return (
    // w-full + min-w-0: 21st's preview mounts demos inside a centering flex
    // wrapper. A block element with no width there sizes to its widest
    // descendant instead of filling the wrapper — this track's cards made
    // that ~7000px wide, which then got centered, shoving roughly half of it
    // off-screen to the left (the "starts mid-scroll" symptom) and made the
    // component's own overflow-x:clip a no-op (nothing left to clip once the
    // box itself had already grown to fit everything). min-w-0 overrides the
    // flex item's default min-width:auto so it can actually shrink back down
    // to the wrapper's width instead of refusing to go narrower than its
    // content.
    <main className="w-full min-w-0 bg-background text-foreground">
      <CardsRotateSlider rotationAmount={1.1} verticalDrift={1.2} perspective={1000} textColor="#f5f5f5" />

      <section className="flex h-screen items-center justify-center px-6 text-center text-sm text-muted-foreground">
        Drop in your own `images` array — captions are optional per card.
      </section>

      <div className="pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center">
        <p className="rounded-full border border-white/10 bg-black/40 px-4 py-1.5 text-xs text-white/70 backdrop-blur-sm">
          Scroll to pan the track — each card rotates in, settles, then tilts back out
        </p>
      </div>
    </main>
  );
}