"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Activity, Gauge, Globe, Zap, type LucideIcon } from "lucide-react"; import { cn } from "@/lib/utils"; export type Feature = { icon: LucideIcon; title: string; metric: string; caption: string; }; const DEFAULT_FEATURES: Feature[] = [ { icon: Zap, title: "Instant deploys", metric: "< 1s", caption: "Every push builds, tests, and promotes to production in under a second, with no queue between commit and live.", }, { icon: Globe, title: "Edge network", metric: "300 PoP", caption: "Three hundred locations answer each request from the nearest node, so latency stays low for every visitor.", }, { icon: Gauge, title: "Elastic scale", metric: "Auto", caption: "Capacity expands the moment traffic climbs, then settles back down once the spike has fully passed.", }, { icon: Activity, title: "Live tracing", metric: "Realtime", caption: "Follow a single request across every service, with spans, logs, and metrics stitched into one timeline.", }, ]; const EASE = [0.16, 1, 0.3, 1] as const; export function FeatureSpotlight({ features = DEFAULT_FEATURES, interval = 3200, className, }: { features?: Feature[]; interval?: number; className?: string; }) { const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); useEffect(() => { if (paused) return; const id = window.setInterval(() => { setActive((a) => (a + 1) % features.length); }, interval); return () => window.clearInterval(id); }, [paused, interval, features.length]); const current = features[active]; // Spotlight target for a fixed two-column grid. Integer percentages only. const col = active % 2; const row = Math.floor(active / 2); const spot = { x: col === 0 ? 27 : 73, y: row === 0 ? 28 : 74 }; return (

{/* Header */}

Platform

Built to run at scale

Live

{/* Grid + traveling spotlight */}

setPaused(false)} > {features.map((f, i) => { const Icon = f.icon; const isActive = i === active; return ( { setActive(i); setPaused(true); }} onFocus={() => { setActive(i); setPaused(true); }} onBlur={() => setPaused(false)} className="group relative z-10 flex flex-col items-start overflow-hidden rounded-xl border p-4 text-left outline-none" initial={false} animate={{ opacity: isActive ? 1 : 0.5, borderColor: isActive ? "rgba(124,108,255,0.4)" : "rgba(255,255,255,0.06)", backgroundColor: isActive ? "rgba(124,108,255,0.06)" : "rgba(255,255,255,0.02)", boxShadow: isActive ? "0 12px 40px -18px rgba(124,108,255,0.65)" : "0 0 0 0 rgba(0,0,0,0)", }} transition={{ duration: 0.5, ease: EASE }} > {/* Thin bright top edge on the active card */}

{f.metric}

{f.title} ); })}

{/* Crossfading caption */}

{current.title}. {current.caption}

{/* Segmented progress */}

{features.map((f, i) => (

{i === active && ( )}

))}

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

); }

Feature Spotlight

Built to run at scale