{
left: 0,
right: 0,
textAlign: "center",
- opacity: interpolate(titleProgress, [0, 1], [0, 1]),
+ fontSize: 160,
+ fontWeight: 800,
+ color: "white",
+ fontFamily: "system-ui, -apple-system, sans-serif",
+ textShadow: "0 4px 30px rgba(0,0,0,0.3)",
+ lineHeight: 1.1,
}}
>
- {/* Streak counter */}
+ {/* Flame and Activity Image */}
- Build your streak
+ Build
+
+
+ your
+
+
+ streak
+ {/* Fire emoji */}
- {/* Progress bar */}
- {
>
🔥
-
- {currentCount}
-
-
- day streak
-
-
-
-
@@ -468,9 +517,6 @@ const CTAScene: React.FC = () => {
const glowIntensity = interpolate(Math.sin(frame * 0.1), [-1, 1], [0.3, 0.6]);
- // Pulsing fire
- const fireScale = interpolate(Math.sin(frame * 0.15), [-1, 1], [0.9, 1.1]);
-
return (
{
alignItems: "center",
}}
>
-
-
);
};
-// Scene 3: Milestone celebration
-const CelebrationScene: React.FC = () => {
+// Scene 3: Year images in phone frame
+const YearScene: React.FC = () => {
const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
+ const { fps, width, durationInFrames } = useVideoConfig();
- const badgeProgress = spring({
+ // Line-by-line animation (split on comma)
+ const firstLineFrame = Math.round(0.75 * fps);
+ const lineSpacing = Math.round(0.3 * fps);
+
+ const line1Progress = spring({ frame: frame - firstLineFrame, fps, config: { damping: 15 } });
+ const line2Progress = spring({ frame: frame - firstLineFrame - lineSpacing, fps, config: { damping: 15 } });
+
+ // Phone entrance animation
+ const phoneProgress = spring({
frame,
fps,
- config: { damping: 10, stiffness: 80 },
+ config: { damping: 12, stiffness: 80 },
});
- const textProgress = spring({
- frame: frame - 15,
- fps,
- config: { damping: 200 },
- });
+ // Phone dimensions - 95% of viewport width
+ const phoneWidth = width * 0.95;
+ const phoneAspectRatio = 780 / 380;
+ const phoneHeight = phoneWidth * phoneAspectRatio;
+
+ // Image inset percentages (relative to phone frame)
+ const insetPercent = 18 / 380;
+ const imageWidth = phoneWidth * (1 - insetPercent * 2);
+ const imageHeight = phoneHeight * (744 / 780);
+ const imageInset = phoneWidth * insetPercent;
+ const borderRadius = phoneWidth * (40 / 380);
+
+ // Calculate which image to show (1-329) based on current frame
+ const totalImages = 329;
+ const imageIndex = Math.min(
+ Math.floor((frame / durationInFrames) * totalImages) + 1,
+ totalImages
+ );
+ const paddedIndex = String(imageIndex).padStart(4, "0");
return (
+ ![]({staticFile("activity/base.png")})
+ {/* Previous frame (prevents flash) */}
+ {imageIndex > 1 && (
+ 
+ )}
+ {/* Activity image sequence (on top) */}
+ })
@@ -247,28 +212,50 @@ const StreakBuildScene: React.FC = () => {
);
};
-// Scene 2: Calendar filling
+// Scene 2: Month images in phone frame
const CalendarScene: React.FC = () => {
const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
+ const { fps, width, durationInFrames } = useVideoConfig();
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
+ // Line-by-line animation (split on comma)
+ const firstLineFrame = Math.round(0.75 * fps);
+ const lineSpacing = Math.round(0.3 * fps);
- // Calendar grid
- const days = 35;
- const cols = 7;
- const fillProgress = interpolate(frame, [0, fps * 4], [0, 1], {
- extrapolateRight: "clamp",
+ const line1Progress = spring({ frame: frame - firstLineFrame, fps, config: { damping: 15 } });
+ const line2Progress = spring({ frame: frame - firstLineFrame - lineSpacing, fps, config: { damping: 15 } });
+
+ // Phone entrance animation
+ const phoneProgress = spring({
+ frame,
+ fps,
+ config: { damping: 12, stiffness: 80 },
});
- const filledDays = Math.floor(fillProgress * 30);
- const MOOD_COLORS = ["#10b981", "#22c55e", "#fbbf24", "#10b981", "#22c55e"];
+ // Phone dimensions - 95% of viewport width
+ const phoneWidth = width * 0.95;
+ const phoneAspectRatio = 780 / 380; // Original phone aspect ratio
+ const phoneHeight = phoneWidth * phoneAspectRatio;
+
+ // Image inset percentages (relative to phone frame)
+ const insetPercent = 18 / 380; // ~4.7%
+ const imageWidth = phoneWidth * (1 - insetPercent * 2);
+ const imageHeight = phoneHeight * (744 / 780);
+ const imageInset = phoneWidth * insetPercent;
+ const borderRadius = phoneWidth * (40 / 380);
+
+ // Calculate which image to show (1-266) based on current frame
+ const totalImages = 266;
+ const imageIndex = Math.min(
+ Math.floor((frame / durationInFrames) * totalImages) + 1,
+ totalImages
+ );
+ const paddedIndex = String(imageIndex).padStart(4, "0");
return (
+ {/* Previous frame (prevents flash) */}
+ {imageIndex > 1 && (
+
{
left: 0,
right: 0,
textAlign: "center",
- opacity: interpolate(titleProgress, [0, 1], [0, 1]),
+ fontSize: 160,
+ fontWeight: 800,
+ color: "white",
+ fontFamily: "system-ui, -apple-system, sans-serif",
+ textShadow: "0 4px 30px rgba(0,0,0,0.3)",
+ lineHeight: 1.1,
}}
>
- {/* Calendar grid */}
+ {/* Phone with image sequence */}
- Watch it grow
+ Every month,
+
+
+ a story
- {/* Day labels */}
- {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
- })
+
+ {/* Phone frame overlay */}
+ ![]({staticFile("phone.png")})
+
- {day}
-
- ))}
-
- {/* Days */}
- {[...Array(days)].map((_, i) => {
- const isFilled = i < filledDays;
- const cellProgress = spring({
- frame: frame - i * 2,
- fps,
- config: { damping: 15, stiffness: 150 },
- });
-
- return (
-
+ {/* Previous frame (prevents flash) */}
+ {imageIndex > 1 && (
+ 
- {i + 1}
-
- );
- })}
+ />
+ )}
+ {/* Image sequence inside phone */}
+
+
+ {/* Phone frame overlay */}
+
+
-
-
- {/* Subtitle */}
-
-
- 🏆
-
- 30 Day Streak!
-
-
- You're on fire!
-
-
- Celebrate every milestone
+ Every year,
+
+
+ a journey
+
+
+ {/* Phone container */}
+
+ {/* Previous frame (prevents flash) */}
+ {imageIndex > 1 && (
+ 
+ )}
+ {/* Image sequence inside phone */}
+ })
+
+ {/* Phone frame overlay */}
+
+
+ {/* Phone frame overlay */}
+
{
- ![]({staticFile("app-icon.png")})
- 🔥
-
-
Feels
@@ -545,25 +584,26 @@ const CTAScene: React.FC = () => {
);
};
-// Main composition - 20 seconds total
+// Main composition - 12 seconds total (4 scenes x 3 seconds)
export const ConceptGStreakEffect: React.FC = () => {
const { fps } = useVideoConfig();
+ const sceneDuration = Math.round(3 * fps);
return (
-
+
-
+
-
-
+
-
+