Continuity

About This Template

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.

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.

Features

• 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)
• 4 Zod-typed content collections — products (20 entries), solutions (4), case studies (2), insights (2)
• Interactive canvas signal field — drifting network nodes with proximity links that brighten toward the cursor, DPR-aware and paused when off-screen
• Backbone switch panel — port LEDs turn signal-red one by one on a scrub-linked stagger as the section scrolls through
• Equipment Room dark counter-register section (data-skin="dark") over a WebP datacenter photo, with an SVG reticle rotating on a 24s loop
• Blueprint atmosphere primitives — grid overlay, SVG fractalNoise grain, corner registration marks, caliper rules and oversized background type
• Request-a-spec-sheet form with per-field validation, honeypot, and a designed success state — wire it to Formspree, Resend or an Astro Action
• i18n scaffolding already wired — Astro i18n config (en/es), a filled EN+ES chrome dictionary, getLangFromUrl/useTranslations helpers and a LangToggle component ready to mount
• All imagery local and optimized to WebP through getImage() — 14 product shots plus 6 scene photographs, zero external image requests
• Lenis smooth scroll + Astro View Transitions with a persistent nav and footer via transition:persist
• prefers-reduced-motion and coarse pointers honored throughout — the pulse rail falls back to a fully energized static state and pins are skipped

Deployment