"use client"; import { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { cn } from "@/lib/utils"; function MagneticButton({ children, className, }: { children: React.ReactNode; className?: string; }) { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const springX = useSpring(x, { stiffness: 200, damping: 15, mass: 0.4 }); const springY = useSpring(y, { stiffness: 200, damping: 15, mass: 0.4 }); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; const relX = e.clientX - rect.left - rect.width / 2; const relY = e.clientY - rect.top - rect.height / 2; x.set(relX * 0.35); y.set(relY * 0.35); } function onMouseLeave() { x.set(0); y.set(0); } return ( {children} ); } function Orb({ size, color, style, duration, }: { size: number; color: string; style: React.CSSProperties; duration: number; }) { return ( ); } export function CtaBanner({ eyebrow = "Get started", title, description, ctaLabel = "Start building", className, }: { eyebrow?: string; title: string; description: string; ctaLabel?: string; className?: string; }) { const grain = useTransform(() => 0); void grain; return (

{eyebrow}

{title}

{description}

{ctaLabel}

); } export default function Demo() { return (

); }

CTA Banner

Ship your next launch faster