A cinematic animated waveform component featuring a static heartbeat pulse with a traveling white highlight. BeatWave creates an elegant audio-visualization effect where a glowing "train light" smoothly sweeps across a centered oscillation cluster from left to right. The waveform mimics a real sound impulse visualization with a Gaussian envelope that creates natural peaks in the center and flat baselines on the edges. Perfect for hero sections, music/audio-related pages, fintech dashboards, or any design requiring a premium, high-tech visual presence.
Static waveform with Gaussian envelope oscillation cluster
Smooth traveling white highlight with multi-layer glow bloom
Asymmetric trailing tail for cinematic "train light" effect
Elegant serif text overlay with automatic positioning
Dot grid background pattern derived from your background color
Built-in responsive scaling — automatically adapts to mobile and tablet
Text auto-centers on smaller screens
60fps butter-smooth canvas animation
Clean, focused property panel for quick customization
Text: Text Content sets the main headline text. Font Size controls typography scale. Text Color sets the display color. Text Align controls horizontal placement — text position follows automatically.
Wave: Wave Color sets the base waveform stroke color. Amplitude sets the wave peak height. Frequency controls the number of oscillations. Speed controls how fast the highlight travels in pixels per second. Show Glow toggles the multi-layer bloom effect.
Background: Background Color sets the background — the grid dot color is derived automatically. Show Grid toggles the dot pattern on or off.
Use a cream/off-white text color (#F5E6C8) against a deep blue background for high contrast
Keep amplitude between 0.2–0.35 for balanced proportions
Set speed between 120–180 for a calm, cinematic sweep
Enable the glow effect for a more polished, premium appearance
Use text align "right" for desktop layouts — it auto-centers on smaller screens
Hero sections for music, audio, or podcast platforms
Fintech and trading dashboards showing market activity
Healthcare and medical apps displaying heartbeat/vital signs
Technology and SaaS landing pages for a futuristic feel
Creative agency portfolios showcasing premium design
Event and entertainment websites for visual impact
Loading or transition screens with ambient animation
Kami
