Both SVG scenes are 100% scalable vector geometry designed for interpolation in Remotion. Below is the ready-to-use TypeScript React component for animating both scenes smoothly:

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

// =========================================================================
// SCENE 1: TEAM PERFORMANCE (STRAIGHT TRACK REMOTION COMPONENT)
// =========================================================================
export const Scene1TeamStraightTrack: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Smooth spring entrance from start line (X=110) to target finish positions
  const delhiX = interpolate(frame, [0, 90], [110, 1040], { extrapolateRight: 'clamp' });
  const mumbaiX = interpolate(frame, [0, 90], [110, 960], { extrapolateRight: 'clamp' });
  const bengaluruX = interpolate(frame, [0, 90], [110, 860], { extrapolateRight: 'clamp' });
  const chennaiX = interpolate(frame, [0, 90], [110, 710], { extrapolateRight: 'clamp' });

  return (
    <svg viewBox="0 0 1200 480" width="100%" height="auto">
      {/* Background & Corporate Buildings */}
      {/* Straight Track Surface (Lanes 1 to 4) */}
      
      {/* Team Racers with interpolated X coordinates */}
      <g id="team-racer-delhi" transform={`translate(${delhiX}, 160)`}>
        {/* Aerodynamic Speed Pod & Team Delhi Label */}
      </g>
      <g id="team-racer-mumbai" transform={`translate(${mumbaiX}, 228)`}>
        {/* Team Mumbai Pod & Label */}
      </g>
      <g id="team-racer-bengaluru" transform={`translate(${bengaluruX}, 296)`}>
        {/* Team Bengaluru Pod & Label */}
      </g>
      <g id="team-racer-chennai" transform={`translate(${chennaiX}, 364)`}>
        {/* Team Chennai Pod & Label */}
      </g>
    </svg>
  );
};

// =========================================================================
// SCENE 2: INDIVIDUAL PERFORMANCE (CIRCULAR STADIUM REMOTION COMPONENT)
// =========================================================================
export const Scene2IndividualStadiumTrack: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Smooth orbital angle progression around stadium center (600, 340)
  // Kavita Sharma (Lane 1, R=252): laps from 0 to 255 degrees
  const angleKavita = interpolate(frame, [0, 120], [0, 255], { extrapolateRight: 'clamp' });
  const radKavita = (angleKavita * Math.PI) / 180;
  const kavitaX = 600 + 252 * Math.cos(radKavita);
  const kavitaY = 340 + 252 * Math.sin(radKavita);

  return (
    <svg viewBox="0 0 1200 680" width="100%" height="auto">
      {/* Stadium Seating Tiers & Corner Floodlight Beams */}
      {/* Central Circular Track Deck (R=130 to R=270) */}
      {/* Infield Digital HUD */}

      {/* Individual Runner Pod interpolated along circular track */}
      <g id="racer-kavita" transform={`translate(${kavitaX}, ${kavitaY})`}>
        {/* Runner Pod & High-Contrast Label */}
      </g>
    </svg>
  );
};