; 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from "react"; 2 | import { makeRect } from "@remotion/shapes"; 3 | import { translatePath } from "@remotion/paths"; 4 | 5 | const viewBox = 100; 6 | const lines = 12; 7 | const width = viewBox * 0.08; 8 | 9 | const { path } = makeRect({ 10 | height: viewBox * 0.24, 11 | width, 12 | cornerRadius: width / 2, 13 | }); 14 | 15 | const translated = translatePath(path, viewBox / 2 - width / 2, viewBox * 0.03); 16 | 17 | export const Spinner: React.FC<{ 18 | size: number; 19 | }> = ({ size }) => { 20 | const style = useMemo(() => { 21 | return { 22 | width: size, 23 | height: size, 24 | }; 25 | }, [size]); 26 | 27 | return ( 28 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /src/components/Tips.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Tip: React.FC<{ 4 | title: React.ReactNode; 5 | description: React.ReactNode; 6 | href: string; 7 | }> = ({ title, description, href }) => { 8 | return ( 9 | 10 |

{title}

13 |

14 | 24 |

25 |

26 | {description} 27 |

28 |

29 | 30 | ); 31 | }; 32 | 33 | export const Tips: React.FC = () => { 34 | return ( 35 |

36 | 41 | 46 | 51 |

52 | ); 53 | }; 54 | -------------------------------------------------------------------------------- /src/helpers/api-response.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from "next/server"; 2 | import { z, ZodType } from "zod"; 3 | 4 | export type ApiResponse = 5 | | { 6 | type: "error"; 7 | message: string; 8 | } 9 | | { 10 | type: "success"; 11 | data: Res; 12 | }; 13 | 14 | export const executeApi = 15 | ( 16 | schema: Req, 17 | handler: (req: Request, body: z.infer) => Promise, 18 | ) => 19 | async (req: Request) => { 20 | try { 21 | const payload = await req.json(); 22 | const parsed = schema.parse(payload); 23 | const data = await handler(req, parsed); 24 | return NextResponse.json({ 25 | type: "success", 26 | data: data, 27 | }); 28 | } catch (err) { 29 | return NextResponse.json( 30 | { type: "error", message: (err as Error).message }, 31 | { 32 | status: 500, 33 | }, 34 | ); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /src/helpers/use-rendering.ts: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | import { useCallback, useMemo, useState } from "react"; 3 | import { getProgress, renderVideo } from "../lambda/api"; 4 | import { CompositionProps } from "../../types/constants"; 5 | 6 | export type State = 7 | | { 8 | status: "init"; 9 | } 10 | | { 11 | status: "invoking"; 12 | } 13 | | { 14 | renderId: string; 15 | bucketName: string; 16 | progress: number; 17 | status: "rendering"; 18 | } 19 | | { 20 | renderId: string | null; 21 | status: "error"; 22 | error: Error; 23 | } 24 | | { 25 | url: string; 26 | size: number; 27 | status: "done"; 28 | }; 29 | 30 | const wait = async (milliSeconds: number) => { 31 | await new Promise((resolve) => { 32 | setTimeout(() => { 33 | resolve(); 34 | }, milliSeconds); 35 | }); 36 | }; 37 | 38 | export const useRendering = ( 39 | id: string, 40 | inputProps: z.infer, 41 | ) => { 42 | const [state, setState] = useState({ 43 | status: "init", 44 | }); 45 | 46 | const renderMedia = useCallback(async () => { 47 | setState({ 48 | status: "invoking", 49 | }); 50 | try { 51 | const { renderId, bucketName } = await renderVideo({ id, inputProps }); 52 | setState({ 53 | status: "rendering", 54 | progress: 0, 55 | renderId: renderId, 56 | bucketName: bucketName, 57 | }); 58 | 59 | let pending = true; 60 | 61 | while (pending) { 62 | const result = await getProgress({ 63 | id: renderId, 64 | bucketName: bucketName, 65 | }); 66 | switch (result.type) { 67 | case "error": { 68 | setState({ 69 | status: "error", 70 | renderId: renderId, 71 | error: new Error(result.message), 72 | }); 73 | pending = false; 74 | break; 75 | } 76 | case "done": { 77 | setState({ 78 | size: result.size, 79 | url: result.url, 80 | status: "done", 81 | }); 82 | pending = false; 83 | break; 84 | } 85 | case "progress": { 86 | setState({ 87 | status: "rendering", 88 | bucketName: bucketName, 89 | progress: result.progress, 90 | renderId: renderId, 91 | }); 92 | await wait(1000); 93 | } 94 | } 95 | } 96 | } catch (err) { 97 | setState({ 98 | status: "error", 99 | error: err as Error, 100 | renderId: null, 101 | }); 102 | } 103 | }, [id, inputProps]); 104 | 105 | const undo = useCallback(() => { 106 | setState({ status: "init" }); 107 | }, []); 108 | 109 | return useMemo(() => { 110 | return { 111 | renderMedia, 112 | state, 113 | undo, 114 | }; 115 | }, [renderMedia, state, undo]); 116 | }; 117 | -------------------------------------------------------------------------------- /src/lambda/api.ts: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | import type { RenderMediaOnLambdaOutput } from "@remotion/lambda/client"; 3 | import { 4 | ProgressRequest, 5 | ProgressResponse, 6 | RenderRequest, 7 | } from "../../types/schema"; 8 | import { CompositionProps } from "../../types/constants"; 9 | import { ApiResponse } from "../helpers/api-response"; 10 | 11 | const makeRequest = async ( 12 | endpoint: string, 13 | body: unknown, 14 | ): Promise => { 15 | const result = await fetch(endpoint, { 16 | method: "post", 17 | body: JSON.stringify(body), 18 | headers: { 19 | "content-type": "application/json", 20 | }, 21 | }); 22 | const json = (await result.json()) as ApiResponse; 23 | if (json.type === "error") { 24 | throw new Error(json.message); 25 | } 26 | 27 | return json.data; 28 | }; 29 | 30 | export const renderVideo = async ({ 31 | id, 32 | inputProps, 33 | }: { 34 | id: string; 35 | inputProps: z.infer; 36 | }) => { 37 | const body: z.infer = { 38 | id, 39 | inputProps, 40 | }; 41 | 42 | return makeRequest("/api/lambda/render", body); 43 | }; 44 | 45 | export const getProgress = async ({ 46 | id, 47 | bucketName, 48 | }: { 49 | id: string; 50 | bucketName: string; 51 | }) => { 52 | const body: z.infer = { 53 | id, 54 | bucketName, 55 | }; 56 | 57 | return makeRequest("/api/lambda/progress", body); 58 | }; 59 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /src/remotion/MyComp/Main.tsx: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | import { 3 | AbsoluteFill, 4 | Sequence, 5 | spring, 6 | useCurrentFrame, 7 | useVideoConfig, 8 | } from "remotion"; 9 | import { CompositionProps } from "../../../types/constants"; 10 | import { NextLogo } from "./NextLogo"; 11 | import { loadFont, fontFamily } from "@remotion/google-fonts/Inter"; 12 | import React from "react"; 13 | import { Rings } from "./Rings"; 14 | import { TextFade } from "./TextFade"; 15 | 16 | loadFont("normal", { 17 | subsets: ["latin"], 18 | weights: ["400", "700"], 19 | }); 20 | export const Main = ({ title }: z.infer) => { 21 | const frame = useCurrentFrame(); 22 | const { fps } = useVideoConfig(); 23 | 24 | const transitionStart = 2 * fps; 25 | const transitionDuration = 1 * fps; 26 | 27 | const logoOut = spring({ 28 | fps, 29 | frame, 30 | config: { 31 | damping: 200, 32 | }, 33 | durationInFrames: transitionDuration, 34 | delay: transitionStart, 35 | }); 36 | 37 | return ( 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |

53 | {title} 54 |

55 | 56 | 57 | 58 | ); 59 | }; 60 | -------------------------------------------------------------------------------- /src/remotion/MyComp/NextLogo.tsx: -------------------------------------------------------------------------------- 1 | import { evolvePath } from "@remotion/paths"; 2 | import React, { useMemo } from "react"; 3 | import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"; 4 | 5 | const nStroke = 6 | "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"; 7 | 8 | export const NextLogo: React.FC<{ 9 | outProgress: number; 10 | }> = ({ outProgress }) => { 11 | const { fps } = useVideoConfig(); 12 | const frame = useCurrentFrame(); 13 | 14 | const evolve1 = spring({ 15 | fps, 16 | frame, 17 | config: { 18 | damping: 200, 19 | }, 20 | }); 21 | const evolve2 = spring({ 22 | fps, 23 | frame: frame - 15, 24 | config: { 25 | damping: 200, 26 | }, 27 | }); 28 | const evolve3 = spring({ 29 | fps, 30 | frame: frame - 30, 31 | config: { 32 | damping: 200, 33 | mass: 3, 34 | }, 35 | durationInFrames: 30, 36 | }); 37 | 38 | const style: React.CSSProperties = useMemo(() => { 39 | return { 40 | height: 140, 41 | borderRadius: 70, 42 | scale: String(1 - outProgress), 43 | }; 44 | }, [outProgress]); 45 | 46 | const firstPath = `M 60.0568 54 v 71.97`; 47 | const secondPath = `M 63.47956 56.17496 L 144.7535 161.1825`; 48 | const thirdPath = `M 121 54 L 121 126`; 49 | 50 | const evolution1 = evolvePath(evolve1, firstPath); 51 | const evolution2 = evolvePath(evolve2, secondPath); 52 | const evolution3 = evolvePath( 53 | interpolate(evolve3, [0, 1], [0, 0.7]), 54 | thirdPath, 55 | ); 56 | 57 | return ( 58 | 121 | ); 122 | }; 123 | -------------------------------------------------------------------------------- /src/remotion/MyComp/Rings.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AbsoluteFill, interpolateColors, useVideoConfig } from "remotion"; 3 | 4 | const RadialGradient: React.FC<{ 5 | radius: number; 6 | color: string; 7 | }> = ({ radius, color }) => { 8 | const height = radius * 2; 9 | const width = radius * 2; 10 | 11 | return ( 12 | 18 |

26 | 27 | ); 28 | }; 29 | 30 | export const Rings: React.FC<{ 31 | outProgress: number; 32 | }> = ({ outProgress }) => { 33 | const scale = 1 / (1 - outProgress); 34 | const { height } = useVideoConfig(); 35 | 36 | return ( 37 | 42 | {new Array(5) 43 | .fill(true) 44 | .map((_, i) => { 45 | return ( 46 | 51 | ); 52 | }) 53 | .reverse()} 54 | 55 | ); 56 | }; 57 | -------------------------------------------------------------------------------- /src/remotion/MyComp/TextFade.tsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from "react"; 2 | import { 3 | AbsoluteFill, 4 | interpolate, 5 | spring, 6 | useCurrentFrame, 7 | useVideoConfig, 8 | } from "remotion"; 9 | 10 | export const TextFade: React.FC<{ 11 | children: React.ReactNode; 12 | }> = ({ children }) => { 13 | const { fps } = useVideoConfig(); 14 | const frame = useCurrentFrame(); 15 | 16 | const progress = spring({ 17 | fps, 18 | frame, 19 | config: { 20 | damping: 200, 21 | }, 22 | durationInFrames: 80, 23 | }); 24 | 25 | const rightStop = interpolate(progress, [0, 1], [200, 0]); 26 | 27 | const leftStop = Math.max(0, rightStop - 60); 28 | 29 | const maskImage = `linear-gradient(-45deg, transparent ${leftStop}%, black ${rightStop}%)`; 30 | 31 | const content: React.CSSProperties = useMemo(() => { 32 | return { 33 | maskImage, 34 | WebkitMaskImage: maskImage, 35 | }; 36 | }, [maskImage]); 37 | 38 | return ( 39 | 40 | 41 |

{children}

42 | 43 | 44 | ); 45 | }; 46 | -------------------------------------------------------------------------------- /src/remotion/Root.tsx: -------------------------------------------------------------------------------- 1 | import { Composition } from "remotion"; 2 | import { Main } from "./MyComp/Main"; 3 | import { 4 | COMP_NAME, 5 | defaultMyCompProps, 6 | DURATION_IN_FRAMES, 7 | VIDEO_FPS, 8 | VIDEO_HEIGHT, 9 | VIDEO_WIDTH, 10 | } from "../../types/constants"; 11 | import { NextLogo } from "./MyComp/NextLogo"; 12 | 13 | export const RemotionRoot: React.FC = () => { 14 | return ( 15 | <> 16 | 25 | 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /src/remotion/index.ts: -------------------------------------------------------------------------------- 1 | import { registerRoot } from "remotion"; 2 | import { RemotionRoot } from "./Root"; 3 | import "../../styles/global.css"; 4 | 5 | registerRoot(RemotionRoot); 6 | -------------------------------------------------------------------------------- /src/remotion/webpack-override.mjs: -------------------------------------------------------------------------------- 1 | import { enableTailwind } from "@remotion/tailwind-v4"; 2 | 3 | /** 4 | * @param {import('webpack').Configuration} currentConfig 5 | */ 6 | export const webpackOverride = (currentConfig) => { 7 | return enableTailwind(currentConfig); 8 | }; 9 | -------------------------------------------------------------------------------- /styles/global.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | :root { 4 | --background: #fff; 5 | --foreground: #000; 6 | --unfocused-border-color: #eaeaea; 7 | --focused-border-color: #666; 8 | 9 | --button-disabled-color: #fafafa; 10 | --disabled-text-color: #999; 11 | 12 | --geist-border-radius: 5px; 13 | --geist-quarter-pad: 6px; 14 | --geist-half-pad: 12px; 15 | --geist-pad: 24px; 16 | --geist-font: "Inter"; 17 | 18 | --geist-error: #e00; 19 | 20 | --subtitle: #666; 21 | } 22 | 23 | @media (prefers-color-scheme: dark) { 24 | :root { 25 | --background: #000000; 26 | --unfocused-border-color: #333; 27 | --focused-border-color: #888; 28 | --foreground: #fff; 29 | --button-disabled-color: #111; 30 | --geist-error: red; 31 | --subtitle: #8d8d8d; 32 | } 33 | } 34 | 35 | @theme { 36 | --color-foreground: var(--foreground); 37 | --color-background: var(--background); 38 | --color-unfocused-border-color: var(--unfocused-border-color); 39 | --color-focused-border-color: var(--focused-border-color); 40 | --color-button-disabled-color: var(--button-disabled-color); 41 | --color-disabled-text-color: var(--disabled-text-color); 42 | --color-geist-error: var(--geist-error); 43 | --color-subtitle: var(--subtitle); 44 | --padding-geist-quarter: var(--geist-quarter-pad); 45 | --padding-geist-half: var(--geist-half-pad); 46 | --padding-geist: var(--geist-pad); 47 | --spacing-geist: var(--geist-pad); 48 | --spacing-geist-half: var(--geist-half-pad); 49 | --spacing-geist-quarter: var(--geist-quarter-pad); 50 | --radius-geist: var(--geist-border-radius); 51 | --font-geist: var(--geist-font); 52 | --animate-spinner: spinner 1.2s linear infinite; 53 | 54 | @keyframes spinner { 55 | 0% { 56 | opacity: 1; 57 | } 58 | 100% { 59 | opacity: 0.15; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve", 20 | "noUnusedLocals": true, 21 | "plugins": [ 22 | { 23 | "name": "next" 24 | } 25 | ], 26 | "incremental": true 27 | }, 28 | "include": [ 29 | "next-env.d.ts", 30 | "**/*.ts", 31 | "**/*.tsx", 32 | ".next/types/**/*.ts", 33 | "remotion/webpack-override.mjs" 34 | ], 35 | "exclude": [ 36 | "node_modules", 37 | "remotion.config.ts" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /types/constants.ts: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | export const COMP_NAME = "MyComp"; 3 | 4 | export const CompositionProps = z.object({ 5 | title: z.string(), 6 | }); 7 | 8 | export const defaultMyCompProps: z.infer = { 9 | title: "Next.js and Remotion", 10 | }; 11 | 12 | export const DURATION_IN_FRAMES = 200; 13 | export const VIDEO_WIDTH = 1280; 14 | export const VIDEO_HEIGHT = 720; 15 | export const VIDEO_FPS = 30; 16 | -------------------------------------------------------------------------------- /types/schema.ts: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | import { CompositionProps } from "./constants"; 3 | 4 | export const RenderRequest = z.object({ 5 | id: z.string(), 6 | inputProps: CompositionProps, 7 | }); 8 | 9 | export const ProgressRequest = z.object({ 10 | bucketName: z.string(), 11 | id: z.string(), 12 | }); 13 | 14 | export type ProgressResponse = 15 | | { 16 | type: "error"; 17 | message: string; 18 | } 19 | | { 20 | type: "progress"; 21 | progress: number; 22 | } 23 | | { 24 | type: "done"; 25 | url: string; 26 | size: number; 27 | }; 28 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "buildCommand": "node deploy.mjs && next build" 3 | } 4 | --------------------------------------------------------------------------------