"use client"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, type Transition } from "framer-motion"; import { Activity, Globe, Search, ShieldCheck, Webhook, X } from "lucide-react"; import { cn } from "@/lib/utils"; export interface LayoutTile { id: string; title: string; meta: string; teaser: string; description: string; icon: React.ReactNode; /** Accent as an "r, g, b" triple, e.g. "124, 108, 255". Used sparingly. */ accent: string; stats: { k: string; v: string }[]; /** Tailwind grid-span classes for this tile's slot. */ span: string; /** Render as a large feature tile (bottom-aligned copy). */ large?: boolean; } const MORPH: Transition = { type: "spring", stiffness: 230, damping: 26, mass: 0.9, }; const EASE = [0.16, 1, 0.3, 1] as const; function tileGradient(accent: string, strong: boolean): string { const a = strong ? 0.22 : 0.14; return ( `radial-gradient(120% 130% at 18% 0%, rgba(${accent}, ${a}), transparent 55%),` + "linear-gradient(155deg, #12131d 0%, #0b0b12 100%)" ); } export function LayoutGrid({ tiles, autoCycle = true, className, }: { tiles: LayoutTile[]; autoCycle?: boolean; className?: string; }) { const [openId, setOpenId] = useState(null); const [hovering, setHovering] = useState(false); const idxRef = useRef(0); useEffect(() => { if (!autoCycle || hovering || tiles.length === 0) return; const iv = setInterval(() => { setOpenId((cur) => { if (cur !== null) { idxRef.current = (idxRef.current + 1) % tiles.length; return null; } return tiles[idxRef.current % tiles.length].id; }); }, 2300); return () => clearInterval(iv); }, [autoCycle, hovering, tiles]); const open = tiles.find((t) => t.id === openId) ?? null; function toggle(id: string) { idxRef.current = Math.max( 0, tiles.findIndex((t) => t.id === id) ); setOpenId((cur) => (cur === id ? null : id)); } return (

setHovering(true)} onMouseLeave={() => { setHovering(false); if (autoCycle) setOpenId(null); }} className={cn("relative h-full w-full", className)} >

{tiles.map((tile, i) => ( toggle(tile.id)} whileHover={{ y: -2 }} whileTap={{ scale: 0.99 }} style={{ backgroundImage: tileGradient(tile.accent, !!tile.large) }} className={cn( "group relative flex flex-col overflow-hidden rounded-2xl border border-white/10 p-4 text-left", "shadow-[0_1px_0_0_rgba(255,255,255,0.04)_inset,0_18px_40px_-30px_rgba(0,0,0,0.9)]", tile.large ? "justify-end" : "justify-between", tile.span )} > {/* thin bright top edge */} {/* idle breathing glow */} {tile.icon}

{tile.title} {tile.meta} {tile.large && (

{tile.teaser}

)}

))}

{open && ( <> setOpenId(null)} className="absolute inset-0 z-20 rounded-2xl bg-black/60 backdrop-blur-sm" />

setOpenId(null)} style={{ backgroundImage: tileGradient(open.accent, true) }} className="pointer-events-auto relative w-full max-w-sm cursor-pointer overflow-hidden rounded-2xl border border-white/10 p-6 shadow-[0_1px_0_0_rgba(255,255,255,0.06)_inset,0_40px_80px_-40px_rgba(0,0,0,0.95)]" >

{open.icon}

{open.title} {open.meta}

{open.description} {open.stats.map((s) => (

{s.k}

{s.v}

))}

)}

); } const TILES: LayoutTile[] = [ { id: "sync", title: "Realtime sync", meta: "12ms p50", teaser: "Conflict-free state, streamed to every client.", description: "Bidirectional streams keep every session in lockstep. Writes merge on the edge with CRDT resolution, so two people editing the same field never clobber each other.", icon: , accent: "124, 108, 255", stats: [ { k: "Median sync", v: "12ms" }, { k: "Merge model", v: "CRDT" }, { k: "Uptime", v: "99.99%" }, ], span: "col-span-3 row-span-2", large: true, }, { id: "edge", title: "Edge network", meta: "310 regions", teaser: "", description: "Requests resolve at the nearest point of presence across 310 regions. Cold starts stay under 40ms and static assets ship from cache in a single round trip.", icon: , accent: "91, 140, 255", stats: [ { k: "Regions", v: "310" }, { k: "Cold start", v: "38ms" }, ], span: "col-span-3 row-span-1", }, { id: "search", title: "Vector search", meta: "sub-40ms", teaser: "", description: "Hybrid keyword and vector ranking over billions of embeddings, with sub-40ms recall. Filters, facets, and relevance tuning ship out of the box.", icon: , accent: "56, 189, 197", stats: [ { k: "Recall", v: "< 40ms" }, { k: "Vectors", v: "2.1B" }, ], span: "col-span-1 row-span-1", }, { id: "audit", title: "Audit trail", meta: "SOC 2", teaser: "", description: "Every mutation is signed, timestamped, and immutable. Export a tamper-evident log to your SIEM, or replay any object back to a point in time.", icon: , accent: "216, 180, 90", stats: [ { k: "Retention", v: "7 yr" }, { k: "Standard", v: "SOC 2" }, ], span: "col-span-1 row-span-1", }, { id: "hooks", title: "Webhooks", meta: "at-least-once", teaser: "", description: "Deliver events with automatic retries, exponential backoff, and signed payloads. Inspect every attempt and replay failures straight from the dashboard.", icon: , accent: "104, 190, 140", stats: [ { k: "Delivery", v: "at-least-once" }, { k: "Retries", v: "auto" }, ], span: "col-span-1 row-span-1", }, ]; export default function Demo() { return (

Auto-touring the grid Hover to explore

); }

Layout Grid

Realtime sync

Edge network

Vector search

Audit trail

Webhooks