6d:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 82:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}] 54:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0f4f9"}] 55:["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2a3444"}]]}] 56:["$","div","color-error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d92d4a"}]]}] 57:["$","div","color-error-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 58:["$","div","color-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#101828"}]]}] 59:["$","div","color-fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#344054"}]]}] 5a:["$","div","color-focus",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-focus",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#315fea"}]]}] 5b:["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#087dbd"}]]}] 5c:["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5d:["$","div","color-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#667085"}]]}] 5e:["$","div","color-neutral",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#475467"}]]}] 5f:["$","div","color-neutral-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 60:["$","div","color-secondary-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-secondary-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#009fb3"}]]}] 61:["$","div","color-signature",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-signature",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e9564a"}]]}] 62:["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#128a55"}]]}] 63:["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 64:["$","div","color-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 65:["$","div","color-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafd"}]]}] 66:["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b86e00"}]]}] 67:["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 68:["$","$L6d",null,{"orientation":"horizontal"}] 69:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4f7cff"}]]}],["$","div","color-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f91ff"}]]}],["$","div","color-accent-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7f9fff"}]]}],["$","div","color-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-bg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#263449"}]]}],["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#354863"}]]}],["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L6e"}]]}],"$L6f","$L70","$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80"]}],"$L81"]}]}]]}] 6a:null 6b:null 83:T2ffe,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useVisibilityPause } from "@/lib/motiq"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export interface VelocitySkewFeedProps extends Omit, "children"> { /** The feed cards. Each one gets its own shear/stretch wrapper. */ items: React.ReactNode[]; /** * `"container"` (default) scrolls the feed inside its own keyboard-operable * stage — the card/preview usage. `"page"` reacts to the document scroll and * lets the feed flow at whatever height its content needs. */ scrollMode?: "page" | "container"; /** Maximum shear in degrees at full speed. */ maxSkew?: number; /** Spring stiffness (k). */ stiffness?: number; /** Spring damping (c). Below ~2·√k the spring overshoots — that is the rubber snap. */ damping?: number; /** Extra stretch along the scroll axis per degree of shear. */ stretch?: number; /** Degrees of target shear per px/s of smoothed scroll velocity. */ sensitivity?: number; /** Velocity smoothing rate (λ per second). */ smoothing?: number; /** Render the velocity meter readout. Off by default — it is a debugging surface. */ meter?: boolean; /** Full-scale velocity for the meter needle, in px/s. */ meterScale?: number; /** Scroll axis. */ axis?: "y" | "x"; /** Stage height (container mode). */ height?: number | string; /** Accessible name for the internal scroll region (container mode). */ label?: string; /** Force the static, motion-free variant regardless of system preference. */ reducedMotion?: boolean; } /* -------------------------------------------------------------------------- */ /* Constants + helpers */ /* -------------------------------------------------------------------------- */ const T = { accent: "var(--color-accent, #4f7cff)", accent2: "var(--color-secondary-accent, #22c7d9)", surface2: "var(--color-surface-2, #192337)", border: "var(--color-border, #263449)", borderStrong: "var(--color-border-strong, #354863)", fg: "var(--color-fg, #f8fafc)", muted: "var(--color-muted, #9caabd)", bgElevated: "var(--color-bg-elevated, #0d1420)", } as const; /** Peak readout decay per second. */ const PEAK_DECAY = 0.4; /** Text readouts refresh every Nth frame — meter text must never drive layout work. */ const READ_EVERY = 5; /** Below this the spring is considered asleep and transforms stop being written. */ const SLEEP_SKEW = 0.02; const SLEEP_VEL = 2; const clamp = (v: number, a: number, b: number) => (v < a ? a : v > b ? b : v); const damp = (cur: number, tgt: number, lambda: number, dt: number) => cur + (tgt - cur) * (1 - Math.exp(-lambda * dt)); const px = (v: number | string) => (typeof v === "number" ? `${v}px` : v); const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect; /** Locale-independent grouping so the meter reads the same on any machine. */ function group(n: number): string { return Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ /** * VelocitySkewFeed — a feed whose cards shear and stretch with scroll velocity and * rubber-snap back when you stop. Velocity is a smoothed Δscroll/Δt, and the shear * it targets is integrated through a real spring (`s″ = k(target − s) − c·s′`) with * frame delta-time, so a hard stop overshoots once and settles instead of easing * to a halt. Transforms are the only thing written, one per card per frame, and * the loop stops writing entirely once the spring's energy falls under threshold — * the effect costs nothing at rest. Reduced motion drops the physics and leaves a * plain, fully scrollable feed. Clean-room original. */ export function VelocitySkewFeed({ items, scrollMode = "container", maxSkew = 6.5, stiffness = 90, damping = 14, stretch = 0.008, sensitivity = 0.0035, smoothing = 12, meter = false, meterScale = 2600, axis = "y", height = 540, label = "Activity feed. Scroll quickly to see the cards react to speed.", reducedMotion, className, style, ...props }: VelocitySkewFeedProps) { const rootRef = React.useRef(null); const scrollerRef = React.useRef(null); const cardRefs = React.useRef>([]); const needleRef = React.useRef(null); const readRef = React.useRef(null); const peakRef = React.useRef(null); const systemReduced = useReducedMotion(); const [enhanced, setEnhanced] = React.useState(false); useIsoLayoutEffect(() => setEnhanced(true), []); const staticMode = reducedMotion === true || (enhanced && systemReduced); const springing = enhanced && !staticMode; const onScreen = useVisibilityPause(rootRef, { threshold: 0.01 }); const animate = springing && onScreen; const container = scrollMode === "container"; const horizontal = axis === "x"; const stageH = px(height); const paramsRef = React.useRef({ maxSkew, stiffness, damping, stretch, sensitivity, smoothing, meterScale, horizontal }); paramsRef.current = { maxSkew, stiffness, damping, stretch, sensitivity, smoothing, meterScale, horizontal }; React.useEffect(() => { const sc = scrollerRef.current; if (!container || !springing || !sc) return; // overscroll-behavior: contain stops native chaining, so relay at the ends. // Passive listener — the feed never preventDefaults a wheel event. const onWheel = (e: WheelEvent) => { const pos = horizontal ? sc.scrollLeft : sc.scrollTop; const max = horizontal ? sc.scrollWidth - sc.clientWidth : sc.scrollHeight - sc.clientHeight; const delta = horizontal ? e.deltaX : e.deltaY; if ((pos <= 0 && delta < 0) || (pos >= max - 1 && delta > 0)) window.scrollBy(0, e.deltaY); }; sc.addEventListener("wheel", onWheel, { passive: true }); return () => sc.removeEventListener("wheel", onWheel); }, [container, springing, horizontal]); React.useEffect(() => { if (!animate || typeof requestAnimationFrame === "undefined") return; const readPos = () => { const sc = scrollerRef.current; if (container && sc) return horizontal ? sc.scrollLeft : sc.scrollTop; if (typeof window === "undefined") return 0; return horizontal ? window.scrollX : window.scrollY; }; let raf = 0; let last = 0; let lastPos = readPos(); let vel = 0; let skew = 0; let skewV = 0; let peak = 0; let tick = 0; let wasActive = false; let lastRead = -1; let lastPeak = -1; const frame = (now: number) => { let dt = last ? (now - last) / 1000 : 0.016; if (!(dt > 0) || dt > 0.05) dt = 0.016; last = now; const { maxSkew: mx, stiffness: k, damping: c, stretch: st, sensitivity: sens, smoothing: lam, meterScale: scale } = paramsRef.current; const pos = readPos(); const instant = (pos - lastPos) / dt; lastPos = pos; vel = damp(vel, instant, lam, dt); const target = clamp(vel * sens, -mx, mx); skewV += (k * (target - skew) - c * skewV) * dt; skew += skewV * dt; const active = Math.abs(skew) > SLEEP_SKEW || Math.abs(skewV) > SLEEP_SKEW || Math.abs(vel) > SLEEP_VEL; if (active || wasActive) { // One final identity write on the active → asleep edge so cards settle // exactly square instead of holding the last sub-threshold shear. const s = active ? skew : 0; const transform = horizontal ? `skewX(${s.toFixed(3)}deg) scaleX(${(1 + Math.abs(s) * st).toFixed(4)})` : `skewY(${s.toFixed(3)}deg) scaleY(${(1 + Math.abs(s) * st).toFixed(4)})`; for (const el of cardRefs.current) if (el) el.style.transform = transform; if (needleRef.current) { needleRef.current.style.transform = `scaleX(${clamp((active ? vel : 0) / scale, -1, 1).toFixed(3)})`; } wasActive = active; } peak = Math.max(peak * (1 - PEAK_DECAY * dt), Math.abs(vel)); if (++tick % READ_EVERY === 0) { const rv = Math.round(Math.abs(vel) / 10) * 10; if (readRef.current && rv !== lastRead) { lastRead = rv; readRef.current.textContent = `${group(rv)} px/s`; } const pk = Math.round(peak / 10) * 10; if (peakRef.current && pk !== lastPeak) { lastPeak = pk; peakRef.current.textContent = `peak ${group(pk)} px/s`; } } raf = requestAnimationFrame(frame); }; raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [animate, container, horizontal]); const meterBar = meter ? ( ) : null; const feed = (

{items.map((item, i) => (

{ cardRefs.current[i] = el; }} className={horizontal ? "shrink-0" : undefined} style={{ willChange: springing ? "transform" : undefined, transformOrigin: "center" }} > {item}

))}

); return (

{container ? (

{meterBar}

{feed}

) : ( <> {meterBar} {feed} )}

); } VelocitySkewFeed.displayName = "VelocitySkewFeed"; export default VelocitySkewFeed; 6c:["$","$L82",null,{"files":[{"path":"registry/scroll/velocity-skew-feed.tsx","content":"$83","type":"registry:component","target":"components/motiq/velocity-skew-feed.tsx"}],"className":"h-[70svh] min-h-80"}]