import React, { useState, useRef, useEffect } from 'react'; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate, useScroll, AnimatePresence } from 'framer-motion'; import { Lock, ShieldCheck, Timer, Play, Check, ArrowRight, Menu, X } from 'lucide-react'; function useReducedMotionPref() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); setReduced(mq.matches); const handler = (e) => setReduced(e.matches); if (mq.addEventListener) mq.addEventListener('change', handler); else mq.addListener(handler); return () => { if (mq.removeEventListener) mq.removeEventListener('change', handler); else mq.removeListener(handler); }; }, []); return reduced; } function Nav() { const [open, setOpen] = useState(false); return (

UMBRA Get Umbra

{open && (

setOpen(false)}>Streaming setOpen(false)}>Security setOpen(false)}>Pricing

)}

); } function PhoneMockup() { const wrapRef = useRef(null); const reduceMotion = useReducedMotionPref(); const [hovered, setHovered] = useState(false); // Card is w-[240px] h-[490px] — half-extents used below for the glare mapping. const HALF_W = 120; const HALF_H = 245; const rawX = useMotionValue(0); const rawY = useMotionValue(0); const springX = useSpring(rawX, { stiffness: 300, damping: 30 }); const springY = useSpring(rawY, { stiffness: 300, damping: 30 }); const rotateX = useTransform(springY, [-HALF_H, HALF_H], [15, -15]); const rotateY = useTransform(springX, [-HALF_W, HALF_W], [-15, 15]); const glareX = useTransform(springX, [-HALF_W, HALF_W], [0, 100]); const glareY = useTransform(springY, [-HALF_H, HALF_H], [0, 100]); const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.18) 0%, transparent 60%)`; function handleMouseMove(e) { if (reduceMotion || !wrapRef.current) return; const rect = wrapRef.current.getBoundingClientRect(); rawX.set(e.clientX - rect.left - rect.width / 2); rawY.set(e.clientY - rect.top - rect.height / 2); } function handleMouseLeave() { setHovered(false); rawX.set(0); rawY.set(0); } return (

setHovered(true)} onMouseLeave={handleMouseLeave} className="flex items-center justify-center py-10" style={{ perspective: 1400 }} > {!reduceMotion && ( )}

Encrypted

landed. sending the files now

perfect, waiting

deletes in 24h either way

); } function Hero() { return (

Private messaging & streaming

Messages that disappear.
Presence that doesn’t.

End-to-end encrypted chat and media streaming, with nothing left behind when you’re done.

Get Umbra See how it works

); } function ScrollExpandMedia() { const targetRef = useRef(null); const reduceMotion = useReducedMotionPref(); const { scrollYProgress } = useScroll({ target: targetRef, offset: ['start start', 'end end'] }); const videoWidth = useTransform(scrollYProgress, [0, 1], ['46%', '100%']); const videoMargin = useTransform(scrollYProgress, [0, 1], ['28%', '0%']); const videoRadius = useTransform(scrollYProgress, [0, 1], [24, 0]); const textOpacity = useTransform(scrollYProgress, [0, 0.45], [1, 0]); const playScale = useTransform(scrollYProgress, [0, 0.3], [1, 0]); if (reduceMotion) { return (

Built-in streaming

Share the moment, not the file.

); } return (

Built-in streaming

Share the moment, not the file.

); } function Security() { const items = [ { icon: Lock, title: 'End-to-end encrypted', body: 'Every message and stream is encrypted on your device before it ever leaves it.' }, { icon: Timer, title: 'Self-destructing by default', body: 'Set a timer once. Messages and media clear themselves — no follow-up required.' }, { icon: ShieldCheck, title: 'Zero data retention', body: "We can't hand over what we never kept. No message logs, no metadata sale." }, ]; return (

Security

Built to keep nothing.

{items.map((it) => (

{it.title}

{it.body}

))}

); } const PLANS = [ { id: 'free', name: 'Free', monthly: 0, yearly: 0, features: ['Encrypted messaging', 'Up to 2 devices', '24h self-destruct'], }, { id: 'plus', name: 'Plus', monthly: 6.99, yearly: 59, popular: true, features: ['Everything in Free', 'Media streaming', 'Unlimited devices', '30-day history'], }, { id: 'pro', name: 'Pro', monthly: 12.99, yearly: 109, features: ['Everything in Plus', '4K streaming', 'Priority relay network', 'Unlimited history'], }, ]; function PriceTag({ plan, yearly }) { const price = yearly ? plan.yearly : plan.monthly; const isFree = price === 0; const perMonth = yearly && !isFree ? (price / 12).toFixed(2) : price.toFixed(2); return (

{isFree ? '$0' : `$${perMonth}`} {!isFree && /mo}

); } function Pricing() { const [yearly, setYearly] = useState(false); return (

Pricing

Simple, either way.

{PLANS.map((plan) => (

{plan.popular && ( Most popular )}

{plan.name}

{plan.monthly > 0 && yearly && (

billed ${plan.yearly}/yr

)} {(plan.monthly === 0 || !yearly) &&

}

))}

); } function Footer() { return ( ); } export default function App() { return (

); }

Messages that disappear. Presence that doesn’t.

Share the moment, not the file.

Share the moment, not the file.

Built to keep nothing.

{it.title}

Simple, either way.

{plan.name}

Messages that disappear.
Presence that doesn’t.