Meridian

Sobre Este Template

Meridian es una plantilla fintech para procesadores de pagos, APIs bancarias y plataformas de movimiento de dinero. Dieciséis rutas cubren productos, precios con toggle anual, una landing para developers, casos de éxito de clientes, una página de seguridad con listado de certificaciones, un status board en vivo, changelog, blog con cinco posts, about, careers, contacto, pantallas de sign in y sign up, y un 404. El hero corre una simulación real en canvas: cinco nodos de red etiquetados conectados con curvas bezier cuadráticas, con pulsos dorados de transacción que recorren las curvas dejando estelas que se desvanecen y nodos que brillan al acercar el cursor. Siete visuales de producto hechos a mano — dashboard, editor de código, terminal, gráfico de métricas en vivo — reemplazan por completo cualquier screenshot de stock. Tres skins, incluida una variante clara ivory, cambian la paleta desde un solo atributo.

Firma

La mitad derecha del hero es una simulación 2D en canvas de una red de pagos: cinco nodos etiquetados (Bank, Gateway, Processor, Merchant, User) conectados por siete curvas bezier cuadráticas, con pulsos dorados de transacción que aparecen aleatoriamente y recorren las curvas, cada uno arrastrando una estela de 20 puntos que se desvanece detrás. Los nodos respiran con su propia fase sinusoidal y se iluminan cuando el cursor entra en un radio de 120px. Nada es un video ni un screenshot — se dibuja cada frame según el device pixel ratio y se limpia solo al desmontar.

Características

• 16 rutas — Inicio, Productos, Precios, Developers, Customers, Security, Status, Changelog, Blog, Post, About, Careers, Contacto, Sign in, Sign up, 404
• Canvas de red de pagos en vivo — 5 nodos etiquetados, 7 enlaces bezier cuadráticos, pulsos dorados con estelas de 20 puntos y brillo de nodo por proximidad del cursor
• Canvas de grilla de puntos reactiva al mouse con espaciado de 32px sobre una malla de orbes aurora a la deriva detrás del hero
• Entrada del hero en siete pasos — las métricas entran con back.out(1.4), las palabras del titular suben en cascada, el canvas escala, y todo sale con parallax en scrub
• 7 visuales de producto hechos a mano — mockup de dashboard, editor de código, terminal CLI, gráfico de métricas, flow de pagos, grilla de puntos, malla aurora
• Gráfico de volumen de transacciones en canvas que avanza en vivo — ventana móvil de 60 puntos con relleno de área en gradiente y línea dorada con glow
• Grilla bento de features — 5 features, cada una con su propio visual en vivo en lugar de un icono
• Precios con toggle anual/mensual — Build (gratis), Scale ($249/mes) y Enterprise, con cards reveladas por ScrollTrigger
• Página de status con filas de uptime por servicio, página de changelog con entradas fechadas, y página de seguridad con certificaciones SOC 2, PCI DSS e ISO
• Pantallas dedicadas de sign in y sign up, más página de contacto — páginas de auth que la mayoría de plantillas SaaS omite
• Franja de confianza con badges SOC 2 Type II, PCI DSS Level 1, ISO 27001, GDPR y cifrado de 256 bits
• Marquee infinito de 8 logos con máscaras de gradiente en los bordes y aumento de opacidad al hover
• Colección de contenido de blog — 5 posts Markdown tipados con Zod (autor, categoría, tiempo de lectura, featured), índice más ruta de detalle
• 3 skins de color vía atributo data-skin — navy-gold (default), obsidian, y una variante clara completa ivory-trust
• Sistema de cards con stack de sombras sin bordes más overlay de grano SVG fractalNoise al 2.5% en modo overlay
• Smooth scroll con Lenis con teardown y refresh completos en ClientRouter, skip-link, fallback noscript para reveals y guards de prefers-reduced-motion en cada canvas

Despliegue