Introduction
SwiftClip is a curated library of production-ready Remotion video templates written entirely in React and TypeScript.
Instead of dragging keyframes in After Effects or Premiere, you write React components. Remotion maps every frame of your video to a point in time, so you can use useCurrentFrame() to drive any CSS property, SVG attribute, or Canvas draw call with frame-perfect precision.
SwiftClip packages the best-practice patterns on top of Remotion into copy-paste compositions. Each template is a single .tsx file with fully typed props — no configuration required beyond dropping it into your remotion/ folder.
Why code over a timeline?
🔀 Version Control
Every keyframe change is a Git commit. Review, revert, and diff animations like any other code.
⚡ Dynamic Data
Pass a JSON payload at render time to generate hundreds of personalised videos from a single template.
♻️ Reusability
Build a <LowerThird> component once and import it across every composition in your library.
🚀 Performance
Remotion parallelises rendering across all CPU cores. A 30-second 4K video renders in seconds on modern hardware.
🧩 Full Web Stack
Anything that runs in a browser — CSS animations, SVG, WebGL, Lottie, charts — works inside a Remotion composition.
🔗 CI/CD Ready
Render videos headlessly in GitHub Actions, Docker, or any Node.js environment.
How Remotion works
Remotion uses the concept of a "current frame". When you call useCurrentFrame() inside a component, Remotion passes a different integer on every render pass — from 0 to durationInFrames - 1. FFmpeg then stitches all those frames into a video file.
import { useCurrentFrame, interpolate } from 'remotion';
export function FadeIn() {
const frame = useCurrentFrame();
// Interpolate opacity from 0→1 over the first 20 frames
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <div style={{ opacity }}>Hello, Remotion!</div>;
}