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:T34cf,"use client"; // karaui.kamisama-v0.my.id/components/blocks/cta-section import { Check, Send } from "lucide-react"; import { motion, type Transition, useReducedMotion } from "motion/react"; import { type ElementType, type FormEvent, type ReactNode, useEffect, useId, useRef, useState, } from "react"; import { Button, ButtonLink, type ButtonState, StatefulButton, } from "@/components/motion/button"; import { TextReveal } from "@/components/motion/text-reveal"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface CtaAction { label: ReactNode; href?: string; onClick?: () => void; /** Trailing icon. */ icon?: ReactNode; } export interface CtaEmailCapture { /** Resolve to show success; reject to show the retry state. */ onSubscribe: (email: string) => Promise | void; placeholder?: string; buttonLabel?: ReactNode; successMessage?: ReactNode; /** Small print under the field, e.g. "Unsubscribe any time." */ note?: ReactNode; } export interface CtaSectionProps { /** "centered" stacks everything in one card; "split" puts copy left and a visual or email capture right. */ variant?: "centered" | "split"; eyebrow?: ReactNode; /** Revealed word by word when the section scrolls into view. */ headline: string | string[]; description?: ReactNode; primaryAction?: CtaAction; secondaryAction?: CtaAction; /** Short reassurance list ("No credit card", "Cancel any time"). */ checklist?: ReactNode[]; /** Email field with a stateful submit button. */ emailCapture?: CtaEmailCapture; /** Right column for `variant="split"` (mock UI, illustration). When omitted, the email capture takes that slot. */ visual?: ReactNode; /** Card decoration: rotating gradient beam on the border, a dotted field, or nothing. Default "beam". */ background?: "beam" | "dots" | "none"; /** Heading element for the headline. Default "h2". */ headingAs?: ElementType; className?: string; cardClassName?: string; } const WORD_STAGGER = 0.05; const ENTER: Transition = { duration: 0.5, ease: EASE_OUT }; // Beam sweep: decorative and slow so the border never pulls focus from the // copy; linear so the light travels at a constant speed around the card. const BEAM_TRANSITION: Transition = { duration: 8, ease: "linear", repeat: Number.POSITIVE_INFINITY, }; function isEmail(value: string) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); } function wordCount(text: string | string[]) { return (Array.isArray(text) ? text.join(" ") : text) .split(/\s+/) .filter(Boolean).length; } function ActionButton({ action, variant, }: { action: CtaAction; variant: "primary" | "secondary"; }) { const content = ( <> {action.label} {action.icon ?? null} ); return action.href ? ( {content} ) : ( ); } function EmailCapture({ capture, align, }: { capture: CtaEmailCapture; align: "center" | "left"; }) { const id = useId(); const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); const [error, setError] = useState(null); const timer = useRef(undefined); useEffect( () => () => { if (timer.current) window.clearTimeout(timer.current); }, [], ); const submit = async (event: FormEvent) => { event.preventDefault(); if (state === "loading" || state === "success") return; if (!isEmail(email)) { setError("Enter a valid email address."); return; } setError(null); setState("loading"); try { await capture.onSubscribe(email.trim()); setState("success"); } catch { setState("error"); setError("Something went wrong. Try again."); timer.current = window.setTimeout(() => setState("idle"), 2400); } }; const done = state === "success"; return (

Email address { setEmail(event.target.value); if (error && isEmail(event.target.value)) setError(null); }} placeholder={capture.placeholder ?? "you@company.com"} className={cn( "h-10 min-w-0 flex-1 rounded-full border bg-background px-4 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 disabled:opacity-60", error ? "border-destructive focus-visible:ring-destructive/30" : "border-border focus-visible:border-border-strong focus-visible:ring-ring/40", )} /> } className="shrink-0" > {capture.buttonLabel ?? "Get started"}

{error ?? (done ? (capture.successMessage ?? "Thanks! Check your inbox.") : (capture.note ?? ""))}

); } function CardBackground({ background, reduce, }: { background: "beam" | "dots" | "none"; reduce: boolean | null; }) { if (background === "none") return null; if (background === "dots") { return (

); } // Beam: an oversized conic gradient spins behind the card; the card body // sits 1px inside it, so only a moving sliver shows along the border. return ( ); } /** * Closing call-to-action band. `centered` puts a large headline, supporting * copy, two CTAs and an optional reassurance checklist inside one card; * `split` sets the copy beside a visual or an email capture. The headline * reveals word by word on view and the rest follows. The card can carry a * rotating gradient beam along its border or a soft dotted field. Layout * reads the section's own container width. */ export function CtaSection({ variant = "centered", eyebrow, headline, description, primaryAction, secondaryAction, checklist, emailCapture, visual, background = "beam", headingAs = "h2", className, cardClassName, }: CtaSectionProps) { const reduce = useReducedMotion(); const centered = variant === "centered"; const align = centered ? "center" : "left"; const after = Math.min(1, 0.15 + wordCount(headline) * WORD_STAGGER); const enter = (delay: number) => ({ initial: reduce ? { opacity: 0 } : { opacity: 0, y: 12 }, whileInView: reduce ? { opacity: 1 } : { opacity: 1, y: 0 }, viewport: { once: true, amount: 0.4 }, transition: { ...ENTER, delay }, }); // In split mode the email capture fills the right column unless a visual // claims it; then it moves under the copy. const captureInAside = !centered && !visual && Boolean(emailCapture); const copy = (

{eyebrow ? ( {eyebrow} ) : null} {description ? ( {description} ) : null} {primaryAction || secondaryAction ? ( {primaryAction ? ( ) : null} {secondaryAction ? ( ) : null} ) : null} {emailCapture && !captureInAside ? ( ) : null} {checklist?.length ? ( {checklist.map((item, index) => ( {item} ))} ) : null}

); return (

{/* Soft top glow so the card reads as lit from the beam side. */}

{copy} {!centered && (visual || captureInAside) ? ( {visual ?? (emailCapture ? (

) : null)} ) : null}

); } 51:T129d,"use client"; import { motion, type Transition, useInView, useReducedMotion } from "motion/react"; import { useRef, type ElementType, type ReactNode } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; type SplitMode = "word" | "char"; export interface TextRevealProps { text: string | string[]; as?: ElementType; className?: string; split?: SplitMode; stagger?: number; delay?: number; blur?: number; yOffset?: string | number; spring?: { stiffness?: number; damping?: number; mass?: number }; once?: boolean; whileInView?: boolean; children?: ReactNode; } const DEFAULT_SPRING = { stiffness: 140, damping: 26, mass: 1.2 }; type WordGroup = { text: string; trailing: string }; /** * One tokenizer for both modes: a line becomes the words it is made of, each * carrying the whitespace that follows it. Word mode animates a group at a * time, char mode the characters inside one — so the two can't drift apart on * what counts as a word or where a space belongs. Runs of whitespace and tabs * survive as their own group rather than collapsing. */ function toWordGroups(line: string): WordGroup[] { const chunks = line.match(/\S+\s*|\s+/g) ?? []; return chunks.map((chunk) => { const text = chunk.replace(/\s+$/, ""); return { text, trailing: chunk.slice(text.length) }; }); } export function TextReveal({ text, as: Comp = "span", className, split = "word", stagger = 0.09, delay = 0, blur = 12, yOffset = "40%", spring, once = true, whileInView = false, children, }: TextRevealProps) { const ref = useRef(null); const inView = useInView(ref, { once, amount: 0.4 }); const reduce = useReducedMotion(); const shouldAnimate = whileInView ? inView : true; const lines = Array.isArray(text) ? text : [text]; const s = { ...DEFAULT_SPRING, ...spring }; let unitIndex = 0; const lineCounts = new Map(); return ( {lines.map((line) => { const lineCount = lineCounts.get(line) ?? 0; lineCounts.set(line, lineCount + 1); const lineKey = `${line}-${lineCount}`; const unitCounts = new Map(); const renderUnit = (unit: string) => { const d = delay + unitIndex * stagger; unitIndex += 1; const unitCount = unitCounts.get(unit) ?? 0; unitCounts.set(unit, unitCount + 1); const unitKey = `${unit}-${unitCount}`; const initial = reduce ? { opacity: 0 } : { y: yOffset, opacity: 0, filter: `blur(${blur}px)` }; const animate = shouldAnimate ? reduce ? { opacity: 1 } : { y: 0, opacity: 1, filter: "blur(0px)" } : initial; const transition: Transition = reduce ? { opacity: { duration: 0.25, ease: EASE_OUT, delay: d * 0.3 } } : { y: { type: "spring" as const, ...s, delay: d }, opacity: { duration: 0.7, ease: EASE_OUT, delay: d }, filter: { duration: 0.9, ease: EASE_OUT, delay: d }, }; return ( {unit} ); }; const groups = toWordGroups(line); const groupCounts = new Map(); return ( {groups.map((group) => { const whole = group.text + group.trailing; // Characters animate one at a time, but each word (plus the // space that follows it) sits in its own inline-block so a long // line wraps between words instead of mid-word. if (split !== "char") return renderUnit(whole); const groupCount = groupCounts.get(whole) ?? 0; groupCounts.set(whole, groupCount + 1); return ( {Array.from(whole).map((char) => renderUnit(char))} ); })} ); })} {children} ); } 52:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 53:T149a,"use client"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, } from "motion/react"; import { forwardRef, type PointerEvent, type ReactNode, useCallback, useRef, useState, } from "react"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline"; export type ButtonSize = "sm" | "md" | "lg" | "icon"; export interface ButtonProps extends Omit< HTMLMotionProps<"button">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; /** Spawn a Material-style ripple from the press point. Off by default. */ ripple?: boolean; children?: ReactNode; } export interface ButtonLinkProps extends Omit< HTMLMotionProps<"a">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; children?: ReactNode; } type Ripple = { id: number; x: number; y: number; size: number }; const VARIANT_CLASS: Record = { primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", ghost: "text-muted-foreground hover:text-foreground hover:bg-primary/5", outline: "border border-border bg-transparent text-foreground hover:bg-primary/5", }; const SIZE_CLASS: Record = { sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full", lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg", }; export const Button = forwardRef( function Button( { variant = "primary", size = "md", pressScale = 0.93, ripple = false, className, children, onPointerDown, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); const [ripples, setRipples] = useState([]); const nextId = useRef(0); const handlePointerDown = useCallback( (event: PointerEvent) => { if (ripple && !reduce) { const rect = event.currentTarget.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; const id = nextId.current++; setRipples((prev) => [ ...prev, { id, x: event.clientX - rect.left, y: event.clientY - rect.top, size, }, ]); } onPointerDown?.(event); }, [ripple, reduce, onPointerDown], ); return ( {ripple && !reduce ? ( {ripples.map((r) => ( setRipples((prev) => prev.filter((x) => x.id !== r.id)) } /> ))} ) : null} {children} ); }, ); export const ButtonLink = forwardRef( function ButtonLink( { variant = "primary", size = "md", pressScale = 0.93, className, children, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); return ( {children} ); }, ); 54:T1b47,"use client"; import { Check, Loader2, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react"; import { forwardRef, type ReactNode, useLayoutEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_SWAP } from "@/lib/ease"; import { Button, type ButtonProps } from "./base"; export type ButtonState = "idle" | "loading" | "success" | "error"; export interface StatefulButtonProps extends Omit { state?: ButtonState; children: ReactNode; loadingText?: ReactNode; successText?: ReactNode; errorText?: ReactNode; icon?: ReactNode; } const CASCADE_STAGGER = 0.025; const ROLL_BLUR = "blur(6px)"; const CASCADE_LETTER_VARIANTS: Variants = { initial: { opacity: 0, y: "105%", filter: ROLL_BLUR }, animate: (delay: number = 0) => ({ opacity: 1, y: "0%", filter: "blur(0px)", transition: { ...SPRING_SWAP, delay }, }), exit: (delay: number = 0) => ({ opacity: 0, y: "-105%", filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 }, }), }; const ICON_VARIANTS: Variants = { // Width collapses too, so the icon adds/removes its own space smoothly // instead of popping the row width in a single frame. initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR }, animate: { opacity: 1, width: "1.5rem", scale: 1, filter: "blur(0px)", transition: SPRING_SWAP, }, exit: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT }, }, }; function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) { const reduce = useReducedMotion(); return ( {children} ); } function TextSlot({ value, children, }: { value: string; children: ReactNode; }) { const reduce = useReducedMotion(); const measureRef = useRef(null); const [width, setWidth] = useState(); const label = typeof children === "string" ? children : null; const cascade = label !== null && !reduce; // Measure strings with the same per-letter layout as the cascade. Measuring // the whole string preserves kerning, which can make it narrower than the // inline-block letters and clip the final glyph during the width animation. useLayoutEffect(() => { const nextWidth = measureRef.current?.offsetWidth; if (!nextWidth) return; setWidth((current) => (current === nextWidth ? current : nextWidth)); }); return ( {cascade ? label.split("").map((char, index) => ( {char} )) : children} {cascade ? ( <> {label} {label.split("").map((char, index) => ( {char} ))} ) : ( {children} )} ); } export const StatefulButton = forwardRef(function StatefulButton( { state = "idle", children, loadingText = "Loading", successText = "Done", errorText = "Try again", icon, disabled, ...rest }, ref, ) { const isBusy = state === "loading"; const stateText = state === "loading" ? loadingText : state === "success" ? successText : state === "error" ? errorText : children; const textKey = typeof stateText === "string" ? `${state}-${stateText}` : state; return ( ); }); 55:T5a6,"use client"; import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react"; import { useRef, type ReactNode } from "react"; import { SPRING_MOUSE } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export interface MagneticProps { children: ReactNode; strength?: number; className?: string; } export function Magnetic({ children, strength = 0.35, className }: MagneticProps) { const ref = useRef(null); const reduce = useReducedMotion(); const canHover = useHoverCapable(); // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion. const enabled = !reduce && canHover; const x = useMotionValue(0); const y = useMotionValue(0); const sx = useSpring(x, SPRING_MOUSE); const sy = useSpring(y, SPRING_MOUSE); const onMove = (e: React.MouseEvent) => { const el = ref.current; if (!el || !enabled) return; const rect = el.getBoundingClientRect(); x.set((e.clientX - rect.left - rect.width / 2) * strength); y.set((e.clientY - rect.top - rect.height / 2) * strength); }; const onLeave = () => { x.set(0); y.set(0); }; return ( {children} ); } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/cta-section.tsx","content":"$50","type":"registry:component","target":"@components/motion/cta-section.tsx"},{"path":"components/motion/button/index.tsx","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n","type":"registry:component","target":"@components/motion/button/index.tsx"},{"path":"components/motion/text-reveal.tsx","content":"$51","type":"registry:component","target":"@components/motion/text-reveal.tsx"},{"path":"lib/ease.ts","content":"$52","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/button/base.tsx","content":"$53","type":"registry:component","target":"@components/motion/button/base.tsx"},{"path":"components/motion/button/magnetic.tsx","content":"\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Magnetic } from \"../magnetic\";\nimport { Button, type ButtonProps } from \"./base\";\n\nexport interface MagneticButtonProps extends ButtonProps {\n /** Magnetic pull strength. Default 0.25. */\n strength?: number;\n /** Class applied to the magnetic wrapper. */\n magneticClassName?: string;\n}\n\nexport const MagneticButton = forwardRef(function MagneticButton(\n { strength = 0.25, magneticClassName, children, ...rest },\n ref,\n) {\n return (\n \n \n \n );\n});\n","type":"registry:component","target":"@components/motion/button/magnetic.tsx"},{"path":"components/motion/button/stateful.tsx","content":"$54","type":"registry:component","target":"@components/motion/button/stateful.tsx"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"components/motion/magnetic.tsx","content":"$55","type":"registry:component","target":"@components/motion/magnetic.tsx"}],"className":"h-[70svh] min-h-80"}]]}]