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

Suggested for you