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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1ddf,"use client"; import { type MotionValue, motion, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; export type InteractiveGridHeroEffects = { /** Cell opacity at the strongest point of the pointer response. */ activeOpacity?: number; /** Maximum corner radius, in pixels. */ cornerRadius?: number; /** Maximum inset applied to an active cell, as a percentage. */ inset?: number; /** Cell opacity outside the pointer response. */ restingOpacity?: number; }; export type InteractiveGridHeroSpring = { bounce?: number; damping?: number; mass?: number; stiffness?: number; visualDuration?: number; }; export type InteractiveGridHeroProps = { /** Approximate resting size of each square, in pixels. */ cellSize?: number; className?: string; effects?: InteractiveGridHeroEffects; /** Space between cells, in pixels. */ gap?: number; interactive?: boolean; /** Radius of the cursor response, measured in grid cells. */ proximity?: number; spring?: InteractiveGridHeroSpring; }; type GridMetrics = { cellSize: number; columns: number; rows: number; }; type GridCellProps = { effects: Required; centerX: number; centerY: number; pointerActive: MotionValue; pointerX: MotionValue; pointerY: MotionValue; radius: number; }; const DEFAULT_CELL_SIZE = 72; const DEFAULT_PROXIMITY = 4.35; const DEFAULT_GAP = 4; const DEFAULT_EFFECTS = { activeOpacity: 1, cornerRadius: 20, inset: 5.5, restingOpacity: 0.72, } satisfies Required; const DEFAULT_SPRING = { damping: 38, mass: 1, stiffness: 520, } satisfies Required>; const INITIAL_METRICS: GridMetrics = { cellSize: DEFAULT_CELL_SIZE, columns: 12, rows: 10, }; function getGridMetrics( width: number, height: number, targetCellSize: number, gap: number, ): GridMetrics { const safeWidth = Math.max(1, width); const safeHeight = Math.max(1, height); const columns = Math.max(1, Math.ceil((safeWidth + gap) / (targetCellSize + gap))); const cellSize = Math.max(1, (safeWidth - gap * (columns - 1)) / columns); const rows = Math.max(1, Math.ceil((safeHeight + gap) / (cellSize + gap))); return { cellSize, columns, rows }; } function smoothstep(value: number) { return value * value * (3 - 2 * value); } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function resolveSpring(spring: InteractiveGridHeroSpring | undefined) { if (spring?.visualDuration !== undefined || spring?.bounce !== undefined) { return { bounce: spring.bounce ?? 0, visualDuration: spring.visualDuration ?? 0.3, }; } return { damping: spring?.damping ?? DEFAULT_SPRING.damping, mass: spring?.mass ?? DEFAULT_SPRING.mass, stiffness: spring?.stiffness ?? DEFAULT_SPRING.stiffness, }; } function GridCell({ centerX, centerY, effects, pointerActive, pointerX, pointerY, radius, }: GridCellProps) { const influence = useTransform(() => { const distance = Math.hypot(pointerX.get() - centerX, pointerY.get() - centerY); const proximity = Math.max(0, 1 - distance / radius); return smoothstep(proximity) * pointerActive.get(); }); const clipPath = useTransform( influence, (value) => `inset(${value * effects.inset}% round ${value * effects.cornerRadius}px)`, ); const opacity = useTransform(influence, [0, 1], [effects.restingOpacity, effects.activeOpacity]); return ( ); } export function InteractiveGridHero({ cellSize: targetCellSize = DEFAULT_CELL_SIZE, className, effects, gap = DEFAULT_GAP, interactive = true, proximity = DEFAULT_PROXIMITY, spring, }: InteractiveGridHeroProps) { const containerRef = React.useRef(null); const pointerX = useMotionValue(0); const pointerY = useMotionValue(0); const pointerActive = useMotionValue(0); const smoothPointerActive = useSpring(pointerActive, resolveSpring(spring)); const shouldReduceMotion = useReducedMotion(); const activeValue = shouldReduceMotion ? pointerActive : smoothPointerActive; const [metrics, setMetrics] = React.useState(INITIAL_METRICS); const resolvedEffects = { activeOpacity: clamp(effects?.activeOpacity ?? DEFAULT_EFFECTS.activeOpacity, 0, 1), cornerRadius: Math.max(0, effects?.cornerRadius ?? DEFAULT_EFFECTS.cornerRadius), inset: Math.max(0, effects?.inset ?? DEFAULT_EFFECTS.inset), restingOpacity: clamp(effects?.restingOpacity ?? DEFAULT_EFFECTS.restingOpacity, 0, 1), }; const resolvedGap = Math.max(0, gap); React.useEffect(() => { const container = containerRef.current; if (!container) { return; } const updateMetrics = () => { const rect = container.getBoundingClientRect(); setMetrics( getGridMetrics(rect.width, rect.height, Math.max(32, targetCellSize), resolvedGap), ); }; const resizeObserver = new ResizeObserver(updateMetrics); resizeObserver.observe(container); updateMetrics(); return () => resizeObserver.disconnect(); }, [resolvedGap, targetCellSize]); React.useEffect(() => { if (!interactive) { pointerActive.set(0); } }, [interactive, pointerActive]); const handlePointerMove = React.useCallback( (event: React.PointerEvent) => { if ( !interactive || event.pointerType !== "mouse" || !window.matchMedia("(hover: hover) and (pointer: fine)").matches ) { return; } const rect = event.currentTarget.getBoundingClientRect(); pointerX.set(event.clientX - rect.left); pointerY.set(event.clientY - rect.top); pointerActive.set(1); }, [interactive, pointerActive, pointerX, pointerY], ); const handlePointerLeave = React.useCallback(() => { pointerActive.set(0); }, [pointerActive]); const cellCount = metrics.columns * metrics.rows; const cells = React.useMemo( () => Array.from({ length: cellCount }, (_, index) => ({ centerX: ((index % metrics.columns) + 0.5) * metrics.cellSize, centerY: (Math.floor(index / metrics.columns) + 0.5) * metrics.cellSize, id: `${Math.floor(index / metrics.columns)}-${index % metrics.columns}`, })), [cellCount, metrics.cellSize, metrics.columns], ); const responseRadius = metrics.cellSize * Math.max(1, proximity); return ( ); } 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":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ui-components/interactive-grid-hero.tsx","content":"$50","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]