# Venn Merge
URL: https://remocn.dev/docs/motion-graphics/venn-merge

Two circles labelled Design and Code overlap, the lens fills with the logo and a caption lands

- Install: `npx shadcn@latest add @remocn/venn-merge`
- Vibe: premium
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/venn-merge
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { VennMerge } from "@/components/remocn/venn-merge";

const VennMergeScene = () => (
  <VennMerge
    sets={["Design", "Code"]}
    center="Kitebase"
    caption="Motion design, written as code."
  />
);

export const RemotionRoot = () => (
  <Composition
    id="VennMerge"
    component={VennMergeScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Outlined circles draw in, slide together until they overlap, and the shared lens fills with a gradient. The `center` text (or the Remocn logo for the default) fades into the lens and the `caption` appears below. Pass 2 or 3 `sets` labels, a `center` and a `caption`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `sets` | `string[]` | `["Design", "Code"]` | Labels for the circles. Two or three are used. |
| `center` | `string` | `"remocn"` | Text in the overlap. "remocn" shows the logo instead. |
| `caption` | `string` | `"Motion design, written as code."` | Line shown under the diagram. |
| `accent` | `string` | `"#3B5BFD"` | Color of the deep gradient stop in the lens. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- Explaining that your product sits at the overlap of two or three disciplines.
- A positioning beat ("Motion design, written as code") with a brand name in the middle.
- A clean concept diagram moment in a launch or pitch video.

## Don't use when
- The idea is two pieces merging into one new shape — use `pill-morph`.
- The overlap is a partnership of two brands — use `collab-lockup`.
- You want one shape to morph into another letter or form — use `shape-morph-o`.