External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(videos): redesign all scenes with real app screenshots and proper scaling

Browse Source
This commit is contained in:
SnapOtter
2026-05-08 18:37:36 +08:00
parent 86e1fdeef5
commit c17d540072
15 changed files with 387 additions and 1210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/videos/src/compositions/promo-teaser/scenes/NumberPunchScene.tsx
+29 -24
View File
@@ -1,13 +1,12 @@
import type React from "react";
import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
import { NumberPunch } from "@/components/NumberPunch";
import { COLOR } from "@/lib/colors";
const PUNCHES = [
{ number: "49", descriptor: "tools", frame: 0, size: 120, shake: 2 },
{ number: "15", descriptor: "AI models", frame: 37, size: 120, shake: 2 },
{ number: "55+", descriptor: "formats", frame: 74, size: 120, shake: 2 },
{ number: "1", descriptor: "container", frame: 111, size: 144, shake: 3 },
{ number: "49", descriptor: "tools", frame: 0 },
{ number: "15", descriptor: "AI models", frame: 37 },
{ number: "55+", descriptor: "formats", frame: 74 },
{ number: "1", descriptor: "container", frame: 111 },
];
export const NumberPunchScene: React.FC = () => {
@@ -16,27 +15,33 @@ export const NumberPunchScene: React.FC = () => {
return (
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
{PUNCHES.map((p, i) => {
const visible = frame >= p.frame && frame < p.frame + 37;
const flashStart = p.frame - 2;
const flashOpacity =
i > 0 && frame >= flashStart && frame < flashStart + 2
? interpolate(frame, [flashStart, flashStart + 2], [1, 0])
: 0;
const segmentEnd = i < PUNCHES.length - 1 ? PUNCHES[i + 1].frame : p.frame + 37;
const fadeInOpacity = interpolate(frame, [p.frame, p.frame + 4], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
const fadeOutOpacity = interpolate(frame, [segmentEnd - 6, segmentEnd], [1, 0], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
const isLastPunch = i === PUNCHES.length - 1;
const visible = frame >= p.frame && frame < segmentEnd;
const opacity = isLastPunch ? fadeInOpacity : Math.min(fadeInOpacity, fadeOutOpacity);
if (!visible) return null;
return (
<AbsoluteFill key={p.number} style={{ justifyContent: "center", alignItems: "center" }}>
{i > 0 && (
<AbsoluteFill style={{ backgroundColor: COLOR.dark, opacity: flashOpacity }} />
)}
{visible && (
<NumberPunch
number={p.number}
descriptor={p.descriptor}
enterFrame={p.frame}
numberSize={p.size}
shakeIntensity={p.shake}
/>
)}
<AbsoluteFill
key={p.number}
style={{ justifyContent: "center", alignItems: "center", opacity }}
>
<NumberPunch
number={p.number}
descriptor={p.descriptor}
enterFrame={p.frame}
numberSize={200}
shakeIntensity={2}
/>
</AbsoluteFill>
);
})}