64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T2c27,"use client"; import { useState } from "react"; import type { CSSProperties, KeyboardEvent, PointerEvent } from "react"; export type HoverExpandPanel = { id: string; label: string; /** Optional photo. Without one the panel paints its own CSS art. */ image?: string; /** One line that resolves under the title once the panel is open. */ caption?: string; /** Optional CSS background value to use instead of the built-in art. */ art?: string; }; const ART = [ "radial-gradient(120% 75% at 12% 0%, #5b8cff 0%, transparent 58%), radial-gradient(90% 80% at 95% 100%, #b04bff 0%, transparent 60%), conic-gradient(from 200deg at 62% 38%, #070a1c, #1a2a73, #070a1c)", "radial-gradient(85% 60% at 50% 8%, #ffd9a8 0%, #ff7a45 28%, transparent 66%), linear-gradient(180deg, #2a0f1f 0%, #0c0710 100%)", "radial-gradient(100% 70% at 80% 12%, #4be3c4 0%, transparent 55%), radial-gradient(90% 70% at 10% 95%, #1673ff 0%, transparent 60%), linear-gradient(160deg, #06151a, #05070c)", "conic-gradient(from 20deg at 30% 70%, #1b1b22, #7a7f92 22%, #1b1b22 48%, #c8ccd8 70%, #1b1b22), linear-gradient(0deg, #0a0b0e, #0a0b0e)", "radial-gradient(70% 55% at 30% 20%, #ff8fc3 0%, transparent 62%), radial-gradient(80% 70% at 85% 85%, #ffb347 0%, transparent 58%), linear-gradient(200deg, #3a1054, #12081f)", "radial-gradient(90% 60% at 70% 0%, #c4f26b 0%, transparent 56%), radial-gradient(80% 70% at 5% 100%, #0f9d6c 0%, transparent 62%), linear-gradient(170deg, #0a1a10, #050a07)", ]; const DEFAULT_PANELS: HoverExpandPanel[] = [ { id: "01", label: "Aurora", caption: "Cold light over slow water" }, { id: "02", label: "Ember", caption: "A low sun, held a moment" }, { id: "03", label: "Tide", caption: "Teal edges, deep current" }, { id: "04", label: "Chrome", caption: "Brushed metal, one sweep" }, { id: "05", label: "Bloom", caption: "Soft petals of heat" }, ]; const EASE = "cubic-bezier(0.22,1.25,0.36,1)"; const DUR = "650ms"; export function HoverExpandPanels({ panels = DEFAULT_PANELS, expandRatio = 4, showLabels = true, vertical = false, restIndex = null, className = "", }: { panels?: HoverExpandPanel[]; expandRatio?: number; /** The title that rotates from the panel edge to horizontal as it opens. */ showLabels?: boolean; /** Stack the panels instead of laying them out in a row. */ vertical?: boolean; /** Zero-based panel that stays open while nothing is hovered or focused. */ restIndex?: number | null; /** Extra classes for the row. The default height is h-64; override with e.g. !h-96. */ className?: string; }) { const [active, setActive] = useState(null); const open = active ?? restIndex; const ratio = Math.min(Math.max(expandRatio, 1), 12); const move = (e: KeyboardEvent, i: number) => { const fwd = e.key === "ArrowRight" || e.key === "ArrowDown"; const back = e.key === "ArrowLeft" || e.key === "ArrowUp"; let to = -1; if (fwd) to = Math.min(i + 1, panels.length - 1); else if (back) to = Math.max(i - 1, 0); else if (e.key === "Home") to = 0; else if (e.key === "End") to = panels.length - 1; if (to < 0) return; e.preventDefault(); const sib = e.currentTarget.parentElement?.children[to]; if (sib instanceof HTMLElement) sib.focus(); }; const track = (e: PointerEvent) => { if (e.pointerType === "touch") return; const el = e.currentTarget; const r = el.getBoundingClientRect(); if (!r.width || !r.height) return; // Layout pixels: ancestors may be transform-scaled. const kx = el.offsetWidth / r.width; const ky = el.offsetHeight / r.height; const x = (e.clientX - r.left) * kx; const y = (e.clientY - r.top) * ky; el.style.setProperty("--hx", x.toFixed(1)); el.style.setProperty("--hy", y.toFixed(1)); el.style.setProperty("--nx", ((x / el.offsetWidth) * 2 - 1).toFixed(3)); el.style.setProperty("--ny", ((y / el.offsetHeight) * 2 - 1).toFixed(3)); }; return (

{ if (e.pointerType !== "touch") setActive(null); }} className={ "flex h-64 w-full gap-1.5 " + (vertical ? "flex-col " : "flex-row ") + className } > {panels.map((panel, i) => { const isOpen = open === i; const dim = open !== null && !isOpen; const art = panel.art ?? ART[i % ART.length] ?? ""; const titleTransform = vertical ? isOpen ? "translate(4px, 0px) scale(1.45)" : "translate(0px, 0px) scale(1)" : isOpen ? "translate(4px, -38px) rotate(0deg) scale(1.45)" : "translate(1em, 0px) rotate(-90deg) scale(1)"; const titleStyle: CSSProperties = { left: vertical ? (isOpen ? 20 : 44) : 17, bottom: vertical ? (isOpen ? 48 : "calc(50% - 0.5em)") : 18, transform: titleTransform, transformOrigin: "0 100%", transition: `transform ${DUR} ${EASE}, bottom ${DUR} ${EASE}, left ${DUR} ${EASE}, opacity 300ms ease`, opacity: showLabels ? 1 : 0, textShadow: "0 1px 12px rgba(0,0,0,0.45)", }; return ( ); })}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/hover-expand-panels.tsx","content":"$65","type":"registry:component","target":"components/viberdy/hover-expand-panels.tsx"}],"className":"h-[70svh] min-h-80"}]]}]