Continuity

Continuity is a B2B template for network-infrastructure and security-hardware suppliers, structured cabling, fiber, connectors, racks, managed switching, CCTV and access control. Fourteen page templates cover a 20-product catalog with category filters and full spec-sheet product pages, four solution verticals, case studies, insights, about, contact, and a request-a-spec-sheet form. The signature is the Live Signal Pulse: an ember head rides a vertical SVG cable down the left edge as you scroll, energizing each section node it passes while doubling as the section index. A pinned ScrollTrigger sequence explodes a Cat6A cable into its four labelled construction layers, an interactive canvas signal field links drifting nodes toward your cursor, and a localStorage quote cart lets buyers stack SKUs and send a pre-filled WhatsApp message, no checkout, no payment processor. Warm blueprint paper by default, with a dark Equipment Room counter-register for the field section.

What’s inside

• 14 page templates, Home, Catalog, Spec-Sheet PDP, Solutions, Solution Detail, Case Studies, Case Study, Insights, Post, About, Contact, Request, Style Guide, 404
• Live Signal Pulse rail, an ember head rides a vertical SVG cable at your scroll position, lighting each node red as it passes; the same rail doubles as section nav via Lenis scrollTo
• Pinned cable cross-section, a scrubbed ScrollTrigger timeline separates a Cat6A cable into 4 labelled layers (LSZH jacket, aluminium-mylar foil, 23 AWG solid copper, conductor core) with staggered callouts
• WhatsApp quote cart, localStorage cart drawer with quantity controls that builds a pre-filled WhatsApp message; no checkout, no payment gateway to wire up
• 20-product catalog with client-side category filters, Cabling, Connectors, Fiber, Switching, Surveillance, Access, Networking
• Spec-sheet product pages with a tabular specification table and a drafting title block (SKU / CATEGORY / STANDARD / SHEET / SCALE / REV)

The signature

A single ember pulse rides one vertical SVG cable down the left edge of the page, driven directly by scroll position on a requestAnimationFrame loop. Each section node it reaches switches from stone to signal red with a drop-shadow glow, and the labelled index beside it bolds in step, so the rail is both the signature animation and real section navigation. It hides itself on coarse pointers and reduced motion, landing on a fully energized static state instead.

See it live

The demo is public: https://fpsjago.github.io/continuity/. 14 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.