4e: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"] 4f: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"] 50:T17a6,export type GalleryCategory = "Motion" | "Light" | "Texture"; export type GalleryItem = { id: string; title: string; location: string; date: string; category: GalleryCategory; image: string; alt: string; summary: string; }; export const galleryFilters = ["All", "Motion", "Light", "Texture"] as const; export type GalleryFilter = (typeof galleryFilters)[number]; export const galleryItems: GalleryItem[] = [ { id: "hyperspeed", title: "Velocity study", location: "Motion lab", date: "Mar 2026", category: "Motion", image: "/images/visuals/hyperspeed.png", alt: "Neon light trails flowing through a dark space", summary: "Directional light trails for hero backgrounds — high contrast without stock-photo noise.", }, { id: "floating-lines", title: "Line field", location: "Motion lab", date: "Mar 2026", category: "Motion", image: "/images/visuals/floating-lines.png", alt: "Floating luminous lines on black", summary: "Weightless line fields that read as motion even in a still frame — ideal for product rails.", }, { id: "plasma", title: "Plasma drift", location: "Motion lab", date: "Feb 2026", category: "Motion", image: "/images/visuals/plasma.png", alt: "Plasma smoke on a dark field", summary: "Soft plasma drift for atmospheric sections — pairs with serif headlines and sparse copy.", }, { id: "light-rays", title: "Spotlight field", location: "Light series", date: "Feb 2026", category: "Light", image: "/images/visuals/light-rays.png", alt: "Soft white light rays on a black background", summary: "Spotlight cones for launch pages — editorial drama without gradient overload.", }, { id: "orb", title: "Orbital glow", location: "Light series", date: "Feb 2026", category: "Light", image: "/images/visuals/orb.png", alt: "Glowing cyan and violet ring on black", summary: "Orbital glow for feature callouts — a single focal ring that scales from card to hero.", }, { id: "dark-veil", title: "Veil bloom", location: "Light series", date: "Jan 2026", category: "Light", image: "/images/visuals/dark-veil.png", alt: "Purple light veil across darkness", summary: "Veil bloom for premium covers — depth without competing with foreground UI.", }, { id: "color-bends", title: "Color bend", location: "Light series", date: "Jan 2026", category: "Light", image: "/images/visuals/color-bends.png", alt: "Smooth color bends on a dark canvas", summary: "Smooth spectral bends for brand moments — reads modern without neon cliché.", }, { id: "silk", title: "Silk fold", location: "Texture study", date: "Jan 2026", category: "Texture", image: "/images/visuals/silk.png", alt: "Dark silk fabric with soft diagonal highlights", summary: "Silk folds for texture-led layouts — tactile contrast against flat UI chrome.", }, { id: "pixel-blast", title: "Pixel scatter", location: "Texture study", date: "Jan 2026", category: "Texture", image: "/images/visuals/pixel-blast.png", alt: "Glowing pixel clusters on a dark field", summary: "Pixel scatter for dev-tool aesthetics — precise glow clusters on a dark field.", }, { id: "ripple-grid", title: "Ripple grid", location: "Texture study", date: "Dec 2025", category: "Texture", image: "/images/visuals/ripple-grid.png", alt: "Distorted white grid on black", summary: "Ripple grid for motion marketing — distortion that hints at scroll without animation.", }, { id: "threads", title: "Thread weave", location: "Texture study", date: "Dec 2025", category: "Texture", image: "/images/visuals/threads.png", alt: "Fine luminous threads crossing a dark plane", summary: "Thread weave for fine-detail backgrounds — subtle structure behind dense copy.", }, { id: "beams", title: "Column light", location: "Motion lab", date: "Dec 2025", category: "Motion", image: "/images/visuals/beams.png", alt: "Vertical metallic light columns on black", summary: "Column light for architectural heroes — vertical rhythm that frames centered type.", }, ]; export const gallerySpotlightCopy = { eyebrow: "Featured visual", title: "One frame, many moods", description: "Cycle through motion studies — hover a thumbnail or let the reel advance.", } as const; export const galleryMarqueeCopy = { title: "Rolling visual library", description: "Abstract covers for heroes, blog posts, and product storytelling.", } as const; export const gallerySplitCopy = { eyebrow: "Visual library", title: "Index rail for motion covers", description: "Typography-first list with a live preview panel — hover a row to swap the featured visual without leaving the section.", } as const; export const galleryBentoCopy = { title: "Bento exhibition", description: "Asymmetric wall — one hero tile with supporting studies around it.", } as const; export const galleryColumnsCopy = { eyebrow: "Visual library", title: "Staggered columns", description: "Offset masonry columns inside a framed wall — directional blur reveal and hover focus per column.", } as const; export const galleryMetricsCopy = { title: "Library at a glance", description: "Stats beside a compact grid of motion-ready covers.", } as const; export const galleryFilmstripCopy = { title: "Scroll the lineup", description: "Horizontal filmstrip with scroll-snap focus — blur fades on the active frame.", } as const; export const galleryRevealCopy = { title: "Reveal wall", description: "Directional blur stagger as tiles enter — each visual earns its moment.", } as const; export const galleryFramedCopy = { eyebrow: "Exhibition", title: "Framed visual cycle", description: "Decor-framed panel with grid pattern, centered metadata, and labeled selector chips — pauses on hover.", } as const; export const galleryMetrics = [ { value: "12", label: "Visual sets" }, { value: "4K", label: "Ready covers" }, { value: "Free", label: "In public/" }, ] as const; 51:T21ed,"use client"; import Image from "next/image"; import { ArrowUpRightIcon } from "lucide-react"; import { AnimatePresence, motion, useInView, useReducedMotion } from "motion/react"; import { useRef, type ReactNode } from "react"; import { defaultSpring, motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import type { GalleryFilter, GalleryItem } from "./gallery-data"; import { galleryFilters } from "./gallery-data"; const spring = { type: "spring" as const, duration: 0.3, bounce: 0 }; export function useGalleryItemVariants() { const reduceMotion = useReducedMotion(); return reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 8 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring }, }; } export function GalleryStagger({ children, className, }: { children: ReactNode; className?: string; }) { const ref = useRef(null); const inView = useInView(ref, motionViewport); return ( {children} ); } export function GalleryStaggerItem({ children, className, }: { children: ReactNode; className?: string; }) { const itemVariants = useGalleryItemVariants(); return ( {children} ); } export function GallerySectionHeader({ eyebrow, title, description, className, align = "center", }: { eyebrow?: string; title: string; description?: string; className?: string; align?: "center" | "left"; }) { return ( {eyebrow ? (

{eyebrow}

) : null}

{title}

{description ? (

{description}

) : null} ); } export function GalleryImageFrame({ item, className, sizes = "(max-width: 768px) 100vw, 50vw", priority, hoverZoom = true, }: { item: GalleryItem; className?: string; sizes?: string; priority?: boolean; hoverZoom?: boolean; }) { return (

); } export function GalleryTileCaption({ item, className, compact, }: { item: GalleryItem; className?: string; compact?: boolean; }) { return (

{item.title}

{item.location} · {item.date}

); } export function GalleryCategoryBadge({ category, className, }: { category: GalleryItem["category"]; className?: string; }) { return ( {category} ); } export function GalleryTile({ item, className, compact, hoverZoom = true, }: { item: GalleryItem; className?: string; compact?: boolean; hoverZoom?: boolean; }) { return (

); } export function GalleryFilterChips({ active, onChange, className, }: { active: GalleryFilter; onChange: (filter: GalleryFilter) => void; className?: string; }) { return (

{galleryFilters.map((filter) => { const isActive = active === filter; return ( ); })}

); } export function GalleryThumbButton({ item, active, onSelect, className, }: { item: GalleryItem; active: boolean; onSelect: () => void; className?: string; }) { return ( ); } export function GalleryImageReveal({ item, className, }: { item: GalleryItem; className?: string; }) { return ( ); } export function GalleryCaptionListItem({ item, active, onSelect, }: { item: GalleryItem; active: boolean; onSelect: () => void; }) { return ( ); } export function GalleryPresenceStage({ item, className, }: { item: GalleryItem; className?: string; }) { return (

); } 52:T182b,"use client"; import Image from "next/image"; import { useEffect, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { DecorIcon } from "@/components/decor-icon"; import { GridPattern } from "@/components/ui/grid-pattern"; import { defaultSpring, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { galleryFramedCopy, galleryItems } from "../gallery-data"; import { SectionShell, ContentRail } from "@/components/layout-contract"; import { GalleryCategoryBadge, GalleryImageFrame, GallerySectionHeader, } from "../gallery-primitives"; const framedItems = galleryItems.slice(0, 6); function GalleryFramedChip({ item, active, onSelect, }: { item: (typeof framedItems)[number]; active: boolean; onSelect: () => void; }) { const reduceMotion = useReducedMotion(); return ( ); } export function GalleryFramedSection() { const reduceMotion = useReducedMotion(); const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); const activeItem = framedItems[active]!; useEffect(() => { if (reduceMotion || paused) return; const timer = setInterval(() => { setActive((current) => (current + 1) % framedItems.length); }, 5600); return () => clearInterval(timer); }, [reduceMotion, paused]); return ( setPaused(true)} onMouseLeave={() => setPaused(false)} transition={defaultSpring} viewport={motionViewport} whileInView={reduceMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }} >

{activeItem.category} · {activeItem.location} · {activeItem.date}

{activeItem.title}

{activeItem.summary}

{String(active + 1).padStart(2, "0")} / {String(framedItems.length).padStart(2, "0")}

{framedItems.map((item, index) => ( setActive(index)} /> ))}

); } 4d:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@nusaiba","registryDependencies":["@nusaiba/foundation","@nusaiba/gallery-visuals","@nusaiba/decor-icon","@magicui/grid-pattern"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/gallery/gallery-data.ts","content":"$50","type":"registry:lib"},{"path":"registry/blocks/gallery/gallery-primitives.tsx","content":"$51","type":"registry:lib"},{"path":"registry/blocks/gallery/10/gallery-section.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]