Pulse is a state-of-the-art product-launch template for a health & fitness wearable (a smart band that tracks heart rate, HRV, sleep, recovery and SpO2). Its signature is a large, self-animating inline-SVG hero composed inside a glass canvas and built in depth-layers: a soft radial background bloom in two tones (multi-stop radialGradients), a fine dot-grid texture and a slowly drifting particle field, a breathing concentric "radar" ring system centred on the focal pulse, and — as the luminous focal element — a PQRST ECG waveform with a dim ghost trace, a 4-stop gradient stroke that draws itself via CSS keyframes on stroke-dashoffset with a real neon glow (SVG feGaussianBlur + feMerge filter), and a bright comet head that rides the exact path leaving a fading trail. A faint feTurbulence film-grain adds texture. Over the canvas float three glassmorphic metric cards (live BPM with a beating heart, HRV with a sparkline, and a readiness ring-gauge that sweeps to its value) with backdrop blur and hairline borders. It is pure SVG + CSS — no video, no scroll-scrubbing, no scripts — and every animation collapses to a clean static composed frame under prefers-reduced-motion. Below the hero: a four-up vital metrics grid, a device showcase with a real wearable photograph, an app/insights section with a pure-CSS recovery chart, a social-proof stat band and member quote, a buy-the-band pricing block, and a footer.
Vital, precise and quietly clinical — a cool near-black canvas brought to life by a luminous coral-to-mint heartbeat trace, breathing radar rings and floating glass vitals.
Design rules
Palette
Headings
Space Grotesk
Body
Inter
Radius
18px
Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.
