Does remotion-bits auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is remotion-bits free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Video & Audio

Plugin

remotion-bits

Ready-made animated components for Remotion — charts, transitions, text reveals, and more

FLOW.md

av@av

GitHub

Plugin Signal45/100Fair

maintained34

capable14

documented100

adopted56

Install

$ npx -y skills add av/remotion-bits --agent claude-code

Stats

TypeScript JavaScript Node React Bash

+4 tags

Git GitHub Vitest MCP

444

Stars

Forks

Maintained

Maintenance

TypeScript

Language

5mo ago

Last commit

6mo ago

Created

Repo: av/remotion-bits

In this plugin

1 skill

- remotion-bits

See everything inside

What's inside

Skill(1 skill)

/remotion-bitsAnimation components and utilities for Remotion video projects. Use when building Remotion compositions with text animations, gradient transitions, particle effects, 3D scenes, or staggered motion effects. Provides example bits (complete compositions) and reusable components

README

Read on GitHub

https://github.com/user-attachments/assets/2a5760fe-1886-4490-9c2b-aceec24aff2f

Gallery

Visitors

Remotion Bits is a comprehensive collection of animation components and utilities designed specifically for Remotion video projects. It provides ready-made, composable components for common animation needs: text effects, gradient transitions, particle systems, 3D scenes, and more. It also includes lower-level utilities for advanced motion and color handling.

[!NOTE] This project is not affiliated with or endorsed by the Remotion team.

Installation

npm install remotion-bits

Install the package when you want to consume Remotion Bits components inside a Remotion project. If you want to discover bits, run the MCP server, or pull individual bits into your app, start with the single-step usage paths below.

Single-Step Usage

All published entry points use the same package name: remotion-bits.

CLI

Use the published CLI directly without installing it first:

npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json

Or install the bin globally:

npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json

MCP

Start the MCP server on stdio without a prior install:

npx remotion-bits mcp

Or use the global bin:

remotion-bits mcp

Minimal MCP client config:

{
	"command": "npx",
	"args": ["-y", "remotion-bits", "mcp"]
}

If you installed the package globally, use:

{
	"command": "remotion-bits",
	"args": ["mcp"]
}

The server exposes two tools:

find_remotion_bits
fetch_remotion_bit

Package

Use the package install when you want to import components and utilities into a Remotion project:

npm install remotion-bits

import { AnimatedText, GradientTransition } from 'remotion-bits';

jsrepo

Pull a bit into your project in one step:

npx jsrepo add --registry https://unpkg.com/remotion-bits/registry.json animated-text

Optional init flow if you plan to add multiple items:

npx jsrepo init https://unpkg.com/remotion-bits/registry.json
npx jsrepo add animated-text

Skill

This repository ships a skill file at skills/remotion-bits/SKILL.md.

Use that skill in an agent setup that supports custom skills, then point it at the published Remotion Bits entry points above. The skill does not automatically install anything by itself; it documents the workflow and relies on the MCP or CLI commands shown here.

Consumer Usage

Find and fetch published bits

Search by visual goal, tags, and output format:

npx remotion-bits find "camera presentation" --tag scene-3d --limit 2
npx remotion-bits find "fade in" --limit 1 --json
npx remotion-bits fetch bit-fade-in --json

Install with jsrepo

The registry is published as a jsrepo registry at:

https://unpkg.com/remotion-bits/registry.json

One-off add without init:

npx jsrepo add --registry https://unpkg.com/remotion-bits/registry.json animated-text
npx jsrepo add --registry https://unpkg.com/remotion-bits/registry.json particle-system

After jsrepo init, add components or utilities by name:

npx jsrepo add animated-text
npx jsrepo add particle-system
npx jsrepo add color

Use as a package in a Remotion project

Install the package if you want to keep using the published components directly instead of copying them into your app:

npm install remotion-bits

You will also need the Remotion peer dependencies in your project: React 18+, React DOM 18+, and Remotion 4+.

Repo-Local Development

Use the repo-local commands below only when working inside this repository.

Prerequisites:

Git
Node.js 18 or newer
npm that ships with your Node install

Fresh clone bootstrap:

git clone https://github.com/av/remotion-bits.git
cd remotion-bits
npm install

Lookup CLI from the repo root:

npm run bits:find -- --query "camera presentation" --tag scene-3d --limit 2
npm run bits:find -- --query "fade in" --limit 1 --json
npm run bits:fetch -- bit-fade-in --json

MCP server from the repo root:

npm run mcp:bits

Equivalent repo-local client config:

{
	"command": "node",
	"args": ["./node_modules/tsx/dist/cli.mjs", "scripts/remotion-bits-mcp.ts"],
	"cwd": "/absolute/path/to/remotion-bits"
}

Use the repo root as cwd. The server is stdio-only and should be attached directly, not through npm run, so stdout stays reserved for MCP protocol messages.

Reproducible repo-side MCP verification without inventing a separate client:

npx vitest run scripts/__tests__/remotion-bits-mcp.test.ts

That test starts the stdio server, verifies the tool list contains exactly find_remotion_bits and fetch_remotion_bit, then calls both tools through a real MCP client.

If you want your own MCP client config after verifying the repo flow, use:

{
	"command": "node",
	"args": ["./node_modules/tsx/dist/cli.mjs", "scripts/remotion-bits-mcp.ts"],
	"cwd": "/absolute/path/to/remotion-bits"
}

Fallback path when MCP is unavailable:

npm run bits:find -- --query "camera presentation" --tag scene-3d --limit 2
npm run bits:fetch -- bit-fade-in

Catalog parity and live-source verification

Verify that the docs catalog, CLI lookup, and MCP lookup all use the same shared catalog:

npx vitest run docs/src/bits/__tests__/catalog.test.ts scripts/__tests__/remotion-bits-lookup.test.ts scripts/__tests__/remotion-bits-mcp.test.ts

What this covers:

docs catalog items, tags, order, and totals are derived from the shared catalog
CLI find and fetch return deterministic results from that same catalog
MCP find_remotion_bits and fetch_remotion_bit return results from that same catalog

Verify live-source behavior directly from the repo:

npm run bits:fetch -- bit-fade-in --json

The JSON output should include:

sourcePath under docs/src/bits/examples/...
sourceCode loaded from that file at runtime

Packaging parity is a separate release concern. If you need to refresh the jsrepo extraction artifact, run:

npm run registry:extract

This updates extracted-bits.json. The runtime lookup path used by docs, CLI, and MCP does not depend on that file.

Contributing

Fork the repo and create your branch from main.
Make changes with clear commit messages.
Ensure the build and tests (if any) pass.
Open a pull request describing your changes.

License

MIT

File tree

av/remotion-bitsView on GitHub

.github/
  skills/
    release/
      SKILL.md
.gitignore
.npmignore
.oxfmt.json
.oxlintrc.json
AGENTS.md
CHANGELOG.md
CLAUDE.md
COMPAL_LOG.md
demo/
  .gitignore
  package-lock.json
  package.json
  public/
    index.html
  README.md
  remotion.config.ts
  src/
    index.tsx
    Root.tsx
    showcases/
      BackgroundTransitionShowcase.tsx
      BackgroundTransitionShowcaseItem.tsx
      Center.tsx
      index.ts
      MotionTransitionShowcase.tsx
      ParticlesShowcase.tsx
      TextTransitionShowcase.tsx
      TextTransitionShowcaseItem.tsx
  tsconfig.json
docs/
  .gitignore
  astro.config.mjs
  package-lock.json
  package.json
  public/
    favicon.svg
    gallery.png
    logo.svg
    splash.png
    suggestion.png
  README.md
  src/
    assets/
      houston.webp
    bits/
      __tests__/
        catalog.test.ts
        source-resolution.test.ts
      catalog-manifest.ts
      catalog.ts
      contracts.ts
      examples/
        animated-counter/
          BasicCounter.tsx
          CounterConfetti.tsx
        animated-text/
          BlurSlideWord.tsx
          CharByChar.tsx
          FadeIn.tsx
          GlitchCycle.tsx
          GlitchIn.tsx
          MatrixRain.tsx
          WordByWord.tsx
        code-block/
          BasicCodeBlock.tsx
          TypingCodeBlock.tsx
        gradient-transition/
          ConicGradient.tsx
          LinearGradient.tsx
          RadialGradient.tsx
        particle-system/
          Fireflies.tsx
          ParticlesFountain.tsx
          ParticlesGrid.tsx
          ParticlesSnow.tsx
          ScrollingColumns.tsx
        scene-3d/
          3DBasic.tsx
          3DElements.tsx
          Carousel.tsx
          CubeNavigation.tsx
          CursorFlyover.tsx
          FlyingThroughWords.tsx
          KenBurns.tsx
          StepTimingContext.tsx
          Terminal3D.tsx
          Transform3DShowcase.tsx
        showcase/
          FeatureShowcase.tsx
        staggered-motion/
          CardStack.tsx
          EasingsVisualizer.tsx
          FractureReassemble.tsx
          GridStagger.tsx
          ListReveal.tsx
          MosaicReframe.tsx
          SlideFromLeft.tsx
          StaggeredFadeIn.tsx
        typewriter/
          BasicTypewriter.tsx
          CLISimulation.tsx
          MultiTextTypewriter.tsx
          VariableSpeedTypewriter.tsx
      index.ts
      source-resolution.ts
    components/
      BentoCard.astro
      BitPlayground.tsx
      BitsCatalog.astro
      BitsCatalog.tsx
      ComponentBitsShowcase.tsx
      HomeShowcase.tsx
      Logo.astro
      ShowcasePlayer.tsx
      showcases/
        BackgroundTransitionShowcaseItem.tsx
        Center.tsx
        HeroShowcase.tsx
        MotionPrimitivesCardIcon.tsx
        ParticlesCardShowcase.tsx
        ParticlesShowcase.tsx
        TextTransitionShowcase.tsx
        TextTransitionShowcaseItem.tsx
    content/
    content.config.ts
      docs/
        bits/
        bits-catalog.mdx
          3d-carousel.mdx
          3d-elements.mdx
          animated-counter.mdx
          basic-3d.mdx
          basic-typewriter.mdx
          blur-slide-word.mdx
          card-stack.mdx
          char-by-char.mdx
          cli-simulation.mdx
          code-block.mdx
          conic-gradient.mdx
          counter-confetti.mdx
          cube-navigation-3d.mdx
          cursor-flyover.mdx
          easings-visualizer.mdx
          fade-in.mdx
          fireflies.mdx
          flying-through-words.mdx
          fracture-reassemble.mdx
          glitch-cycle.mdx
          glitch-in.mdx
          grid-stagger.mdx
          ken-burns.mdx
          linear-gradient.mdx
          list-reveal.mdx
          matrix-text-effect.mdx
          mosaic-reframe.mdx
          multitext-typewriter.mdx
          particles-fountain.mdx
          particles-grid.mdx
          particles-snow.mdx
          radial-gradient.mdx
          remotion-bits.mdx
          scrolling-columns.mdx
          slide-from-left.mdx
          terminal-3d.mdx
          transform3d-showcase.mdx
          typing-code-block.mdx
          variable-speed-typewriter.mdx
          word-by-word.mdx
        getting-started.mdx
        reference/
          animated-text.mdx
          element3d.mdx
          gradient-transition.mdx
          particle-system.mdx
          scene3d.mdx
          staggered-motion.mdx
          step.mdx
          transform3d.mdx
          typewriter.mdx
          use-active-step.mdx
          use-camera.mdx
          use-scene3d.mdx
          use-viewport-rect.mdx
          utils-geometry.mdx
          utils-interpolation.mdx
          utils-motion.mdx
          utils-random.mdx
    lib/
      editor-theme.ts
      utils.ts
    pages/
      docs/
        [...slug].astro
      index.astro
    styles/
      custom.css
      global.css
      starlight-tailwind.css
  tsconfig.json
eslint.config.js
jsrepo.config.ts
package-lock.json
package.json
README.md
registry.json
scripts/
  __tests__/
    published-package.test.ts
    remotion-bits-lookup.test.ts
    remotion-bits-mcp.test.ts
  add-extensions.ts
  deploy-docs.sh
  extract-bit-registry.ts
  generate-shared-bit-inventory.ts
  remotion-bits-lookup.ts
  remotion-bits-mcp.ts
skills/
  remotion-bits/
    references/
      components.md
      patterns.md
      utilities.md
    SKILL.md
src/
  bin/
    remotion-bits.ts
  bits.config.ts
  catalog/
    __tests__/
      runtime-catalog.test.ts
    contracts.ts
    inventory.generated.json
    inventory.generated.ts
    runtime.ts
    shared.ts
  cli/
    remotion-bits.ts
  components/
    __tests__/
      AnimatedCounter.test.tsx
      AnimatedText.test.tsx
      GradientTransition.test.tsx
      Scene3D.test.tsx
      StaggeredMotion.test.tsx
      StepResponsive.test.tsx
    AnimatedCounter.tsx
    AnimatedText.tsx
    CodeBlock.tsx
    GradientTransition.tsx
    index.ts
    MatrixRain.tsx
    ParticleSystem/
      Behavior.tsx
      index.ts
      Particles.tsx
      Spawner.tsx
    Scene3D/
      context.ts
      Element3D.tsx
      index.ts
      Scene3D.tsx
      Step.tsx
      StepResponsive.tsx
      types.ts
    ScrollingImages.tsx
    StaggeredMotion.tsx
    TypeWriter.tsx
  culori.d.ts
  hooks/
    index.ts
    useViewportRect.ts
  index.ts
  mcp/
    remotion-bits.ts
  utils/
    __tests__/
      color.test.ts
      geometry3d.test.ts
      gradient.test.ts
      interpolate.test.ts
      interpolate3d.test.ts
      radial-position.test.ts
      random.test.ts
      transform3d.test.ts
    color.ts
    geometry.ts
    gradient.ts
    index.ts
    interpolate.ts
    interpolate3d.ts
    motion/
      index.ts
    particles/
      __tests__/
        behaviors-variance.test.ts
        simulator.test.ts
      behaviors.ts
      index.ts
      simulator.ts
      types.ts
    random.ts
    StepContext.ts
    transform3d.ts
tsconfig.json
vitest.config.ts
vitest.setup.ts

More Flows by @av.

VerifiedPlugin

Development

facts

Antidote for fluffy specs, a toolkit for fact-driven development with AI agents

8 skills

@av

View Plugin

FAQ

remotion-bits is a Claude Code plugin with 1 hand-picked skill for video & audio work, indexed on Flowy. Install it with the command on its page. It includes remotion-bits. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is remotion-bits?: Ready-made animated components for Remotion — charts, transitions, text reveals, and more
How do I install remotion-bits?: Run these in Claude Code: npx -y skills add av/remotion-bits --agent claude-code. Then prompt normally.
Does remotion-bits auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is remotion-bits free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.