Linear Waveform
A customizable linear audio waveform visualization component.
Animate a linear waveform, often used for audio visualizations.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/linear-waveform.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the LinearWaveform
component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and defining a Composition
.
Prerequisite
Ensure you have a Remotion project set up. If not, please refer to the Remotion documentation to get started.
Project Structure Example
Here’s an example folder layout showing where to place the component and how it fits into a typical Remotion project
Define a Composition
In your Remotion project's entry file (commonly src/Root.tsx
, src/index.tsx
, app/main.tsx
), import LinearWaveform
and define a Composition
.
API Reference
The component exported as LinearWaveform
(e.g., from apps/docs/registry/default/ui/linear-waveform.tsx
or your project's component path) accepts the following props to customize its appearance and animation:
Prop | Type | Default Value | Description |
---|---|---|---|
barCount | number | 40 | Number of bars in the waveform. |
barWidth | number | 12 | Width of each bar in pixels. |
barGap | number | 4 | Gap between each bar in pixels. |
barColor | string | "white" | Color of the bars. Accepts any valid CSS color value. |
barBorderRadius | string | "6px" | Border radius of the bars. |
waveAmplitude | number | 100 | Maximum height of the wave. |
waveSpeed | number | 10 | Speed of the wave animation. Higher value means slower animation. |
randomness | number | 50 | Amount of random height variation applied to each bar. Set to 0 for no randomness. |
height | string | number | Video config height | Explicit height for the waveform container. Overrides video config height. |
width | string | number | Video config width | Explicit width for the waveform container. Overrides video config width. |
containerStyle | React.CSSProperties | {} | Custom CSS styles for the main container div . |
barStyle | React.CSSProperties | {} | Custom CSS styles for individual bars. Applied to each bar div . |
barShadow | string | "0 0 10px rgba(59, 130, 246, 0.6)" | Box shadow style for each bar. |
containerShadow | string | "inset 0 0 100px rgba(59, 130, 246, 0.2)" | Inner box shadow style for the container. |
containerBackdropFilter | string | "blur(8px)" | Backdrop filter style for the container (e.g., for a frosted glass effect). |