diff --git a/remotion/Composition.tsx b/remotion/Composition.tsx
index 7ffff0a..17df693 100644
--- a/remotion/Composition.tsx
+++ b/remotion/Composition.tsx
@@ -1,9 +1,10 @@
-import { AbsoluteFill, useCurrentFrame, interpolate, staticFile, Audio } from "remotion";
+import { AbsoluteFill, useCurrentFrame, interpolate, staticFile, Audio, Sequence } from "remotion";
import WelcomeScene from "./rewind/WelcomeScene";
import CountryScene from "./rewind/CountryScene";
import MemoriesScene from "./rewind/MemoriesScene";
import AlbumsScene from "./rewind/AlbumScene";
import FriendsScene from "./rewind/FriendsScene";
+import PowertoolsLogo from "./rewind/Powertoolslogo";
export interface Scene {
message: string;
@@ -14,10 +15,8 @@ export interface Scene {
export const IntroComposition = ({ scenes }: { scenes: Scene[] }) => {
const frame = useCurrentFrame();
const screenDuration = 120;
- const sceneIndex = Math.floor(frame / screenDuration) % scenes.length;
- const scene = scenes[sceneIndex];
- const renderScene = () => {
+ const renderScene = (scene: Scene) => {
switch (scene.type) {
case "WELCOME":
return ;
@@ -32,7 +31,7 @@ export const IntroComposition = ({ scenes }: { scenes: Scene[] }) => {
default:
return ;
}
- }
+ };
return (
{
fontFamily: "sans-serif",
}}
>
- {renderScene()}
+
+
+
+
+ {scenes.map((scene, index) => (
+
+ {renderScene(scene)}
+
+ ))}
+
);
diff --git a/remotion/rewind/Powertoolslogo.tsx b/remotion/rewind/Powertoolslogo.tsx
new file mode 100644
index 0000000..4b2df44
--- /dev/null
+++ b/remotion/rewind/Powertoolslogo.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import { spring, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
+
+interface PowertoolsLogoProps {
+ size?: number;
+}
+
+export default function PowertoolsLogo({ size = 379 }: PowertoolsLogoProps) {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Create staggered animations for each rectangle
+ const scale1 = spring({
+ frame,
+ fps,
+ from: 0,
+ to: 1,
+ config: { damping: 12 }
+ });
+
+ const scale2 = spring({
+ frame: frame - 5,
+ fps,
+ from: 0,
+ to: 1,
+ config: { damping: 12 }
+ });
+
+ const scale3 = spring({
+ frame: frame - 10,
+ fps,
+ from: 0,
+ to: 1,
+ config: { damping: 12 }
+ });
+
+ const scale4 = spring({
+ frame: frame - 15,
+ fps,
+ from: 0,
+ to: 1,
+ config: { damping: 12 }
+ });
+
+ const scale5 = spring({
+ frame: frame - 20,
+ fps,
+ from: 0,
+ to: 1,
+ config: { damping: 12 }
+ });
+
+ // Text animation
+ const textOpacity = spring({
+ frame: frame - 25,
+ fps,
+ from: 0,
+ to: 1,
+ config: { damping: 12 }
+ });
+
+ // Rewind text animations - bouncing and color changing effect
+ const rewindRotation = interpolate(
+ frame,
+ [0, 30],
+ [360, 0],
+ {
+ extrapolateRight: 'clamp'
+ }
+ );
+
+ const bounceY = spring({
+ frame: frame - 25,
+ fps,
+ from: -20,
+ to: 0,
+ config: { mass: 0.5, damping: 4 }
+ });
+
+ const hue = interpolate(
+ frame % 120,
+ [0, 60, 120],
+ [0, 180, 360]
+ );
+
+ return (
+
+
+
+
+ Immich Power Tools
+
+
+ Rewind
+
+
+
+ );
+}