Carousel Card Riffle

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4 
5// ---------------------------------------------------------------------------
6// RiffleEdge — a card-stack navigator whose pagination indicator IS the scrub
7// control. The stack shows its actual card edges as a stripe of thin lines
8// (one 1px --border line per card, the current one recolored --foreground),
9// running down the side of the top card like the exposed page-edge of a
10// book. Dragging that stripe riffles cards past: each step change kicks the
11// top card with a 220ms rotateY(5deg) + translateX(11px) flip-past (deter-
12// ministic per-index vertical jitter, so no two steps land identically),
13// settling on a smooth ease-out with no overshoot — release settles the
14// arrival with the same kick. The two decorative depth layers behind the
15// top card (its permanently-visible stacked-thickness read) kick too, on
16// the same commit, at a subtler amplitude (9px/3deg then 5px/2deg, reduced
17// with depth): an opposite-leaning translate+rotate that eases back to
18// their resting offset a beat after the top card, each layer lagging the
19// one in front of it — so a step reads as the whole deck visibly
20// reshuffling and restacking, cleanly, not a subtle 3px nudge and not a
21// glitchy overshoot. Scrub
22// velocity governs which: slow drags step discretely (a kick per card), fast
23// drags blur the top card through a CSS filter transition instead of
24// chattering through kicks — the exposed edge itself carries both roles at
25// once, never a separate dot-row or progress bar.
26//
27// Direct DOM writes (transform/filter) on committed index changes only — no
28// per-frame rAF loop. Motion is entirely CSS-transition-driven: a one-off
29// double-write (snap to a kicked pose, then rAF back to identity/rest so the
30// transition eases the return) for the flip and the two back-layer nudges,
31// and a filter transition ramped by the caller for blur. The back layers'
32// resting offset is expressed in rem (matching their Tailwind translate
33// utility at rest) with the kick's extra nudge layered on top via calc(), so
34// the shuffle scales with root font size the same way the static pose
35// already did. `prefers-reduced-motion` drops all of it: no rotateY, no
36// perspective, no back-layer nudge, no blur ever — steps crossfade via
37// opacity instead.
38//
39// The stripe's *drawn* thickness is deliberately compressed (down to a
40// 1.5px-per-card pitch) so a small deck visibly reads thinner than a large
41// … truncated