imgcli

Transitions

Effects that carry one shot into the next — lay them over a cut.

This is the category for the cut itself. A transition paints only its own effect, so it sits on top of both shots: cut between them underneath it, at the frame it covers the screen.

The components

One free Remotion transition, plus 2 in Pro. Each card plays its own default scene — open one for its props, the source file shadcn add writes, and a player you can scrub frame by frame.

Install

Components are installed into your own Remotion project with the shadcn CLI, and the file it writes is yours to edit — there is no Imgcli package to depend on. Set the registry up once, then add components by name:

$ pnpm dlx shadcn@latest add https://imgcli.com/r/dot-bloom.json

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first Imgcli component.

That writes components/imgcli/dot-bloom.tsx. Swap the name for any other component on this page.

Put it on screen

Every prop has a working default, so the component renders as soon as it is mounted — give it a composition and you have a video:

// src/Root.tsximport { Composition } from "remotion";import { DotBloom } from "@/components/imgcli/dot-bloom";export const RemotionRoot = () => (  <Composition    id="DotBloom"    component={DotBloom}    durationInFrames={30}    fps={30}    width={1280}    height={720}  />);

durationInFrames is the length DotBloom is choreographed for — 30 frames at 30 fps. Cut it short and the animation is cut short with it. To use one as a beat inside a longer video, mount it in a <Sequence> of the same length instead of giving it a composition of its own. Each component's page lists its props; they are all plain values, so anything you can compute you can animate.

Next

  • Installation — the one-time registry setup, and the Remotion project it needs.
  • All components — the full gallery, filterable across every category.
  • Agent skill — give a coding agent the Imgcli component index so it picks the right component itself.

Frequently asked questions

How do I add a Remotion transition to a Remotion project?

Every Remotion transition here installs with the shadcn CLI — npx shadcn@latest add https://imgcli.com/r/dot-bloom.json copies Dot Bloom into your project as a file you own, written against the plain Remotion API. There is no runtime package to keep installed.

Are Imgcli's Remotion transitions free?

1 of them are MIT-licensed and free to use commercially; the other 2 are outside the public Registry.

Do I need Remotion to use a Remotion transition?

Yes. Imgcli is a component registry, not a video framework — each component is a React component built on Remotion's useCurrentFrame() and interpolate(), so it renders inside an existing Remotion project.