import React from 'react'; import { useCurrentFrame, interpolate, useVideoConfig, Easing } from 'remotion'; export const Bird: React.FC = () => { const frame = useCurrentFrame(); const { width, height } = useVideoConfig(); // Bird flapping animation const flapCycle = frame % 20; const flapRotation = interpolate(flapCycle, [0, 10, 20], [-8, 8, -8], { easing: Easing.inOut(Easing.ease) }); // Exact pipe data (matching Pipes.tsx exactly) const scrollSpeed = interpolate(frame, [0, 180], [0, width * 2], { easing: Easing.linear }); const pipes = [ { x: width * 0.8, gapY: height * 0.4, gapHeight: 200 }, { x: width * 1.3, gapY: height * 0.6, gapHeight: 200 }, { x: width * 1.8, gapY: height * 0.3, gapHeight: 200 }, { x: width * 2.3, gapY: height * 0.7, gapHeight: 200 } ]; const birdX = width * 0.25; // Calculate smooth bird path with crash sequence const getBirdY = () => { // Calculate current pipe positions const currentPipes = pipes.map(pipe => ({ ...pipe, currentX: pipe.x - scrollSpeed })); // Check if we're approaching the last pipe for crash sequence const lastPipe = currentPipes[3]; const crashZone = lastPipe.currentX > birdX - 80 && lastPipe.currentX < birdX + 50; if (crashZone) { // Dramatic crash sequence - bird flies directly into the pipe const crashProgress = interpolate( lastPipe.currentX, [birdX - 30, birdX + 50], // Corrected: Monotonically increasing [1, 0], // Corrected: Flipped to maintain logic { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); // Fly towards the top pipe (crash trajectory) const crashTargetY = lastPipe.gapY - lastPipe.gapHeight / 2 - 20; const startY = lastPipe.gapY; // Bird aims for center of gap initially return interpolate(crashProgress, [0, 1], [startY, crashTargetY], { easing: Easing.inOut(Easing.ease) }); } // Smooth navigation through first 3 pipes for (let i = 0; i < 3; i++) { const pipe = currentPipes[i]; const nextPipe = currentPipes[i + 1]; // If we're in the pipe zone if (pipe.currentX > birdX - 120 && pipe.currentX < birdX + 120) { return pipe.gapY; } // Smooth transition between pipes if (nextPipe && pipe.currentX < birdX - 80 && nextPipe.currentX > birdX + 80) { const transitionProgress = interpolate( frame, [0, 180], [0, 1], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); // Create smooth bezier-like curve between pipe gaps const midPoint = (pipe.gapY + nextPipe.gapY) / 2; const curveHeight = Math.abs(pipe.gapY - nextPipe.gapY) * 0.3; const localProgress = interpolate( birdX, [pipe.currentX + 80, nextPipe.currentX - 80], [0, 1], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); // Smooth S-curve transition const smoothY = interpolate(localProgress, [0, 0.5, 1], [pipe.gapY, midPoint + curveHeight * Math.sin(localProgress * Math.PI), nextPipe.gapY], { easing: Easing.inOut(Easing.ease) }); return smoothY; } } // Default positions if (frame < 20) return height * 0.5; return height * 0.5; }; const targetY = getBirdY(); // Much smoother bobbing motion const bobbing = interpolate(frame % 90, [0, 45, 90], [-4, 4, -4], { easing: Easing.inOut(Easing.ease) }); // Smooth Y position with gentle easing const smoothY = interpolate(frame, [frame - 1, frame], [targetY, targetY], { easing: Easing.inOut(Easing.ease) }); const birdY = smoothY + bobbing; // Smoother wing animation const wingScale = interpolate(flapCycle, [0, 5, 10, 15, 20], [1, 1.2, 1.4, 1.2, 1], { easing: Easing.inOut(Easing.ease) }); // Smoother rotation based on movement const rotationCycle = frame % 60; const naturalRotation = interpolate(rotationCycle, [0, 30, 60], [-3, 3, -3], { easing: Easing.inOut(Easing.ease) }); // Check for crash rotation const lastPipe = pipes[3]; const lastPipeX = lastPipe.x - scrollSpeed; const isCrashing = lastPipeX > birdX - 80 && lastPipeX < birdX + 50; const crashRotation = isCrashing ? interpolate( lastPipeX, [birdX - 30, birdX + 50], // Corrected: Monotonically increasing [-45, 0], // Corrected: Flipped to maintain logic { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ) : 0; const totalRotation = flapRotation + naturalRotation + crashRotation; // Crash effect - bird gets smaller and redder const crashScale = isCrashing ? interpolate( lastPipeX, [birdX - 30, birdX + 50], // Corrected: Monotonically increasing [0.7, 1], // Corrected: Flipped to maintain logic { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ) : 1; const birdColor = isCrashing ? '#FF4500' : '#FFD700'; return (

{/* Bird body */}

{/* Bird eye */}

{/* Bird beak */}

{/* Wings */}

); };

Flappy Bird gameplay video