Fourier Sum

Sine harmonics are drawn one by one, merge into a square wave and a serif caption lands below

Installation

$ pnpm dlx shadcn@latest add @remocn/fourier-sum

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FourierSum } from "@/components/remocn/fourier-sum";
 
const FourierSumScene = () => (
  <FourierSum harmonics={[1, 3, 5, 7, 9]} title="Many parts. One signal." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FourierSum"
    component={FourierSumScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

Rows of sine waves draw in one by one. They then merge in order into a summed wave while a running "1× + 3× + 5×" caption builds, and the title fades in below. Pass harmonics (odd numbers give a square wave), title and periods. Ships dark and light via theme.

Props6

Prop	Type	Default
harmonics	number[][1, 3, 5, 7, 9] Harmonic numbers to draw, one wave each. Odd numbers build a square wave.
title	string"Many parts. One signal." Caption shown after the waves merge.
periods	number2 How many wave periods fit across the width.
accent	string"#3B5BFD" Color of the row labels.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.

harmonicsnumber[]
Harmonic numbers to draw, one wave each. Odd numbers build a square wave.
Default[1, 3, 5, 7, 9]
titlestring
Caption shown after the waves merge.
Default"Many parts. One signal."
periodsnumber
How many wave periods fit across the width.
Default2
accentstring
Color of the row labels.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"