51:I[707087,["/_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"],"RegistryDependencies"] 52: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:T1a9c,"use client"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "framer-motion"; import ReactLenis from "lenis/react"; import { type CSSProperties, useEffect, useMemo, useRef, useState, } from "react"; export interface ScrollTiltedGridImage { src: string; alt: string; } export interface ScrollTiltedGridProps { images: readonly ScrollTiltedGridImage[]; loop?: boolean; initialCycles?: number; maxCycles?: number; smoothScroll?: boolean; aspectRatio?: string; perspective?: number; maxTilt?: number; maxBlur?: number; rounded?: string; sectionPadding?: string; className?: string; } type TileVariables = CSSProperties & { "--tile-blur": string; "--tile-brightness": number; "--tile-saturation": number; "--tile-transform": string; "--tile-image-scale": number; }; function clamp(value: number, minimum = 0, maximum = 1) { return Math.min(maximum, Math.max(minimum, value)); } function GalleryTile({ image, index, aspectRatio, perspective, maxTilt, maxBlur, rounded, reduceMotion, }: { image: ScrollTiltedGridImage; index: number; aspectRatio: string; perspective: number; maxTilt: number; maxBlur: number; rounded: string; reduceMotion: boolean; }) { const tileRef = useRef(null); const side = index % 2 === 0 ? -1 : 1; useEffect(() => { const tile = tileRef.current; if (!tile || reduceMotion) return; let frame = 0; const update = () => { frame = 0; const rect = tile.getBoundingClientRect(); const travel = window.innerHeight + rect.height; const position = clamp((window.innerHeight - rect.top) / travel); const distance = Math.abs(position - 0.5) * 2; const signed = (position - 0.5) * 2; const eased = distance * distance * (3 - 2 * distance); const x = side * eased * 18; const y = -signed * eased * 24; const tilt = -signed * maxTilt; const roll = side * signed * 3; const skew = -side * signed * 7; tile.style.setProperty("--tile-blur", `${eased * maxBlur}px`); tile.style.setProperty("--tile-brightness", String(1 - eased * 0.5)); tile.style.setProperty("--tile-saturation", String(1 - eased * 0.5)); tile.style.setProperty("--tile-image-scale", String(1.03 + eased * 0.15)); tile.style.setProperty( "--tile-transform", `translate3d(${x}%, ${y}%, ${eased * 180}px) rotateX(${tilt}deg) rotateZ(${roll}deg) skewX(${skew}deg)`, ); }; const schedule = () => { if (!frame) frame = window.requestAnimationFrame(update); }; update(); const resizeObserver = new ResizeObserver(schedule); resizeObserver.observe(tile); window.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule); return () => { resizeObserver.disconnect(); window.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); if (frame) window.cancelAnimationFrame(frame); }; }, [maxBlur, maxTilt, reduceMotion, side]); const variables: TileVariables = { aspectRatio, borderRadius: rounded, perspective, "--tile-blur": "0px", "--tile-brightness": 1, "--tile-saturation": 1, "--tile-transform": "translate3d(0, 0, 0)", "--tile-image-scale": 1.03, }; return (

); } export function ScrollTiltedGrid({ images, loop = false, initialCycles = 2, maxCycles = 4, smoothScroll = true, aspectRatio = "4 / 5", perspective = 1000, maxTilt = 62, maxBlur = 7, rounded = "0.25rem", sectionPadding = "18vh", className, }: ScrollTiltedGridProps) { const reduceMotion = useReducedMotion() ?? false; const cycleLimit = Math.max(1, maxCycles); const [cycleCount, setCycleCount] = useState(() => clamp(initialCycles, 1, cycleLimit), ); const loadMoreRef = useRef(null); useEffect(() => { const marker = loadMoreRef.current; if (!loop || !marker) return; const observer = new IntersectionObserver( ([entry]) => { if (entry?.isIntersecting) { setCycleCount((count) => Math.min(cycleLimit, count + 1)); } }, { rootMargin: "1200px 0px" }, ); observer.observe(marker); return () => observer.disconnect(); }, [cycleLimit, loop]); const tiles = useMemo( () => Array.from({ length: loop ? cycleCount : 1 }, (_, cycle) => images.map((image, index) => ({ cycle, image, index })), ).flat(), [cycleCount, images, loop], ); const gallery = (

{tiles.map(({ cycle, image, index }) => ( ))}

{loop && cycleCount < cycleLimit ? (

) : null}

); return smoothScroll && !reduceMotion ? ( {gallery} ) : ( gallery ); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lenis",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lenis","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lenis"}]]}]}]]}],["$","$L51",null,{"namespace":"@componentry","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/scroll-tilted-grid.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]