## Your First Component Let's add a `MagneticButton` to your project - a button that magnetically follows the cursor on hover. Create a new file at `components/ui/MagneticButton.tsx`: ```tsx 'use client' import { useRef } from 'react' import { motion, useMotionValue, useSpring } from 'framer-motion' interface MagneticButtonProps { children: React.ReactNode variant?: 'primary' | 'secondary' | 'outline' className?: string href?: string } export function MagneticButton({ children, variant = 'primary', className = '', href, }: MagneticButtonProps) { const ref = useRef(null) const x = useMotionValue(0) const y = useMotionValue(0) const springConfig = { damping: 20, stiffness: 300 } const springX = useSpring(x, springConfig) const springY = useSpring(y, springConfig) const handleMouseMove = (e: React.MouseEvent) => { if (!ref.current) return const rect = ref.current.getBoundingClientRect() const centerX = rect.left + rect.width / 2 const centerY = rect.top + rect.height / 2 x.set((e.clientX - centerX) * 0.3) y.set((e.clientY - centerY) * 0.3) } const handleMouseLeave = () => { x.set(0) y.set(0) } const variants = { primary: 'bg-black text-white hover:bg-gray-800', secondary: 'bg-white text-black border-2 border-black', outline: 'bg-transparent text-black border border-black/30', } const Component = href ? motion.a : motion.button return (

{children}

) } ``` Import and use the component in your page: ```tsx import { MagneticButton } from '@/components/ui/MagneticButton' export default function Page() { return (

Get Started Documentation

) } ``` Run your development server and hover over the buttons. They should smoothly follow your cursor! All Kinetik components are designed to work standalone. Copy only what you need - no need to install the entire library. ## Understanding the Code Let's break down the key parts: ### Motion Values ```tsx const x = useMotionValue(0) const y = useMotionValue(0) ``` Motion values store animation state without causing re-renders. They're perfect for high-frequency updates like mouse tracking. ### Spring Physics ```tsx const springConfig = { damping: 20, stiffness: 300 } const springX = useSpring(x, springConfig) ``` Springs create natural-feeling motion. Higher `stiffness` = snappier, higher `damping` = less bouncy. ### Mouse Tracking ```tsx const handleMouseMove = (e: React.MouseEvent) => { const rect = ref.current.getBoundingClientRect() const centerX = rect.left + rect.width / 2 x.set((e.clientX - centerX) * 0.3) } ``` We calculate the distance from the button's center and apply a multiplier (0.3) to control intensity. ## Next Components to Try Now that you've got the basics, try these components: - **AnimatedText** - Typewriter and reveal effects - **InteractiveGrid** - Mouse-following background - **CustomCursor** - Morphing cursor component Browse all components in the [Component Library](/components). ## Customization Want to change the accent color? Update the Tailwind classes: ```tsx // Change from black to indigo const variants = { primary: 'bg-indigo-600 text-white hover:bg-indigo-700', // ... } ``` Learn more in the [Theming guide](/docs/customization/theming).

Quick Start

Quick Start