import { useCurrentFrame, useVideoConfig, interpolate, spring, AbsoluteFill, Sequence, Audio, } from "remotion"; // ---- Audio ---- const BGM_URL = "https://cdn.freesound.org/previews/612/612095_5674468-lq.mp3"; // ---- Config ---- const WORD = "Ephemeral"; const PRONUNCIATION = "/ɪˈfem.ər.əl/"; const MEANING_EN = "Lasting for a very short time"; const MEANING_JP = "はかない、つかの間の"; const EXAMPLE = "The ephemeral beauty of cherry blossoms."; // ---- Helpers ---- const FadeSlideIn: React.FC<{ children: React.ReactNode; direction?: "up" | "down"; }> = ({ children, direction = "up" }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const progress = spring({ frame, fps, config: { damping: 200 } }); const y = direction === "up" ? 1 : -1; const translateY = interpolate(progress, [0, 1], [40 * y, 0]); return (

{children}

); }; // ---- Scene: Title ---- const TitleScene = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 15, stiffness: 120 } }); const tagOpacity = interpolate(frame, [0.8 * fps, 1.2 * fps], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); return (

WORD OF THE DAY

{WORD}

{PRONUNCIATION}

); }; // ---- Scene: Meaning ---- const MeaningScene = () => { return (

MEANING

{MEANING_EN}

{MEANING_JP}

); }; // ---- Scene: Example with typewriter ---- const ExampleScene = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const charFrames = 2; const typedLen = Math.min(EXAMPLE.length, Math.floor(frame / charFrames)); const typedText = EXAMPLE.slice(0, typedLen); const cursorOpacity = interpolate( frame % (fps * 0.5), [0, fps * 0.25, fps * 0.5], [1, 0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const highlightProgress = interpolate( frame, [EXAMPLE.indexOf("ephemeral") * charFrames, (EXAMPLE.indexOf("ephemeral") + 9) * charFrames + fps * 0.3], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const parts = typedText.split(/(ephemeral)/i); return (

EXAMPLE

" {parts.map((part, i) => part.toLowerCase() === "ephemeral" ? ( 0.5 ? "#fbbf24" : "transparent", }} > {part} ) : ( {part} ) )} | "

); }; // ---- Scene: Outro ---- const OutroScene = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const progress = spring({ frame, fps, config: { damping: 200 } }); return (

{WORD}

{MEANING_EN}

LEARN A NEW WORD EVERY DAY

); }; // ---- Main Composition ---- export const MyComposition = () => { const { fps } = useVideoConfig(); return (

); };