From 7f359c10d70a34ba792a5d121a838fb7f62b99c8 Mon Sep 17 00:00:00 2001
From: sai80082 <saicharan.guntupalli@gmail.com>
Date: Mon, 2 Dec 2024 12:41:52 +0530
Subject: [PATCH] feat: add logo screen at start

---
 remotion/Composition.tsx           |  33 +++++-
 remotion/rewind/Powertoolslogo.tsx | 169 +++++++++++++++++++++++++++++
 2 files changed, 196 insertions(+), 6 deletions(-)
 create mode 100644 remotion/rewind/Powertoolslogo.tsx

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 <WelcomeScene message={scene.message} emoji={scene.emoji} />;
@@ -32,7 +31,7 @@ export const IntroComposition = ({  scenes }: { scenes: Scene[] }) => {
       default:
         return <WelcomeScene message={scene.message} emoji={scene.emoji} />;
     }
-  }
+  };
 
   return (
     <AbsoluteFill
@@ -44,7 +43,29 @@ export const IntroComposition = ({  scenes }: { scenes: Scene[] }) => {
         fontFamily: "sans-serif",
       }}
     >
-      {renderScene()}
+      <Sequence name="Logo Intro" from={0} durationInFrames={screenDuration}>
+        <div style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }}>
+          <PowertoolsLogo size={200} />
+        </div>
+      </Sequence>
+
+      {scenes.map((scene, index) => (
+        <Sequence
+          key={index}
+          name={`Scene ${index + 1} - ${scene.type}`}
+          from={screenDuration * (index + 1)}
+          durationInFrames={screenDuration}
+        >
+          {renderScene(scene)}
+        </Sequence>
+      ))}
+
       <Audio src={staticFile("audio/rewind.mp3")} />
     </AbsoluteFill>
   );
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 (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <svg width={size} height={size} viewBox="0 0 379 379" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect 
+          x="48" 
+          y="34" 
+          width="283" 
+          height="94.7184" 
+          rx="20" 
+          fill="#FA2921"
+          transform={`scale(${scale1})`}
+          transform-origin="center"
+        />
+        <rect 
+          x="49.1551" 
+          y="142.58" 
+          width="97.0286" 
+          height="93.5633" 
+          rx="20" 
+          fill="#ED79B5"
+          transform={`scale(${scale2})`}
+          transform-origin="center"
+        />
+        <rect 
+          x="233.971" 
+          y="250.004" 
+          width="97.0286" 
+          height="94.7184" 
+          rx="20" 
+          fill="#18C249"
+          transform={`scale(${scale3})`}
+          transform-origin="center"
+        />
+        <rect 
+          x="160.045" 
+          y="142.58" 
+          width="170.955" 
+          height="93.5633" 
+          rx="20" 
+          fill="#1E83F7"
+          transform={`scale(${scale4})`}
+          transform-origin="center"
+        />
+        <rect 
+          x="48" 
+          y="250.004" 
+          width="170.955" 
+          height="94.7184" 
+          rx="20" 
+          fill="#FFB400"
+          transform={`scale(${scale5})`}
+          transform-origin="center"
+        />
+      </svg>
+      <div style={{ 
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        opacity: textOpacity,
+        marginTop: 20
+      }}>
+        <h1 style={{
+          color: 'white',
+          margin: 0,
+          fontSize: 32
+        }}>
+          Immich Power Tools
+        </h1>
+        <h2 style={{
+          color: `hsl(${hue}, 100%, 50%)`,
+          margin: '10px 0 0 0',
+          fontSize: 40,
+          transform: `rotate(${rewindRotation}deg) translateY(${bounceY}px)`,
+          transformOrigin: 'center',
+          textShadow: '0 0 10px rgba(255,255,255,0.5)',
+          fontWeight: 'bold',
+          letterSpacing: '2px'
+        }}>
+          Rewind
+        </h2>
+      </div>
+    </div>
+  );
+}