Dot Bloom

Installation

$ pnpm dlx shadcn@latest add @snapcn/dot-bloom

Component code

The exact file shadcn add copies into your project.

Usage

Dot Bloom paints only the transition. Lay it over both shots and cut between them underneath it at DOT_BLOOM_CUT, the frame where the cream covers the whole screen.

import { AbsoluteFill, Sequence } from "remotion";
import { DOT_BLOOM_CUT, DotBloom } from "@/components/snap-cn/dot-bloom";

const AT = 60; // where the transition starts

export const Cut = () => (
  <AbsoluteFill>
    <Sequence durationInFrames={AT + DOT_BLOOM_CUT}><ShotA /></Sequence>
    <Sequence from={AT + DOT_BLOOM_CUT}><ShotB /></Sequence>
    <Sequence from={AT} durationInFrames={30}><DotBloom /></Sequence>
  </AbsoluteFill>
);

Props

Frequently asked questions

How do I add Dot Bloom to a Remotion project?

Run npx shadcn@latest add @snapcn/dot-bloom. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Dot Bloom?

Dot Bloom is a Remotion halftone dot transition for React. A halftone transition — the outgoing shot washes to cream, breaks into warm drifting dots, and the dots thin out onto the incoming shot.

What do I need before using Dot Bloom?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.