50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:Taaa,"use client"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; interface HorizontalScrollGalleryProps { children: React.ReactNode; className?: string; scroller?: React.RefObject; scrollHeight?: string; } export function HorizontalScrollGallery({ children, className, scroller, scrollHeight = "300%", }: HorizontalScrollGalleryProps) { const wrapperRef = useRef(null); const trackRef = useRef(null); const [stickyHeight, setStickyHeight] = useState("100vh"); useEffect(() => { const container = scroller?.current; if (!container) { setStickyHeight("100vh"); return; } const ro = new ResizeObserver((entries) => { const entry = entries[0]; if (entry) { setStickyHeight(`${entry.contentRect.height}px`); } }); ro.observe(container); setStickyHeight(`${container.clientHeight}px`); return () => ro.disconnect(); }, [scroller]); useEffect(() => { const wrapper = wrapperRef.current; const track = trackRef.current; if (!(wrapper && track)) { return; } const getContainer = () => scroller?.current ?? null; const update = () => { const container = getContainer(); const viewportTop = container ? container.getBoundingClientRect().top : 0; const viewportHeight = container ? container.clientHeight : window.innerHeight; const wrapperRect = wrapper.getBoundingClientRect(); const scrollableRange = wrapperRect.height - viewportHeight; if (scrollableRange <= 0) { return; } const scrolled = viewportTop - wrapperRect.top; const progress = Math.max(0, Math.min(1, scrolled / scrollableRange)); const trackWidth = track.scrollWidth; const maxOffset = trackWidth - (container?.clientWidth ?? window.innerWidth); if (maxOffset <= 0) { return; } track.style.transform = `translateX(-${progress * maxOffset}px)`; }; const scrollTarget = getContainer() ?? window; scrollTarget.addEventListener("scroll", update, { passive: true }); const ro = new ResizeObserver(update); ro.observe(track); update(); return () => { scrollTarget.removeEventListener("scroll", update); ro.disconnect(); }; }, [scroller]); return (

{children}

); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://pulkit.page/components/horizontal-scroll-gallery.json","proxyUrl":"https://shadcnregistry.com/r/pulkitxm/horizontal-scroll-gallery","itemId":"@pulkitxm/horizontal-scroll-gallery"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/new-york/horizontal-scroll-gallery/horizontal-scroll-gallery.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Horizontal Scroll Gallery

Installation

Files

components

Styles