import { cn } from "@/lib/utils"; import React, { useState, useEffect, useRef } from 'react'; import { motion, useScroll, useTransform, useSpring, useMotionTemplate, AnimatePresence } from 'framer-motion'; import { SynapseXLogo, SquashHamburger } from './components/UI'; import { ScrambleIn, ScrambleText } from './components/Animations'; const VIDEOS = { hero: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4", cinematic: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4", metrics: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4", tech: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4", footer: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4" }; export default function App() { const [entranceComplete, setEntranceComplete] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [isDownloadHovered, setIsDownloadHovered] = useState(false); const heroVideoRef = useRef(null); const isSeeking = useRef(false); // Hero Scrub Logic useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!heroVideoRef.current || isSeeking.current) return; const scrubFactor = 0.8; const duration = heroVideoRef.current.duration; if (!duration) return; const targetTime = (e.clientX / window.innerWidth) * duration * scrubFactor; isSeeking.current = true; heroVideoRef.current.currentTime = targetTime; }; const handleSeeked = () => { isSeeking.current = false; }; window.addEventListener('mousemove', handleMouseMove); heroVideoRef.current?.addEventListener('seeked', handleSeeked); const timer = setTimeout(() => setEntranceComplete(true), 800); return () => { window.removeEventListener('mousemove', handleMouseMove); heroVideoRef.current?.removeEventListener('seeked', handleSeeked); clearTimeout(timer); }; }, []); // Scroll Animations for Section 2 const cinematicRef = useRef(null); const { scrollYProgress: cinematicProgress } = useScroll({ target: cinematicRef, offset: ["start end", "end start"] }); const springProgress = useSpring(cinematicProgress, { stiffness: 15, damping: 32, mass: 1.8 }); const yScaleValue = useTransform(springProgress, [0, 1], [60, -120]); const cinematicOpacity = useTransform(cinematicProgress, [0.3, 0.5], [0, 1]); const transform = useMotionTemplate`perspective(400px) rotateX(24deg) translateY(${yScaleValue}px) translateZ(15px)`; return (

{/* NAVBAR */}

{/* Logo Pill */} SynapseX {/* Menu Pill */} {menuOpen && ( {["About", "Metrics"].map((item, i) => ( { window.scrollTo({ top: window.innerHeight * (i + 1), behavior: 'smooth' }); setMenuOpen(false); }} /> ))} )}

{/* Download Button */} setIsDownloadHovered(true)} onMouseLeave={() => setIsDownloadHovered(false)} whileHover={{ scale: 1.03, backgroundColor: "#e2e2e6" }} whileTap={{ scale: 0.97 }} className="h-9 md:h-12 px-4 md:px-6 bg-white rounded-full text-black flex items-center gap-2" > {/* SECTION 1: HERO */}

{/* SECTION 2: CINEMATIC TEXT */}

{/* SECTION 3: METRICS */}

{/* SECTION 4: TECHNOLOGY */}

{/* SECTION 5: ARCHITECTURE */}

Architecture

Three layers. Zero friction.

Sensor layer captures raw bioelectric signals. Processing layer isolates intent. Interface layer delivers structured output to any connected system.
{[ { l: "Layer 1", n: "Capture" }, { l: "Layer 2", n: "Process" }, { l: "Layer 3", n: "Interface" } ].map((layer) => (
{layer.l} {layer.n}
))}

{/* FOOTER */}

SynapseX

The next evolution of human-machine interaction. Built for those who refuse to be limited by biology alone.

(c) 2026 SynapseX Labs. All rights reserved.

); } function NavItem({ label, onClick }: { label: string; onClick: () => void }) { const [isHovered, setIsHovered] = useState(false); return ( ); }

TRANSCENDENCE

{m.val}

{item.t}

Three layers. Zero friction.