remotion
installsforks
How to install remotion?
calesthio/openmontage/remotion
$npx -y skills add calesthio/OpenMontage --skill remotionToolkit-specific Remotion patterns — custom transitions, shared components, and project conventions. For core Remotion framework knowledge (hooks, animations, rendering, etc.), see the remotion-official skill.
SKILL.md
| 1 | # Remotion — Toolkit Extensions |
| 2 | |
| 3 | > **Core Remotion knowledge** lives in `.claude/skills/remotion-official/` (synced from the official [remotion-dev/skills](https://github.com/remotion-dev/skills) repo). This file covers **toolkit-specific** patterns only. |
| 4 | |
| 5 | ## Shared Components |
| 6 | |
| 7 | Reusable video components in `lib/components/`. Import in templates via: |
| 8 | |
| 9 | ```tsx |
| 10 | import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components'; |
| 11 | ``` |
| 12 | |
| 13 | | Component | Purpose | |
| 14 | |-----------|---------| |
| 15 | | `AnimatedBackground` | Floating shapes background (variants: subtle, tech, warm, dark) | |
| 16 | | `SlideTransition` | Scene transitions (fade, zoom, slide-up, blur-fade) | |
| 17 | | `Label` | Floating label badge with optional JIRA reference | |
| 18 | | `Vignette` | Cinematic edge darkening overlay | |
| 19 | | `LogoWatermark` | Corner logo branding | |
| 20 | | `SplitScreen` | Side-by-side video comparison | |
| 21 | | `NarratorPiP` | Picture-in-picture presenter overlay | |
| 22 | | `Envelope` | 3D envelope with opening flap animation | |
| 23 | | `PointingHand` | Animated hand emoji with slide-in and pulse | |
| 24 | | `MazeDecoration` | Animated isometric grid decoration for corners | |
| 25 | |
| 26 | ## Custom Transitions |
| 27 | |
| 28 | The toolkit includes a transitions library at `lib/transitions/` for scene-to-scene effects beyond the official `@remotion/transitions` package. |
| 29 | |
| 30 | ### Using TransitionSeries |
| 31 | |
| 32 | ```tsx |
| 33 | import { TransitionSeries, linearTiming } from '@remotion/transitions'; |
| 34 | // Import custom transitions from lib (adjust path based on your project location) |
| 35 | import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions'; |
| 36 | // Or import from @remotion/transitions for official ones |
| 37 | import { slide, fade } from '@remotion/transitions/slide'; |
| 38 | |
| 39 | <TransitionSeries> |
| 40 | <TransitionSeries.Sequence durationInFrames={90}> |
| 41 | <TitleSlide /> |
| 42 | </TransitionSeries.Sequence> |
| 43 | <TransitionSeries.Transition |
| 44 | presentation={glitch({ intensity: 0.8 })} |
| 45 | timing={linearTiming({ durationInFrames: 30 })} |
| 46 | /> |
| 47 | <TransitionSeries.Sequence durationInFrames={120}> |
| 48 | <ContentSlide /> |
| 49 | </TransitionSeries.Sequence> |
| 50 | </TransitionSeries> |
| 51 | ``` |
| 52 | |
| 53 | ### Available Custom Transitions |
| 54 | |
| 55 | | Transition | Options | Best For | |
| 56 | |------------|---------|----------| |
| 57 | | `glitch()` | `intensity`, `slices`, `rgbShift` | Tech demos, edgy reveals, cyberpunk | |
| 58 | | `rgbSplit()` | `direction`, `displacement` | Modern tech, energetic transitions | |
| 59 | | `zoomBlur()` | `direction`, `blurAmount` | CTAs, high-energy moments, impact | |
| 60 | | `lightLeak()` | `temperature`, `direction` | Celebrations, film aesthetic, warm moments | |
| 61 | | `clockWipe()` | `startAngle`, `direction`, `segments` | Time-related content, playful reveals | |
| 62 | | `pixelate()` | `maxBlockSize`, `gridSize`, `scanlines`, `glitchArtifacts`, `randomness` | Retro/gaming, digital transformations | |
| 63 | | `checkerboard()` | `gridSize`, `pattern`, `stagger`, `squareAnimation` | Playful reveals, structured transitions | |
| 64 | |
| 65 | **Checkerboard patterns:** `sequential`, `random`, `diagonal`, `alternating`, `spiral`, `rows`, `columns`, `center-out`, `corners-in` |
| 66 | |
| 67 | ### Transition Examples |
| 68 | |
| 69 | ```tsx |
| 70 | // Tech/cyberpunk feel |
| 71 | glitch({ intensity: 0.8, slices: 8, rgbShift: true }) |
| 72 | |
| 73 | // Warm celebration |
| 74 | lightLeak({ temperature: 'warm', direction: 'right' }) |
| 75 | |
| 76 | // High energy zoom |
| 77 | zoomBlur({ direction: 'in', blurAmount: 20 }) |
| 78 | |
| 79 | // Chromatic aberration |
| 80 | rgbSplit({ direction: 'diagonal', displacement: 30 }) |
| 81 | |
| 82 | // Clock sweep reveal |
| 83 | clockWipe({ direction: 'clockwise', startAngle: 0 }) |
| 84 | |
| 85 | // Retro pixelation |
| 86 | pixelate({ maxBlockSize: 50, glitchArtifacts: true }) |
| 87 | |
| 88 | // Checkerboard patterns |
| 89 | checkerboard({ pattern: 'diagonal', gridSize: 8 }) |
| 90 | checkerboard({ pattern: 'spiral', gridSize: 10 }) |
| 91 | checkerboard({ pattern: 'center-out', squareAnimation: 'scale' }) |
| 92 | ``` |
| 93 | |
| 94 | ### Transition Duration Guidelines |
| 95 | |
| 96 | | Type | Frames | Notes | |
| 97 | |------|--------|-------| |
| 98 | | Quick cut | 15-20 | Fast, punchy | |
| 99 | | Standard | 30-45 | Most common | |
| 100 | | Dramatic | 50-60 | Slow reveals | |
| 101 | | Glitch effects | 20-30 | Should feel sudden | |
| 102 | | Light leak | 45-60 | Needs time to sweep | |
| 103 | |
| 104 | ### Preview Transitions |
| 105 | |
| 106 | Run the showcase gallery to see all transitions: |
| 107 | |
| 108 | ```bash |
| 109 | cd showcase/transitions && npm run studio |
| 110 | ``` |
| 111 | |
| 112 | ## Toolkit Best Practices |
| 113 | |
| 114 | 1. **Frame-based animations only** — Avoid CSS transitions/animations; they cause flickering during render |
| 115 | 2. **Use fps from useVideoConfig()** — Make animations frame-rate independent |
| 116 | 3. **Clamp interpolations** — Use `extrapolateRight: 'clamp'` to prevent runaway values |
| 117 | 4. **Use OffthreadVideo** — Better performance than `<Video>` for complex compositions |
| 118 | 5. **delayRender for async** — Always block rendering until data is ready |
| 119 | 6. **staticFile for assets** — Reference files from `public/` folder correctly |
| 120 | 7. **All projects use 30fps** — Timing: frames = seconds × 30 |
| 121 | 8. **playbackRate must be constant** |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
