takomi 2.5.1 → 2.5.4

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx

@@ -1,37 +1,37 @@
-import { AbsoluteFill, Sequence } from "remotion";
-import { z } from "zod";
-import { TitleScene } from "./scenes/TitleScene";
-import { StatsScene } from "./scenes/StatsScene";
-import { OutroScene } from "./scenes/OutroScene";
-
-export const stargazedSchema = z.object({
-  title: z.string(),
-  subtitle: z.string(),
-  stats: z.array(
-    z.object({
-      label: z.string(),
-      value: z.number(),
-      color: z.string(),
-    }),
-  ),
-  outro: z.string(),
-});
-
-export const Stargazed: React.FC<z.infer<typeof stargazedSchema>> = ({
-  title,
-  subtitle,
-  stats,
-  outro,
-}) => (
-  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
-    <Sequence from={0} durationInFrames={90}>
-      <TitleScene title={title} subtitle={subtitle} />
-    </Sequence>
-    <Sequence from={90} durationInFrames={120}>
-      <StatsScene stats={stats} />
-    </Sequence>
-    <Sequence from={210} durationInFrames={90}>
-      <OutroScene text={outro} />
-    </Sequence>
-  </AbsoluteFill>
-);
+import { AbsoluteFill, Sequence } from "remotion";
+import { z } from "zod";
+import { TitleScene } from "./scenes/TitleScene";
+import { StatsScene } from "./scenes/StatsScene";
+import { OutroScene } from "./scenes/OutroScene";
+
+export const stargazedSchema = z.object({
+  title: z.string(),
+  subtitle: z.string(),
+  stats: z.array(
+    z.object({
+      label: z.string(),
+      value: z.number(),
+      color: z.string(),
+    }),
+  ),
+  outro: z.string(),
+});
+
+export const Stargazed: React.FC<z.infer<typeof stargazedSchema>> = ({
+  title,
+  subtitle,
+  stats,
+  outro,
+}) => (
+  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
+    <Sequence from={0} durationInFrames={90}>
+      <TitleScene title={title} subtitle={subtitle} />
+    </Sequence>
+    <Sequence from={90} durationInFrames={120}>
+      <StatsScene stats={stats} />
+    </Sequence>
+    <Sequence from={210} durationInFrames={90}>
+      <OutroScene text={outro} />
+    </Sequence>
+  </AbsoluteFill>
+);

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx

@@ -1,23 +1,23 @@
-import { interpolate, useCurrentFrame } from "remotion";
-
-interface Props {
-  from: number;
-  to: number;
-  durationInFrames: number;
-}
-
-/**
- * Counts from `from` to `to` over `durationInFrames` with easeOut.
- * Driven entirely by useCurrentFrame — deterministic.
- */
-export const AnimatedNumber: React.FC<Props> = ({ from, to, durationInFrames }) => {
-  const frame = useCurrentFrame();
-  const t = interpolate(frame, [0, durationInFrames], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-  // Ease-out cubic — fast start, slow finish, matches the ramp on data dashboards.
-  const eased = 1 - (1 - t) ** 3;
-  const value = Math.round(from + (to - from) * eased);
-  return <>{value.toLocaleString()}</>;
-};
+import { interpolate, useCurrentFrame } from "remotion";
+
+interface Props {
+  from: number;
+  to: number;
+  durationInFrames: number;
+}
+
+/**
+ * Counts from `from` to `to` over `durationInFrames` with easeOut.
+ * Driven entirely by useCurrentFrame — deterministic.
+ */
+export const AnimatedNumber: React.FC<Props> = ({ from, to, durationInFrames }) => {
+  const frame = useCurrentFrame();
+  const t = interpolate(frame, [0, durationInFrames], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Ease-out cubic — fast start, slow finish, matches the ramp on data dashboards.
+  const eased = 1 - (1 - t) ** 3;
+  const value = Math.round(from + (to - from) * eased);
+  return <>{value.toLocaleString()}</>;
+};

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx

@@ -1,59 +1,59 @@
-import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
-import { AnimatedNumber } from "./AnimatedNumber";
-
-interface Props {
-  label: string;
-  value: number;
-  color: string;
-  delayInFrames: number;
-}
-
-export const StatCard: React.FC<Props> = ({ label, value, color, delayInFrames }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const local = frame - delayInFrames;
-
-  const scale = spring({
-    frame: local,
-    fps,
-    config: { damping: 14, stiffness: 90, mass: 1 },
-  });
-  const opacity = interpolate(local, [0, 12], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  return (
-    <div
-      style={{
-        width: 280,
-        height: 220,
-        background: "#1a1a1a",
-        borderRadius: 16,
-        border: `2px solid ${color}`,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        opacity,
-        transform: `scale(${scale})`,
-      }}
-    >
-      <div style={{ fontSize: 72, fontWeight: 800, color, lineHeight: 1 }}>
-        {local >= 0 ? <AnimatedNumber from={0} to={value} durationInFrames={45} /> : 0}
-      </div>
-      <div
-        style={{
-          fontSize: 24,
-          fontWeight: 500,
-          color: "#9ca3af",
-          marginTop: 16,
-          textTransform: "uppercase",
-          letterSpacing: "0.1em",
-        }}
-      >
-        {label}
-      </div>
-    </div>
-  );
-};
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { AnimatedNumber } from "./AnimatedNumber";
+
+interface Props {
+  label: string;
+  value: number;
+  color: string;
+  delayInFrames: number;
+}
+
+export const StatCard: React.FC<Props> = ({ label, value, color, delayInFrames }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - delayInFrames;
+
+  const scale = spring({
+    frame: local,
+    fps,
+    config: { damping: 14, stiffness: 90, mass: 1 },
+  });
+  const opacity = interpolate(local, [0, 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        width: 280,
+        height: 220,
+        background: "#1a1a1a",
+        borderRadius: 16,
+        border: `2px solid ${color}`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        opacity,
+        transform: `scale(${scale})`,
+      }}
+    >
+      <div style={{ fontSize: 72, fontWeight: 800, color, lineHeight: 1 }}>
+        {local >= 0 ? <AnimatedNumber from={0} to={value} durationInFrames={45} /> : 0}
+      </div>
+      <div
+        style={{
+          fontSize: 24,
+          fontWeight: 500,
+          color: "#9ca3af",
+          marginTop: 16,
+          textTransform: "uppercase",
+          letterSpacing: "0.1em",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx

@@ -1,47 +1,47 @@
-import { interpolate, useCurrentFrame } from "remotion";
-
-interface Props {
-  text: string;
-  color: string;
-}
-
-export const UnderlinedText: React.FC<Props> = ({ text, color }) => {
-  const frame = useCurrentFrame();
-  // Underline scales from left over 0-30 frames.
-  const underlineScaleX = interpolate(frame, [10, 40], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-  const opacity = interpolate(frame, [0, 12], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  return (
-    <div style={{ position: "relative", display: "inline-block", opacity }}>
-      <div
-        style={{
-          fontSize: 80,
-          fontWeight: 600,
-          color: "#ffffff",
-          fontFamily: "Helvetica, Arial, sans-serif",
-        }}
-      >
-        {text}
-      </div>
-      <div
-        style={{
-          position: "absolute",
-          left: 0,
-          bottom: -8,
-          width: "100%",
-          height: 6,
-          background: color,
-          transform: `scaleX(${underlineScaleX})`,
-          transformOrigin: "left center",
-          borderRadius: 3,
-        }}
-      />
-    </div>
-  );
-};
+import { interpolate, useCurrentFrame } from "remotion";
+
+interface Props {
+  text: string;
+  color: string;
+}
+
+export const UnderlinedText: React.FC<Props> = ({ text, color }) => {
+  const frame = useCurrentFrame();
+  // Underline scales from left over 0-30 frames.
+  const underlineScaleX = interpolate(frame, [10, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const opacity = interpolate(frame, [0, 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div style={{ position: "relative", display: "inline-block", opacity }}>
+      <div
+        style={{
+          fontSize: 80,
+          fontWeight: 600,
+          color: "#ffffff",
+          fontFamily: "Helvetica, Arial, sans-serif",
+        }}
+      >
+        {text}
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          bottom: -8,
+          width: "100%",
+          height: 6,
+          background: color,
+          transform: `scaleX(${underlineScaleX})`,
+          transformOrigin: "left center",
+          borderRadius: 3,
+        }}
+      />
+    </div>
+  );
+};

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts

@@ -1,4 +1,4 @@
-import { registerRoot } from "remotion";
-import { RemotionRoot } from "./Root";
-
-registerRoot(RemotionRoot);
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx

@@ -1,18 +1,18 @@
-import { AbsoluteFill } from "remotion";
-import { UnderlinedText } from "../components/UnderlinedText";
-
-interface Props {
-  text: string;
-}
-
-export const OutroScene: React.FC<Props> = ({ text }) => (
-  <AbsoluteFill
-    style={{
-      justifyContent: "center",
-      alignItems: "center",
-      fontFamily: "Helvetica, Arial, sans-serif",
-    }}
-  >
-    <UnderlinedText text={text} color="#fbbf24" />
-  </AbsoluteFill>
-);
+import { AbsoluteFill } from "remotion";
+import { UnderlinedText } from "../components/UnderlinedText";
+
+interface Props {
+  text: string;
+}
+
+export const OutroScene: React.FC<Props> = ({ text }) => (
+  <AbsoluteFill
+    style={{
+      justifyContent: "center",
+      alignItems: "center",
+      fontFamily: "Helvetica, Arial, sans-serif",
+    }}
+  >
+    <UnderlinedText text={text} color="#fbbf24" />
+  </AbsoluteFill>
+);

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx

@@ -1,34 +1,34 @@
-import { AbsoluteFill } from "remotion";
-import { StatCard } from "../components/StatCard";
-
-interface Stat {
-  label: string;
-  value: number;
-  color: string;
-}
-
-interface Props {
-  stats: Stat[];
-}
-
-export const StatsScene: React.FC<Props> = ({ stats }) => (
-  <AbsoluteFill
-    style={{
-      justifyContent: "center",
-      alignItems: "center",
-      gap: 48,
-      flexDirection: "row",
-      fontFamily: "Helvetica, Arial, sans-serif",
-    }}
-  >
-    {stats.map((stat, i) => (
-      <StatCard
-        key={stat.label}
-        label={stat.label}
-        value={stat.value}
-        color={stat.color}
-        delayInFrames={i * 12}
-      />
-    ))}
-  </AbsoluteFill>
-);
+import { AbsoluteFill } from "remotion";
+import { StatCard } from "../components/StatCard";
+
+interface Stat {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface Props {
+  stats: Stat[];
+}
+
+export const StatsScene: React.FC<Props> = ({ stats }) => (
+  <AbsoluteFill
+    style={{
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 48,
+      flexDirection: "row",
+      fontFamily: "Helvetica, Arial, sans-serif",
+    }}
+  >
+    {stats.map((stat, i) => (
+      <StatCard
+        key={stat.label}
+        label={stat.label}
+        value={stat.value}
+        color={stat.color}
+        delayInFrames={i * 12}
+      />
+    ))}
+  </AbsoluteFill>
+);

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx

@@ -1,55 +1,55 @@
-import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
-
-interface Props {
-  title: string;
-  subtitle: string;
-}
-
-export const TitleScene: React.FC<Props> = ({ title, subtitle }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const titleScale = spring({
-    frame,
-    fps,
-    config: { damping: 12, stiffness: 100, mass: 1 },
-  });
-  const subtitleOpacity = interpolate(frame, [20, 40], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  return (
-    <AbsoluteFill
-      style={{
-        justifyContent: "center",
-        alignItems: "center",
-        flexDirection: "column",
-        fontFamily: "Helvetica, Arial, sans-serif",
-      }}
-    >
-      <div
-        style={{
-          fontSize: 160,
-          fontWeight: 900,
-          color: "#ffffff",
-          letterSpacing: "0.05em",
-          transform: `scale(${titleScale})`,
-        }}
-      >
-        {title}
-      </div>
-      <div
-        style={{
-          fontSize: 36,
-          fontWeight: 400,
-          color: "#9ca3af",
-          marginTop: 24,
-          opacity: subtitleOpacity,
-        }}
-      >
-        {subtitle}
-      </div>
-    </AbsoluteFill>
-  );
-};
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+interface Props {
+  title: string;
+  subtitle: string;
+}
+
+export const TitleScene: React.FC<Props> = ({ title, subtitle }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleScale = spring({
+    frame,
+    fps,
+    config: { damping: 12, stiffness: 100, mass: 1 },
+  });
+  const subtitleOpacity = interpolate(frame, [20, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 160,
+          fontWeight: 900,
+          color: "#ffffff",
+          letterSpacing: "0.05em",
+          transform: `scale(${titleScale})`,
+        }}
+      >
+        {title}
+      </div>
+      <div
+        style={{
+          fontSize: 36,
+          fontWeight: 400,
+          color: "#9ca3af",
+          marginTop: 24,
+          opacity: subtitleOpacity,
+        }}
+      >
+        {subtitle}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/assets/.agent/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json

@@ -1,15 +1,15 @@
-{
-  "compilerOptions": {
-    "target": "ES2018",
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}