sailscastshq/pellicule-skills

Overview

This skill helps you create videos and motion graphics using Pellicule, a Vue-native video rendering library. It provides practical guidance, composables, animation helpers, and rendering tips so you can build programmatic videos with Vue components. The focus is on quick setup, scene sequencing, and repeatable animation patterns.

How this skill works

The skill explains how to set up Pellicule and use Vue components as frames in a video timeline. It covers key composables (useFrame, useVideoConfig), macros for zero-config rendering, animation utilities (interpolate, easing, sequence), and a Sequence component for scene management. It also shows CLI rendering options and styling tips for fonts and CSS to ensure consistent output.

When to use it

• You need programmatic videos or motion graphics authored with Vue components.
• You want tight control over frame-by-frame animation in a Vue app.
• You need reusable animation patterns like typewriter, staggered, or looping scenes.
• You want to render videos from Vue code via CLI or automated pipelines.
• You prefer a Remotion-like workflow but built for Vue.

Best practices

• Define video settings centrally with the defineVideoConfig macro to avoid repetition.
• Use useFrame and useVideoConfig to access timing and layout consistently across components.
• Organize complex projects with Sequence and useSequence for clear scene boundaries.
• Prefer composable animation utilities (interpolate, easing) over manual frame math for readable code.
• Keep styling deterministic: embed fonts and use fixed-size containers to avoid layout shifts.

Example use cases

• Create promo videos by composing reusable Vue components for title, product shots, and transitions.
• Produce data-driven animations where frames render based on dynamic datasets and props.
• Build tutorials and narrated sequences where timing and subtitles are synchronized to frames.
• Automate social clips: render multiple variants via CLI for A/B tests or localization.
• Prototype motion design patterns like typewriter text, staggered lists, and looped backgrounds.