feat: add SplitText hero animation and MagneticButton CTAs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

app/page.tsx

@@ -7,6 +7,8 @@ import { PayNow } from '@/components/paynow'
 import EmailCapture from '@/components/EmailCapture'
 import { SocialShare } from '@/components/SocialShare'
 import { EcosystemFooter } from '@/components/EcosystemFooter'
+import { SplitText } from '@/components/SplitText'
+import { MagneticButton } from '@/components/MagneticButton'
 
 // ── Example CLAUDE.md for "Try with example" ─────────────────────────
 
@@ -259,15 +261,17 @@ export default function Home() {
             Security Scanner for AI Agent Configs
           </motion.div>
 
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
             transition={{ delay: 0.1 }}
-            className="mx-auto mb-6 max-w-4xl text-3xl font-bold leading-tight tracking-tight text-white sm:text-4xl md:text-5xl"
+            className="mx-auto mb-6 max-w-4xl"
           >
-            Your AI agent has more access than your junior dev.{' '}
-            <span className="text-accent">Have you audited it?</span>
-          </motion.h1>
+            <h1 className="text-3xl font-bold leading-tight tracking-tight text-white sm:text-4xl md:text-5xl">
+              <SplitText text="Your AI agent has more access than your junior dev." className="text-3xl sm:text-4xl md:text-5xl font-bold leading-tight tracking-tight justify-center" />
+              <span className="text-accent">Have you audited it?</span>
+            </h1>
+          </motion.div>
 
           <motion.p
             initial={{ opacity: 0, y: 20 }}
@@ -330,29 +334,31 @@ export default function Home() {
 
             {/* Action buttons */}
             <div className="flex flex-col gap-3 sm:flex-row">
-              <button
-                onClick={handleScan}
-                disabled={!config.trim() || scanning}
-                className={`flex-1 rounded-xl py-4 text-sm font-bold text-white transition-all ${
-                  scanning
-                    ? 'bg-accent/60 cursor-wait'
-                    : config.trim()
-                      ? 'bg-accent hover:bg-accent/90 pulse-glow cursor-pointer'
-                      : 'bg-card-border cursor-not-allowed text-muted'
-                }`}
-              >
-                {scanning ? (
-                  <span className="flex items-center justify-center gap-3">
-                    <svg className="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                    </svg>
-                    Scanning for vulnerabilities...
-                  </span>
-                ) : (
-                  'Scan Now -- Free'
-                )}
-              </button>
+              <MagneticButton className="flex-1">
+                <button
+                  onClick={handleScan}
+                  disabled={!config.trim() || scanning}
+                  className={`w-full rounded-xl py-4 text-sm font-bold text-white transition-all ${
+                    scanning
+                      ? 'bg-accent/60 cursor-wait'
+                      : config.trim()
+                        ? 'bg-accent hover:bg-accent/90 pulse-glow cursor-pointer'
+                        : 'bg-card-border cursor-not-allowed text-muted'
+                  }`}
+                >
+                  {scanning ? (
+                    <span className="flex items-center justify-center gap-3">
+                      <svg className="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                      </svg>
+                      Scanning for vulnerabilities...
+                    </span>
+                  ) : (
+                    'Scan Now -- Free'
+                  )}
+                </button>
+              </MagneticButton>
               <button
                 onClick={() => {
                   setConfig(EXAMPLE_CONFIG)

components/MagneticButton.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+
+interface MagneticButtonProps {
+  children: React.ReactNode;
+  className?: string;
+  strength?: number;
+}
+
+export const MagneticButton: React.FC<MagneticButtonProps> = ({
+  children,
+  className = '',
+  strength = 30,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const { clientX, clientY } = e;
+    const { height, width, left, top } =
+      ref.current!.getBoundingClientRect();
+
+    const middleX = clientX - (left + width / 2);
+    const middleY = clientY - (top + height / 2);
+
+    setPosition({
+      x: (middleX / width) * strength,
+      y: (middleY / height) * strength,
+    });
+  };
+
+  const reset = () => {
+    setPosition({ x: 0, y: 0 });
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={reset}
+      animate={{ x: position.x, y: position.y }}
+      transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.1 }}
+      className={className}
+      style={{ display: 'inline-block' }}
+    >
+      {children}
+    </motion.div>
+  );
+};

components/SplitText.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface SplitTextProps {
+  text: string;
+  className?: string;
+  delay?: number;
+}
+
+const container = {
+  hidden: { opacity: 0 },
+  visible: (i = 1) => ({
+    opacity: 1,
+    transition: { staggerChildren: 0.12, delayChildren: i },
+  }),
+};
+
+const child = {
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring' as const,
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+  hidden: {
+    opacity: 0,
+    y: 100,
+    transition: {
+      type: 'spring' as const,
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+};
+
+export const SplitText: React.FC<SplitTextProps> = ({
+  text,
+  className = '',
+  delay = 0,
+}) => {
+  const words = text.split(' ');
+
+  return (
+    <motion.div
+      className={`flex flex-wrap ${className}`}
+      variants={container}
+      custom={delay}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: '-50px' }}
+    >
+      {words.map((word, index) => (
+        <motion.span
+          variants={child}
+          style={{ marginRight: '0.25em', display: 'inline-block' }}
+          key={index}
+        >
+          {word}
+        </motion.span>
+      ))}
+    </motion.div>
+  );
+};