import { AbsoluteFill, Img, useVideoConfig, useCurrentFrame, interpolate, Easing, spring, } from 'remotion'; import {loadFont} from '@remotion/google-fonts/Inter'; const {fontFamily: interFontFamily} = loadFont('normal', { weights: ['400', '600', '700'], subsets: ['latin'], }); export const DesktopMockup = ({ imageSrc, aspectRatio, }: { imageSrc: string; aspectRatio: number; }) => { const {fps} = useVideoConfig(); const frame = useCurrentFrame(); const scale = spring({ fps, frame, config: { damping: 200, }, from: 0.8, to: 1, }); const opacity = interpolate(frame, [0, 20], [0, 1]); const mockupWidth = 1100; const mockupHeaderHeight = 48; const mockupHeight = mockupWidth / aspectRatio + mockupHeaderHeight; return (

); }; export const TutorialScene = ({ imageSrc, step, title, description, aspectRatio, }: { imageSrc: string; step: string; title: string; description: string; aspectRatio: number; }) => { const frame = useCurrentFrame(); const textDelay = 20; const stepOpacity = interpolate(frame, [textDelay, textDelay + 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const stepY = interpolate(frame, [textDelay, textDelay + 20], [20, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const titleOpacity = interpolate( frame, [textDelay + 10, textDelay + 30], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }, ); const titleY = interpolate( frame, [textDelay + 10, textDelay + 30], [20, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }, ); const descOpacity = interpolate( frame, [textDelay + 20, textDelay + 40], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }, ); const descY = interpolate( frame, [textDelay + 20, textDelay + 40], [20, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }, ); return (

Step {step}

{title}

{description}

); };

Airbnb App Demo Tutorial