lint fixes

remotion/Contributions/PlanetEntrance.tsx

@@ -4,8 +4,8 @@ import { type Planet } from "../../src/config";
 import { getPlanetFile } from "../planets";
 
 export const PlanetEntrance: React.FC<{
-  planet: Planet;
-  frame: number;
+  readonly planet: Planet;
+  readonly frame: number;
 }> = ({ planet, frame }) => {
   const planetSize = interpolate(frame, [80, 180], [0, 1200], {
     extrapolateRight: "clamp",

remotion/EndScene/CallToAction.tsx

@@ -11,9 +11,9 @@ const padding = 10;
 const iconHeight = 120;
 
 export const CallToAction: React.FC<{
-  exitProgress: number;
-  enterProgress: number;
-  planet: Planet;
+  readonly exitProgress: number;
+  readonly enterProgress: number;
+  readonly planet: Planet;
 }> = ({ exitProgress, enterProgress, planet }) => {
   const startDistance = 10;
   const stillDistance = 1;

remotion/EndScene/HidePlanet.tsx

@@ -3,9 +3,9 @@ import { AbsoluteFill } from "remotion";
 import type { Planet } from "../../src/config";
 
 export const HidePlanets: React.FC<{
-  children: React.ReactNode;
-  planet: Planet;
-  exitProgress: number;
+  readonly children: React.ReactNode;
+  readonly planet: Planet;
+  readonly exitProgress: number;
 }> = ({ children, exitProgress }) => {
   return (
     <AbsoluteFill

remotion/EndScene/LandingRocket.tsx

@@ -11,8 +11,8 @@ import { RocketSide } from "../Spaceship";
 import { remapSpeed } from "../TopLanguages/remap-speed";
 
 export const LandingRocket: React.FC<{
-  rocket: Rocket;
-  planetType: Planet;
+  readonly rocket: Rocket;
+  readonly planetType: Planet;
 }> = ({ rocket, planetType }) => {
   const frame = useCurrentFrame();
 

remotion/EndScene/PlanetBackground.tsx

@@ -17,7 +17,7 @@ export const prefetchPlanetLandingBackground = (planet: Planet): string[] => {
 };
 
 export const PlanetBackground: React.FC<{
-  planet: Planet;
+  readonly planet: Planet;
 }> = ({ planet }) => {
   const frame = useCurrentFrame();
 

remotion/EndScene/Threads.tsx

@@ -79,7 +79,7 @@ type ThreadT = {
   orbs: Array<{ top: number; type: number }>;
 };
 
-const Thread = (props: { thread: ThreadT }) => {
+const Thread = (props: { readonly thread: ThreadT }) => {
   const frame = useCurrentFrame();
 
   return (

remotion/IGStory/BarChart.tsx

@@ -3,9 +3,9 @@ import { z } from "zod";
 import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane";
 
 const Bar: React.FC<{
-  progress: number;
-  letter: string;
-  most: boolean;
+  readonly progress: number;
+  readonly letter: string;
+  readonly most: boolean;
 }> = ({ progress, letter, most }) => {
   return (
     <div
@@ -44,7 +44,7 @@ const Bar: React.FC<{
 const schema = z.array(z.number());
 
 export const BarChart: React.FC<{
-  graphData: z.infer<typeof schema>;
+  readonly graphData: z.infer<typeof schema>;
 }> = ({ graphData }) => {
   const highest = Math.max(...graphData.map((g) => g));
 

remotion/IGStory/GraphData.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { interpolateColors } from "remotion";
 
 const Dot: React.FC<{
-  index: number;
-  value: number;
-  max: number;
+  readonly index: number;
+  readonly value: number;
+  readonly max: number;
 }> = ({ index, max, value }) => {
   const row = index % 7;
   const column = Math.floor(index / 7);
@@ -31,7 +31,7 @@ const Dot: React.FC<{
 };
 
 export const ContributionGraphic: React.FC<{
-  graphData: number[];
+  readonly graphData: number[];
 }> = ({ graphData }) => {
   return (
     <div

remotion/IGStory/Issues.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export const Issues: React.FC<{
-  issues: number;
+  readonly issues: number;
 }> = ({ issues }) => {
   return (
     <div

remotion/IGStory/Overlay.tsx

@@ -10,13 +10,13 @@ import { Stars } from "./Stars";
 import { Title } from "./Title";
 
 export const Overlay: React.FC<{
-  issues: number;
-  contributionData: number[];
-  weekdays: number[];
-  pullRequests: number;
-  stars: number;
-  login: string;
-  topLanguage: TopLanguage | null;
+  readonly issues: number;
+  readonly contributionData: number[];
+  readonly weekdays: number[];
+  readonly pullRequests: number;
+  readonly stars: number;
+  readonly login: string;
+  readonly topLanguage: TopLanguage | null;
 }> = ({
   issues,
   contributionData,

remotion/Issues/GlowStick.tsx

@@ -14,10 +14,10 @@ const IMAGE_HEIGHT = 165;
 const STICK_PADDING_TOP = 10;
 
 export const GlowStick: React.FC<{
-  targetX: number;
-  targetY: number;
-  shootDelay: number;
-  duration: number;
+  readonly targetX: number;
+  readonly targetY: number;
+  readonly shootDelay: number;
+  readonly duration: number;
 }> = ({ targetX, targetY, shootDelay, duration }) => {
   const angleRadians = getAngleForShoot(targetX, targetY);
 

remotion/Issues/Rocket.tsx

@@ -23,9 +23,9 @@ export const RocketComponent = ({
   rocket,
   ...props
 }: SVGProps<SVGSVGElement> & {
-  shots: ShotWithShootDelay[];
-  jumpIn: number;
-  rocket: Rocket;
+  readonly shots: ShotWithShootDelay[];
+  readonly jumpIn: number;
+  readonly rocket: Rocket;
 }) => {
   const frame = useCurrentFrame();
 

remotion/Issues/Ufo.tsx

@@ -16,14 +16,14 @@ export const Ufo = ({
   columns,
   ...props
 }: SVGProps<SVGSVGElement> & {
-  x: number;
-  y: number;
-  scale: number;
-  columns: number;
-  column: number;
-  explodeAfter: number;
-  yOffset: number;
-  exit: number;
+  readonly x: number;
+  readonly y: number;
+  readonly scale: number;
+  readonly columns: number;
+  readonly column: number;
+  readonly explodeAfter: number;
+  readonly yOffset: number;
+  readonly exit: number;
 }) => {
   const actualUfoWidth = UFO_WIDTH * scale;
   const actualUfoHeight = UFO_HEIGHT * scale;

remotion/Issues/ZeroIssues.tsx

@@ -17,7 +17,7 @@ const UFOS = 9;
 export const ZERO_ISSUES_DURATION = 140;
 
 const UfoPosition: React.FC<{
-  index: number;
+  readonly index: number;
 }> = ({ index }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();

remotion/OgImage/BarChart.tsx

@@ -3,9 +3,9 @@ import { z } from "zod";
 import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane";
 
 const Bar: React.FC<{
-  progress: number;
-  letter: string;
-  most: boolean;
+  readonly progress: number;
+  readonly letter: string;
+  readonly most: boolean;
 }> = ({ progress, letter, most }) => {
   return (
     <div
@@ -44,7 +44,7 @@ const Bar: React.FC<{
 const schema = z.array(z.number());
 
 export const BarChart: React.FC<{
-  graphData: z.infer<typeof schema>;
+  readonly graphData: z.infer<typeof schema>;
 }> = ({ graphData }) => {
   const highest = Math.max(...graphData.map((g) => g));
 

remotion/OgImage/GraphData.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { interpolateColors } from "remotion";
 
 const Dot: React.FC<{
-  index: number;
-  value: number;
-  max: number;
+  readonly index: number;
+  readonly value: number;
+  readonly max: number;
 }> = ({ index, max, value }) => {
   const row = index % 7;
   const column = Math.floor(index / 7);
@@ -31,7 +31,7 @@ const Dot: React.FC<{
 };
 
 export const ContributionGraphic: React.FC<{
-  graphData: number[];
+  readonly graphData: number[];
 }> = ({ graphData }) => {
   return (
     <div

remotion/OgImage/Issues.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export const Issues: React.FC<{
-  issues: number;
+  readonly issues: number;
 }> = ({ issues }) => {
   return (
     <div

remotion/OgImage/Overlay.tsx

@@ -10,13 +10,13 @@ import { Stars } from "./Stars";
 import { Title } from "./Title";
 
 export const Overlay: React.FC<{
-  issues: number;
-  contributionData: number[];
-  weekdays: number[];
-  pullRequests: number;
-  stars: number;
-  login: string;
-  topLanguage: TopLanguage | null;
+  readonly issues: number;
+  readonly contributionData: number[];
+  readonly weekdays: number[];
+  readonly pullRequests: number;
+  readonly stars: number;
+  readonly login: string;
+  readonly topLanguage: TopLanguage | null;
 }> = ({
   issues,
   contributionData,

remotion/Opening/RocketFront.tsx

@@ -2,7 +2,7 @@ import { AbsoluteFill, Img } from "remotion";
 import type { Rocket } from "../../src/config";
 import { getSideRocketSource } from "../Spaceship";
 
-const SvgComponent = (props: { rocket: Rocket }) => (
+const SvgComponent = (props: { readonly rocket: Rocket }) => (
   <AbsoluteFill
     style={{
       justifyContent: "center",

remotion/Opening/TakeOff.tsx

@@ -54,7 +54,7 @@ export const getTakeOffAssetToPrefetch = (rocket: Rocket) => {
 };
 
 export const TakeOff: React.FC<{
-  rocket: Rocket;
+  readonly rocket: Rocket;
 }> = ({ rocket }) => {
   const frame = useCurrentFrame();
   const acceleratedFrame = remapSpeed(frame, takeOffSpeedFucntion);

remotion/Poof/index.tsx

@@ -284,9 +284,9 @@ const PoofSprite: React.FC = () => {
 };
 
 export const Poof: React.FC<{
-  x: number;
-  y: number;
-  ufoScale: number;
+  readonly x: number;
+  readonly y: number;
+  readonly ufoScale: number;
 }> = ({ x, y, ufoScale }) => {
   const actualScale = ufoScale * 1.5;
 

remotion/Productivity/TabletSVG.tsx

@@ -4,6 +4,6 @@ import { Img, staticFile } from "remotion";
 export const TABLET_BG = "#080817";
 export const HANDS_ASSET = staticFile("hands.png");
 
-export const TabletSVG = (props: { style: React.CSSProperties }) => (
+export const TabletSVG = (props: { readonly style: React.CSSProperties }) => (
   <Img src={HANDS_ASSET} style={props.style} />
 );

remotion/Productivity/Wheel.tsx

@@ -42,12 +42,12 @@ const WHEEL_INIT_SPEED =
   wheelSpring({ fps: FPS, frame: 0, delay: 0 });
 
 export const Wheel: React.FC<{
-  value: string;
-  values: string[];
-  radius: number;
-  renderLabel: (value: string) => React.ReactNode;
-  delay: number;
-  soundDelay: number;
+  readonly value: string;
+  readonly values: string[];
+  readonly radius: number;
+  readonly renderLabel: (value: string) => React.ReactNode;
+  readonly delay: number;
+  readonly soundDelay: number;
 }> = ({ value, values, radius, renderLabel, delay, soundDelay }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();

remotion/PromoVideo/Planets.tsx

@@ -22,7 +22,7 @@ const PLANETS_ASSETS = [
 ];
 
 export const Planets: React.FC<{
-  layout: PromoVideoLayout;
+  readonly layout: PromoVideoLayout;
 }> = ({ layout }) => {
   const { height, width, fps } = useVideoConfig();
   const frame = useCurrentFrame();

remotion/PromoVideo/PromoVideoCTA.tsx

@@ -13,7 +13,7 @@ import { RemotionShineEffect } from "../PullRequests/RemotionShineEffect";
 import type { PromoVideoLayout } from "./promo-video-layout";
 
 export const PromoVideoCallToAction: React.FC<{
-  layout: PromoVideoLayout;
+  readonly layout: PromoVideoLayout;
 }> = ({ layout }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();

remotion/PromoVideo/Title.tsx

@@ -14,7 +14,7 @@ import { RocketFront } from "../TopLanguages/svgs/FrontRocketSource";
 import type { PromoVideoLayout } from "./promo-video-layout";
 
 export const PromoVideoTitle: React.FC<{
-  layout: PromoVideoLayout;
+  readonly layout: PromoVideoLayout;
 }> = ({ layout }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();

remotion/PromoVideo/Title2.tsx

@@ -11,7 +11,7 @@ import { RemotionShineEffect } from "../PullRequests/RemotionShineEffect";
 import type { PromoVideoLayout } from "./promo-video-layout";
 
 export const YourYearInReview: React.FC<{
-  layout: PromoVideoLayout;
+  readonly layout: PromoVideoLayout;
 }> = ({ layout }) => {
   const widthWidth = layout === "short" ? 800 : 350;
   const frame = useCurrentFrame();

remotion/PullRequests/MergeNumber.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
 
 export const MergeNumber: React.FC<{
-  num: number;
+  readonly num: number;
 }> = ({ num }) => {
   return (
     <div

remotion/PullRequests/RemotionShineEffect.tsx

@@ -3,10 +3,10 @@ import React, { useMemo, useRef } from "react";
 import { AbsoluteFill, useCurrentFrame } from "remotion";
 
 export const RemotionShineEffect: React.FC<{
-  borderRadius: number;
-  width: number;
-  height: number;
-  id: string;
+  readonly borderRadius: number;
+  readonly width: number;
+  readonly height: number;
+  readonly id: string;
 }> = ({ borderRadius, width, height, id }) => {
   const ref = useRef<HTMLDivElement>(null);
   const linearGradient = useRef<SVGLinearGradientElement>(null);