What is Pellicule?

Pellicule is a Vue-native engine for rendering videos programmatically. Instead of using timeline-based video editors, you write Vue components that describe your video frame by frame.

The Name

Pellicule (pronounced peh-lee-KOOL) comes from the French word for photographic film or film stock.

How It Works

Pellicule uses a fundamentally different approach to video creation:

1. You write a Vue component — Your video is just a .vue file with a frame prop
2. Pellicule renders each frame — It sets frame to 0, captures a screenshot, sets it to 1, captures again, and so on
3. FFmpeg encodes the video — All those frames become an MP4 file

<script setup>
import { computed } from 'vue'
import { useFrame } from 'pellicule'

const frame = useFrame()
const opacity = computed(() => frame.value / 30)
</script>

<template>
  <div class="video">
    <h1 :style="{ opacity }">Hello, Video!</h1>
  </div>
</template>

Your component is a pure function of the frame number. Given the same frame, it produces the same pixels. This is deterministic rendering.

Why Vue fits this model

When Pellicule updates the frame prop, Vue's reactivity system efficiently re-renders only what changed. There's no page reload between frames — just reactive updates. This is why Pellicule can render at 25+ frames per second.

Pellicule vs Remotion

If you've heard of Remotion, you'll find Pellicule familiar. Here's how they compare:

	Pellicule	Remotion
Framework	Vue 3	React
Syntax	Single-file components	JSX
Frame access	useFrame() composable	useCurrentFrame() hook
Config	Zero config	Requires configuration
Rendering	Playwright + FFmpeg	Puppeteer + FFmpeg

Philosophy

Both tools share the same core idea: videos are functions of time. Instead of thinking in keyframes and timelines, you think in terms of:

f(frame) → pixels

The main difference is the ecosystem. Remotion is for React developers. Pellicule is for Vue developers.

Why Vue?

If you already know Vue, the programming model stays familiar:

• Single-file components — Template, script, and styles in one file
• Reactive props — Frame updates trigger efficient re-renders
• Vue ecosystem — Use any Vue library in your videos
• No new rendering model — If you can build a Vue component, you can make a video

When to Use Pellicule

Pellicule is great for:

• Programmatic content — Generate videos from data (charts, dashboards, reports)
• Animated graphics — Motion graphics, explainer videos, intros
• Batch rendering — Generate many variations from templates
• Developer tools — Automate video creation in your pipeline

Pellicule is not for:

• Live video editing — Use a traditional NLE for that
• Real-time playback — Pellicule renders offline
• Non-developers — You need to write Vue code

Architecture

Under the hood, Pellicule:

1. Detects your project's build tool and loads your existing config
2. Starts a dev server with your component (Vite, Rsbuild, or your own server)
3. Opens the page in Playwright (headless Chromium)
4. For each frame, updates the frame number and takes a screenshot
5. Pipes all frames to FFmpeg to encode the final video

The entire pipeline is automated. You just write the component and run the CLI.

Bundler-Agnostic

Pellicule doesn't force you to use a specific build tool. It reads your project's existing config — whether that's vite.config.js, rsbuild.config.js, config/shipwright.js, nuxt.config.ts, or quasar.config.js — and uses the right adapter automatically. Standalone projects with no config work too, using the built-in Vite adapter.

This means Pellicule can use the same aliases, plugins, and component imports as the rest of your app. See Integrations for details.