Meridian

About This Template

Meridian is a fintech template for payment processors, banking APIs, and money-movement platforms. Sixteen routes cover products, pricing with an annual toggle, a developer landing page, customer case studies, a security page with certification listings, a live status board, a changelog, a blog with five posts, about, careers, contact, sign-in and sign-up screens, and a 404. The hero runs a real canvas simulation: five labeled network nodes wired by quadratic-bezier connections, with gold transaction pulses that travel the curves leaving fading trails and nodes that glow as the cursor approaches. Seven hand-built product visuals — dashboard, code editor, terminal, live metrics chart — replace stock screenshots entirely. Three skins including a light ivory variant swap the palette from one attribute.

Signature

The hero's right half is a live 2D canvas simulation of a payment network: five labeled nodes (Bank, Gateway, Processor, Merchant, User) wired by seven quadratic-bezier connections, with gold transaction pulses spawning randomly and travelling the curves, each dragging a 20-point trail that decays behind it. Nodes breathe on their own sine phase and brighten when the cursor gets within 120px. Nothing is a video or a screenshot — it is drawn every frame at device pixel ratio and cleans itself up on unmount.

Features

• 16 routes — Home, Products, Pricing, Developers, Customers, Security, Status, Changelog, Blog, Blog post, About, Careers, Contact, Sign in, Sign up, 404
• Live payment-network canvas — 5 labeled nodes, 7 quadratic-bezier links, gold pulses with 20-point fading trails and cursor-proximity node glow
• Mouse-reactive dot-grid canvas at 32px spacing layered over a drifting aurora orb mesh behind the hero
• Seven-step hero entrance — metrics slam in on back.out(1.4), headline words cascade, canvas scales up, then everything parallaxes out on scrub
• 7 hand-built product visuals — dashboard mockup, code editor, CLI terminal, metrics chart, payment flow, dot grid, aurora mesh
• Live scrolling transaction-volume chart on canvas — a rolling 60-point window with gradient area fill and a glowing gold line
• Bento feature grid — 5 features, each paired with its own live visual instead of an icon
• Pricing with an annual/monthly toggle — Build (free), Scale ($249/mo) and Enterprise, cards revealed by ScrollTrigger
• Status page with per-service uptime rows, dated changelog page, and a security page listing SOC 2, PCI DSS and ISO certifications
• Dedicated sign-in and sign-up screens, plus a contact page — auth-shaped pages most SaaS templates skip
• Trust strip with SOC 2 Type II, PCI DSS Level 1, ISO 27001, GDPR and 256-bit encryption badges
• Infinite 8-brand logo marquee with gradient edge masks and hover opacity lift
• Blog content collection — 5 Markdown posts typed with Zod (author, category, reading time, featured), index plus detail route
• 3 color skins on a data-skin attribute — navy-gold (default), obsidian, and a full light ivory-trust variant
• Borderless shadow-stack card system plus a 2.5% SVG fractalNoise grain overlay in overlay blend mode
• Lenis smooth scroll with full ClientRouter teardown and refresh, skip-link, noscript reveal fallback and prefers-reduced-motion guards on every canvas

Deployment