# Fourier Sum
URL: https://remocn.dev/docs/motion-graphics/fourier-sum

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

- Install: `npx shadcn@latest add @remocn/fourier-sum`
- Vibe: data
- Natural length: 142f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `2` | How many wave periods fit across the width. |
| `accent` | `string` | `"#3B5BFD"` | Color of the row labels. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |

## Use when
- Explaining how many simple parts combine into one result ("Many parts. One signal.").
- A technical or education beat that needs a clean mathematical visual.
- A product story about composing small components into a whole.

## Don't use when
- You want to show a real data series over time — use `animated-line-chart`.
- The idea is rhythm or phase between many moving items — use `pendulum-wave`.
- You need parts adding up to a total with labels — use `core-sum`.