diff --git a/src/components/remotion/code-composition.tsx b/src/components/remotion/code-composition.tsx
index 66a97ca..8dfac4f 100644
--- a/src/components/remotion/code-composition.tsx
+++ b/src/components/remotion/code-composition.tsx
@@ -152,7 +152,14 @@ function CodeSequences({
             lang={seq.lang}
             filename={seq.filename}
             filenames={filenames}
-            codeForFrame={(frame) => seq.frames[Math.floor(frame * speed)]}
+            codeForFrame={(frame) => {
+              const effectiveSpeed = seq.isTransition ? 1 : speed
+              const index = Math.min(
+                Math.floor(frame * effectiveSpeed),
+                seq.frames.length - 1,
+              )
+              return seq.frames[index]
+            }}
             watermark={watermark}
             scale={scale}
             font={font}
diff --git a/src/components/remotion/composition-data.ts b/src/components/remotion/composition-data.ts
index b7f618a..cc7c8e6 100644
--- a/src/components/remotion/composition-data.ts
+++ b/src/components/remotion/composition-data.ts
@@ -127,7 +127,23 @@ export function getCompositionData({
     filename: steps[steps.length - 1]?.filename,
   })
 
-  return { sequences, metadata }
+  const { speed } = metadata
+  const scaledSequences =
+    speed === 1
+      ? sequences
+      : sequences.map((seq) =>
+          seq.isTransition
+            ? seq
+            : {
+                ...seq,
+                durationInFrames: Math.max(
+                  1,
+                  Math.ceil(seq.durationInFrames / speed),
+                ),
+              },
+        )
+
+  return { sequences: scaledSequences, metadata }
 }
 
 export type CompositionData = ReturnType<typeof getCompositionData>