2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T1d83,"use client"; import { useEffect, useRef, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; /** Neutral sheen on the achromatic palette. Color arrives through a pattern, an image, or a gradient you pass in. */ const SHEEN = "linear-gradient(115deg, color-mix(in oklch, var(--foreground) 8%, transparent), transparent 42%, color-mix(in oklch, var(--foreground) 14%, transparent) 58%, transparent)"; const PATTERNS = { dots: "radial-gradient(color-mix(in oklch, var(--foreground) 22%, transparent) 1px, transparent 1.4px) 0 0 / 10px 10px", lines: "repeating-linear-gradient(135deg, color-mix(in oklch, var(--foreground) 14%, transparent) 0 1px, transparent 1px 8px)", grid: "linear-gradient(color-mix(in oklch, var(--foreground) 12%, transparent) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, color-mix(in oklch, var(--foreground) 12%, transparent) 1px, transparent 1px) 0 0 / 14px 14px", } as const; const SURFACE = { card: "bg-card text-card-foreground", inverse: "bg-foreground text-background", none: "bg-transparent", } as const; export type HoloCardProps = Omit, "children"> & { /** Full-bleed image under the foil. */ image?: string; imageAlt?: string; /** Any CSS gradient for the foil. Defaults to a neutral sheen. */ gradient?: string; pattern?: keyof typeof PATTERNS; surface?: keyof typeof SURFACE; /** No tilt and no pointer tracking: only a slow idle sheen. */ static?: boolean; /** Maximum tilt in degrees. */ tilt?: number; glare?: boolean; shape?: "portrait" | "credit"; children?: React.ReactNode; }; const SHAPE = { portrait: "aspect-[5/7] w-64", credit: "aspect-[1.586] w-[22rem] max-w-full", } as const; export function HoloCard({ image, imageAlt = "", gradient = SHEEN, pattern, surface = "card", static: isStatic = false, tilt = 14, glare = true, shape = "portrait", className, children, ...props }: HoloCardProps) { const root = useRef(null); const sheen = useRef(null); const frame = useRef(0); const rect = useRef(null); // Idle sheen for static cards and for touch devices, where there is no hover to follow. useEffect(() => { const el = sheen.current; if (!el || typeof el.animate !== "function") return; const idle = isStatic || window.matchMedia("(pointer: coarse)").matches; if (!idle || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const anim = el.animate( [{ transform: "translateX(0%)" }, { transform: "translateX(350%)" }], { duration: 4800, iterations: Infinity, direction: "alternate", easing: "cubic-bezier(0.4, 0, 0.6, 1)" }, ); return () => anim.cancel(); }, [isStatic]); useEffect(() => () => cancelAnimationFrame(frame.current), []); const write = (x: number, y: number) => { const el = root.current; if (!el) return; const dist = Math.min(Math.hypot(x - 0.5, y - 0.5) * 2, 1); el.style.setProperty("--rx", `${((0.5 - y) * 2 * tilt).toFixed(2)}deg`); el.style.setProperty("--ry", `${((x - 0.5) * 2 * tilt).toFixed(2)}deg`); el.style.setProperty("--px", `${(x * 100).toFixed(1)}%`); el.style.setProperty("--py", `${(y * 100).toFixed(1)}%`); el.style.setProperty("--bx", `${(x * 100).toFixed(1)}`); el.style.setProperty("--by", `${(y * 100).toFixed(1)}`); el.style.setProperty("--o", `${(0.5 + dist * 0.5).toFixed(2)}`); }; const onPointerEnter = (e: React.PointerEvent) => { if (isStatic || e.pointerType === "touch") return; rect.current = e.currentTarget.getBoundingClientRect(); e.currentTarget.dataset.active = ""; }; const onPointerMove = (e: React.PointerEvent) => { if (isStatic || e.pointerType === "touch" || !rect.current) return; const r = rect.current; const x = Math.min(Math.max((e.clientX - r.left) / r.width, 0), 1); const y = Math.min(Math.max((e.clientY - r.top) / r.height, 0), 1); cancelAnimationFrame(frame.current); frame.current = requestAnimationFrame(() => write(x, y)); }; const onPointerLeave = (e: React.PointerEvent) => { cancelAnimationFrame(frame.current); delete e.currentTarget.dataset.active; rect.current = null; const el = root.current; if (!el) return; for (const v of ["--rx", "--ry", "--px", "--py", "--bx", "--by", "--o"]) el.style.removeProperty(v); }; return (

{image ? ( // eslint-disable-next-line @next/next/no-img-element {imageAlt}

) : null} {pattern ?

: null}

{glare ? (

) : null}

{children}

); } /** Content plane lifted off the foil so it parallaxes against it while tilting. */ export function HoloCardContent({ className, style, ...props }: ComponentProps<"div">) { return (

); } 31:Ta91,"use client"; import { IconWifi } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { HoloCard, HoloCardContent, type HoloCardProps } from "./holo-card"; export type MembershipCardData = { program: string; tier: string; name: string; number: string; since: string; perks: string }; export type CreditCardData = { issuer: string; product: string; name: string; number: string; expires: string; last4: string }; /** Membership pass: always dark, like a physical card, with a lines pattern. */ export function MembershipCard({ data, ...props }: { data: MembershipCardData } & Omit) { return (

{data.program}

Since {data.since}

{data.tier}

{data.name}

{data.number}

); } /** Payment card: credit-card ratio, dot pattern, chip and contactless mark. Fictitious number. */ export function CreditCard({ data, ...props }: { data: CreditCardData } & Omit) { return (

{data.issuer}

{data.number}

{data.name}

Exp {data.expires}

); } 32:T90c,"use client"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { creditCard, mediaItems, membership } from "../_fixtures-c"; import { HoloCard, HoloCardContent } from "./holo-card"; import { CreditCard, MembershipCard } from "./holo-card-examples"; function Label({ title, hint }: { title: string; hint: string }) { return (

{title}

{hint}

); } export function HoloCardDemo() { return (

); } export default HoloCardDemo; 33:T5a5,import type { BlockMeta } from "../../../lib/block-meta"; export const holoCardMeta: BlockMeta = { slug: "holo-card", title: "Holo card", description: "Pointer-tracked 3D tilt with a holographic foil and glare, driven by CSS custom properties from one pointermove handler. Static mode, membership and credit card compositions.", group: "data", kobraDeps: [], files: ["blocks/data/holo-card/holo-card.tsx", "blocks/data/holo-card/holo-card-examples.tsx"], props: [ { name: "image / imageAlt", type: "string", description: "Full-bleed image under the foil." }, { name: "gradient", type: "string", default: "rainbow from status tokens", description: "Any CSS gradient for the foil." }, { name: "pattern", type: "'dots' | 'lines' | 'grid'", description: "Texture under the foil." }, { name: "surface", type: "'card' | 'inverse' | 'none'", default: "'card'", description: "Base fill." }, { name: "static", type: "boolean", default: "false", description: "No tilt or pointer tracking; a slow idle sheen instead." }, { name: "tilt", type: "number", default: "14", description: "Maximum tilt in degrees." }, { name: "glare", type: "boolean", default: "true", description: "Specular highlight following the pointer." }, { name: "shape", type: "'portrait' | 'credit'", default: "'portrait'", description: "Card ratio and width." }, ], tags: ["card", "3d", "pointer", "membership"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Holo card"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Holo card"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Pointer-tracked 3D tilt with a holographic foil and glare, driven by CSS custom properties from one pointermove handler. Static mode, membership and credit card compositions."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"holo-card","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/holo-card/holo-card.tsx","code":"$30"},{"path":"blocks/data/holo-card/holo-card-examples.tsx","code":"$31"},{"path":"blocks/data/holo-card/demo.tsx","code":"$32"},{"path":"blocks/data/holo-card/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]