BeatWave

Overview

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.

Key Features

• 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

Properties

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.

Best Practices

• 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

Use Cases

• 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