Venn Merge

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

Installation

$ pnpm dlx 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.

Props6

Prop	Type	Default
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	number1 Playback speed multiplier for the whole timeline.

setsstring[]
Labels for the circles. Two or three are used.
Default["Design", "Code"]
centerstring
Text in the overlap. "remocn" shows the logo instead.
Default"remocn"
captionstring
Line shown under the diagram.
Default"Motion design, written as code."
accentstring
Color of the deep gradient stop in the lens.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1