Render with Remotion CLI
npx remotion render remotion/index.tsx AppPromo output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
export const AppPromo: React.FC = () => {
const frame = useCurrentFrame();
const mockupScale = interpolate(frame, [20, 60], [0.7, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.1)) });
const ctaOpacity = interpolate(frame, [200, 230], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
return (
<AbsoluteFill style={{ background: "linear-gradient(180deg, #06060c, #0f0e24, #06060c)", fontFamily: "Inter, sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", paddingTop: 80 }}>
<div style={{ fontSize: 72, fontWeight: 900, color: "white", textAlign: "center", marginBottom: 48 }}>
SwiftClip <span style={{ background: "linear-gradient(135deg, #6366f1, #a855f7)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Mobile</span>
</div>App Promo
9:16 mobile app promotional video with phone mockup, floating notification, feature pills, and pulsing download CTA.
Duration10s
Resolution1080 × 1920
Frame rate30 fps
Frames300
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
