65:I[8513,["/_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"],"ScrollBar"] 70: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"] 4f:"#ffffff" 50:["$","div","card-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0b0e15"}]]}] 51:["$","div","muted-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","muted-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#5a636b"}]]}] 52:["$","div","border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(0,0,0,0.08)"}}],["$","p",null,{"children":"rgba(0,0,0,0.08)"}]]}]}]]}] 53:["$","div","surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafc"}]]}] 54:["$","div","surface-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fcfdfe"}]]}] 55:["$","div","panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 56:["$","div","card-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 57:["$","div","card-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(0, 0, 0, 0.22)"}}],["$","p",null,{"children":"rgba(0, 0, 0, 0.22)"}]]}]}]]}] 58:["$","div","chart-1",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-1",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2b7fd6"}]]}] 59:["$","div","chart-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2f9e70"}]]}] 5a:["$","div","chart-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#a85f3b"}]]}] 5b:["$","div","chart-4",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-4",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9a9d00"}]]}] 5c:["$","div","chart-5",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-5",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9c5ba6"}]]}] 5d:["$","div","chart-up",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-up",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#1a9e6a"}]]}] 5e:["$","div","chart-down",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-down",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d0433f"}]]}] 5f:["$","div","chart-amber",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","chart-amber",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b8862f"}]]}] 60:["$","$L65",null,{"orientation":"horizontal"}] 61:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L4e",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","background",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","background",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#000000"}]]}],["$","div","foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","card",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080b12"}]]}],["$","div","card-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","muted-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","muted-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#868f97"}]]}],["$","div","border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255,255,255,0.05)"}}],["$","p",null,{"children":"rgba(255,255,255,0.05)"}]]}]}]]}],["$","div","surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0a0e16"}]]}],["$","div","surface-soft",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","surface-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#070a12"}]]}],["$","div","panel",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0e121b"}]]}],["$","div","card-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#10141e"}]]}],["$","div","card-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","card-shadow",":"]}]}],"$L66"]}],"$L67","$L68","$L69","$L6a","$L6b","$L6c","$L6d","$L6e"]}],"$L6f"]}]}]]}] 62:null 63:null 71:T1b1b,"use client" import { useEffect, useRef } from "react" import { useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" const ACCENT: [number, number, number] = [90, 170, 255] const accentRgba = (a: number) => `rgba(${ACCENT[0]},${ACCENT[1]},${ACCENT[2]},${a})` type Particle = { x: number; y: number; vx: number; vy: number; born: number; size: number } const LIFE_MS = 600 const GRAVITY_R = 140 const SPAWN_GAP_MS = 28 /** * A CTA stage where the cursor leaves a restrained particle trail (1–2px * accent dots with a soft additive glow, 0.6s decay). Near the pill the dots * gravitate toward it and feed its border glow — signal language, no glitter. * Honors reduced motion by rendering a static pill. */ export function MouseTrailCta({ label = "Start your free trial", href = "#", className, onClick, }: { label?: string href?: string className?: string onClick?: () => void }) { const rootRef = useRef(null) const canvasRef = useRef(null) const pillRef = useRef(null) const ringRef = useRef(null) const reduced = useReducedMotion() ?? false useEffect(() => { if (reduced) return const root = rootRef.current const canvas = canvasRef.current const pill = pillRef.current const ring = ringRef.current if (!root || !canvas || !pill) return const ctx = canvas.getContext("2d") if (!ctx) return let raf = 0 let running = false let onScreen = true let lastSpawn = 0 let charge = 0 // 0..1 — particles arriving at the pill feed this const particles: Particle[] = [] const dpr = Math.min(window.devicePixelRatio || 1, 2) const resize = () => { const r = root.getBoundingClientRect() canvas.width = Math.max(1, Math.round(r.width * dpr)) canvas.height = Math.max(1, Math.round(r.height * dpr)) } resize() const ro = new ResizeObserver(resize) ro.observe(root) const pillCenter = () => { const rr = root.getBoundingClientRect() const pr = pill.getBoundingClientRect() return { x: pr.left - rr.left + pr.width / 2, y: pr.top - rr.top + pr.height / 2, rx: pr.width / 2 } } const applyCharge = () => { const [cr, cg, cb] = ACCENT const t = charge const r = Math.round(255 + (cr - 255) * t) const g = Math.round(255 + (cg - 255) * t) const b = Math.round(255 + (cb - 255) * t) pill.style.borderColor = `rgba(${r},${g},${b},${0.4 + 0.5 * t})` pill.style.boxShadow = t > 0.02 ? `0 0 ${22 * t}px ${accentRgba(0.34 * t)}` : "none" // the hairline ring brightens as charge arrives if (ring) { ring.style.opacity = String(0.35 + 0.65 * t) ring.style.filter = `saturate(${1 + t}) brightness(${1 + 0.5 * t})` } } const tick = (now: number) => { raf = 0 const w = canvas.width / dpr const h = canvas.height / dpr ctx.setTransform(dpr, 0, 0, dpr, 0, 0) ctx.clearRect(0, 0, w, h) ctx.globalCompositeOperation = "lighter" const c = pillCenter() for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i] const age = (now - p.born) / LIFE_MS if (age >= 1) { particles.splice(i, 1) continue } const dx = c.x - p.x const dy = c.y - p.y const d = Math.hypot(dx, dy) if (d < GRAVITY_R && d > 1) { const pull = (1 - d / GRAVITY_R) * 0.9 p.vx += (dx / d) * pull p.vy += (dy / d) * pull } if (d < c.rx + 10) { charge = Math.min(1, charge + 0.08) particles.splice(i, 1) continue } p.vx *= 0.92 p.vy *= 0.92 p.x += p.vx p.y += p.vy const fade = 1 - age // soft additive glow halo + crisp core ctx.beginPath() ctx.arc(p.x, p.y, p.size * 2.4, 0, Math.PI * 2) ctx.fillStyle = accentRgba(0.16 * fade) ctx.fill() ctx.beginPath() ctx.arc(p.x, p.y, p.size * 0.75, 0, Math.PI * 2) ctx.fillStyle = `rgba(${Math.round(160 + 95 * fade)},${Math.round(200 + 55 * fade)},255,${0.85 * fade})` ctx.fill() } ctx.globalCompositeOperation = "source-over" charge = Math.max(0, charge - 0.012) applyCharge() if (onScreen && (particles.length > 0 || charge > 0.01)) raf = requestAnimationFrame(tick) else running = false } const ensureLoop = () => { if (!running && onScreen) { running = true raf = requestAnimationFrame(tick) } } const onMove = (e: PointerEvent) => { const now = performance.now() if (now - lastSpawn < SPAWN_GAP_MS) return lastSpawn = now const r = root.getBoundingClientRect() particles.push({ x: e.clientX - r.left + (Math.random() - 0.5) * 6, y: e.clientY - r.top + (Math.random() - 0.5) * 6, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4, born: now, size: Math.random() < 0.5 ? 1 : 2, }) if (particles.length > 80) particles.shift() ensureLoop() } const io = new IntersectionObserver(([entry]) => { onScreen = entry.isIntersecting if (!onScreen && raf) { cancelAnimationFrame(raf) raf = 0 running = false } else if (onScreen) ensureLoop() }) io.observe(root) root.addEventListener("pointermove", onMove) return () => { root.removeEventListener("pointermove", onMove) io.disconnect() ro.disconnect() if (raf) cancelAnimationFrame(raf) } }, [reduced]) return (