Skip to content

Commit c7feb72

Browse files
codercatdevcodercatdev
authored
fix: remove narration overlays + bump font sizes in 3 Remotion components
Remove narration text overlays from CodeMorphScene, DynamicListScene, ComparisonGridScene. Bump font sizes 25% for mobile readability. Audio carries all words per Alex's directive.
1 parent bf9fde0 commit c7feb72

3 files changed

Lines changed: 11 additions & 149 deletions

File tree

‎remotion/components/CodeMorphScene.tsx‎

Lines changed: 5 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ function getFilenameForLanguage(language: string): string {
6161
}
6262

6363
export const CodeMorphScene: React.FC<CodeMorphSceneProps> = ({
64-
narration,
6564
sceneIndex,
6665
durationInFrames,
6766
isVertical = false,
@@ -161,21 +160,13 @@ export const CodeMorphScene: React.FC<CodeMorphSceneProps> = ({
161160
);
162161
}
163162

164-
// --- Narration text animation ---
165-
const narrationOpacity = interpolate(
166-
frame,
167-
[ANIMATION.fadeIn, ANIMATION.fadeIn + 10],
168-
[0, 1],
169-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
170-
);
171-
172163
// --- Gradient background angle (alternating per scene) ---
173164
const gradientAngle = (sceneIndex % 4) * 90;
174165

175166
// --- Layout dimensions ---
176167
const codeFontSize = fonts.code;
177-
const lineHeight = codeFontSize * 1.7;
178-
const lineNumberWidth = 48;
168+
const lineHeight = codeFontSize * 2.1;
169+
const lineNumberWidth = 60;
179170

180171
return (
181172
<AbsoluteFill style={{ opacity: sceneOpacity }}>
@@ -252,7 +243,7 @@ export const CodeMorphScene: React.FC<CodeMorphSceneProps> = ({
252243
style={{
253244
flex: 1,
254245
textAlign: "center",
255-
fontSize: codeFontSize * 0.75,
246+
fontSize: codeFontSize * 0.95,
256247
color: COLORS.textMuted,
257248
fontFamily: CODE_FONT_FAMILY,
258249
fontWeight: 500,
@@ -331,7 +322,7 @@ export const CodeMorphScene: React.FC<CodeMorphSceneProps> = ({
331322
width: lineNumberWidth,
332323
textAlign: "right",
333324
paddingRight: 16,
334-
fontSize: codeFontSize * 0.85,
325+
fontSize: codeFontSize * 1.05,
335326
color: CODE_COLORS.lineNumber,
336327
fontFamily: CODE_FONT_FAMILY,
337328
userSelect: "none",
@@ -351,7 +342,7 @@ export const CodeMorphScene: React.FC<CodeMorphSceneProps> = ({
351342
<div
352343
style={{
353344
flex: 1,
354-
fontSize: codeFontSize,
345+
fontSize: codeFontSize * 1.25,
355346
color: COLORS.textWhite,
356347
fontFamily: CODE_FONT_FAMILY,
357348
whiteSpace: "pre",
@@ -378,43 +369,6 @@ export const CodeMorphScene: React.FC<CodeMorphSceneProps> = ({
378369
</div>
379370
</AbsoluteFill>
380371

381-
{/* Layer 3: Narration text overlay */}
382-
<div
383-
style={{
384-
position: "absolute",
385-
bottom: isVertical ? 100 : 60,
386-
left: 0,
387-
right: 0,
388-
display: "flex",
389-
justifyContent: "center",
390-
padding: isVertical ? "0 32px" : "0 120px",
391-
opacity: narrationOpacity,
392-
}}
393-
>
394-
<div
395-
style={{
396-
backgroundColor: "rgba(0, 0, 0, 0.6)",
397-
borderRadius: 12,
398-
padding: isVertical ? "16px 20px" : "16px 32px",
399-
maxWidth: isVertical ? "95%" : "75%",
400-
backdropFilter: "blur(8px)",
401-
borderLeft: `3px solid ${COLORS.primary}`,
402-
}}
403-
>
404-
<div
405-
style={{
406-
fontSize: fonts.narration * 0.7,
407-
color: COLORS.textWhite,
408-
fontFamily: "sans-serif",
409-
fontWeight: 400,
410-
lineHeight: 1.4,
411-
textAlign: isVertical ? "center" : "left",
412-
}}
413-
>
414-
{narration}
415-
</div>
416-
</div>
417-
</div>
418372

419373
{/* Layer 4: CodingCat.dev watermark */}
420374
<div

‎remotion/components/ComparisonGridScene.tsx‎

Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { ANIMATION, COLORS, COMPARISON_COLORS, FONT_SIZES } from "../constants";
1111
import { getActiveSegmentAtFrame } from "../../lib/utils/audio-timestamps";
1212

1313
export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
14-
narration,
1514
sceneIndex,
1615
durationInFrames,
1716
isVertical = false,
@@ -43,18 +42,6 @@ export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
4342
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
4443
);
4544

46-
// --- Narration text fade ---
47-
const textOpacity = interpolate(
48-
frame,
49-
[
50-
0,
51-
ANIMATION.fadeIn,
52-
durationInFrames - ANIMATION.fadeOut,
53-
durationInFrames,
54-
],
55-
[0, 1, 1, 0],
56-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
57-
);
5845

5946
// --- Active segment (focus/dimming) ---
6047
const activeSegment =
@@ -205,7 +192,7 @@ export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
205192
style={{
206193
flex: 1,
207194
padding: isVertical ? "16px 20px" : "20px 24px",
208-
fontSize: fonts.comparisonHeader,
195+
fontSize: Math.round(fonts.comparisonHeader * 1.25),
209196
fontFamily: "sans-serif",
210197
fontWeight: 700,
211198
color: COMPARISON_COLORS.leftAccent,
@@ -223,7 +210,7 @@ export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
223210
style={{
224211
flex: 1,
225212
padding: isVertical ? "16px 20px" : "20px 24px",
226-
fontSize: fonts.comparisonHeader,
213+
fontSize: Math.round(fonts.comparisonHeader * 1.25),
227214
fontFamily: "sans-serif",
228215
fontWeight: 700,
229216
color: COMPARISON_COLORS.rightAccent,
@@ -306,7 +293,7 @@ export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
306293
style={{
307294
flex: 1,
308295
padding: isVertical ? "14px 20px" : "18px 24px",
309-
fontSize: fonts.comparisonCell,
296+
fontSize: Math.round(fonts.comparisonCell * 1.25),
310297
fontFamily: "sans-serif",
311298
fontWeight: 500,
312299
color: COLORS.textWhite,
@@ -326,7 +313,7 @@ export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
326313
style={{
327314
flex: 1,
328315
padding: isVertical ? "14px 20px" : "18px 24px",
329-
fontSize: fonts.comparisonCell,
316+
fontSize: Math.round(fonts.comparisonCell * 1.25),
330317
fontFamily: "sans-serif",
331318
fontWeight: 500,
332319
color: COLORS.textWhite,
@@ -343,39 +330,6 @@ export const ComparisonGridScene: React.FC<ComparisonGridSceneProps> = ({
343330
</div>
344331
</AbsoluteFill>
345332

346-
{/* Layer 3: Narration text overlay (bottom) */}
347-
<AbsoluteFill
348-
style={{
349-
justifyContent: "flex-end",
350-
alignItems: "center",
351-
padding: isVertical ? "60px 40px" : "80px 120px",
352-
}}
353-
>
354-
<div
355-
style={{
356-
opacity: textOpacity,
357-
backgroundColor: "rgba(0, 0, 0, 0.6)",
358-
borderRadius: 16,
359-
padding: isVertical ? "28px 24px" : "32px 48px",
360-
maxWidth: isVertical ? "95%" : "80%",
361-
backdropFilter: "blur(8px)",
362-
borderLeft: `4px solid ${COLORS.primary}`,
363-
}}
364-
>
365-
<div
366-
style={{
367-
fontSize: fonts.narration,
368-
color: COLORS.textWhite,
369-
fontFamily: "sans-serif",
370-
fontWeight: 500,
371-
lineHeight: 1.5,
372-
textAlign: isVertical ? "center" : "left",
373-
}}
374-
>
375-
{narration}
376-
</div>
377-
</div>
378-
</AbsoluteFill>
379333

380334
{/* Layer 4: CodingCat.dev watermark */}
381335
<div

‎remotion/components/DynamicListScene.tsx‎

Lines changed: 2 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { ANIMATION, COLORS, LIST_COLORS, FONT_SIZES } from "../constants";
1111
import { getActiveSegmentAtFrame } from "../../lib/utils/audio-timestamps";
1212

1313
export const DynamicListScene: React.FC<DynamicListSceneProps> = ({
14-
narration,
1514
sceneIndex,
1615
durationInFrames,
1716
isVertical = false,
@@ -42,18 +41,6 @@ export const DynamicListScene: React.FC<DynamicListSceneProps> = ({
4241
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
4342
);
4443

45-
// --- Narration text fade ---
46-
const textOpacity = interpolate(
47-
frame,
48-
[
49-
0,
50-
ANIMATION.fadeIn,
51-
durationInFrames - ANIMATION.fadeOut,
52-
durationInFrames,
53-
],
54-
[0, 1, 1, 0],
55-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
56-
);
5744

5845
// --- Entrance timing ---
5946
const entranceWindow = durationInFrames * 0.6;
@@ -178,7 +165,7 @@ export const DynamicListScene: React.FC<DynamicListSceneProps> = ({
178165
{/* Icon / bullet */}
179166
<div
180167
style={{
181-
fontSize: isVertical ? 32 : 28,
168+
fontSize: isVertical ? 40 : 35,
182169
transform: `scale(${iconSpring})`,
183170
flexShrink: 0,
184171
color: icon ? undefined : LIST_COLORS.bulletColor,
@@ -191,7 +178,7 @@ export const DynamicListScene: React.FC<DynamicListSceneProps> = ({
191178
{/* Item text */}
192179
<div
193180
style={{
194-
fontSize: fonts.listItem,
181+
fontSize: Math.round(fonts.listItem * 1.25),
195182
color: COLORS.textWhite,
196183
fontFamily: "sans-serif",
197184
fontWeight: 500,
@@ -206,39 +193,6 @@ export const DynamicListScene: React.FC<DynamicListSceneProps> = ({
206193
</div>
207194
</AbsoluteFill>
208195

209-
{/* Layer 3: Narration text overlay (bottom) */}
210-
<AbsoluteFill
211-
style={{
212-
justifyContent: "flex-end",
213-
alignItems: "center",
214-
padding: isVertical ? "60px 40px" : "80px 120px",
215-
}}
216-
>
217-
<div
218-
style={{
219-
opacity: textOpacity,
220-
backgroundColor: "rgba(0, 0, 0, 0.6)",
221-
borderRadius: 16,
222-
padding: isVertical ? "28px 24px" : "32px 48px",
223-
maxWidth: isVertical ? "95%" : "80%",
224-
backdropFilter: "blur(8px)",
225-
borderLeft: `4px solid ${COLORS.primary}`,
226-
}}
227-
>
228-
<div
229-
style={{
230-
fontSize: fonts.narration,
231-
color: COLORS.textWhite,
232-
fontFamily: "sans-serif",
233-
fontWeight: 500,
234-
lineHeight: 1.5,
235-
textAlign: isVertical ? "center" : "left",
236-
}}
237-
>
238-
{narration}
239-
</div>
240-
</div>
241-
</AbsoluteFill>
242196

243197
{/* Layer 4: CodingCat.dev watermark */}
244198
<div

0 commit comments

Comments
 (0)