alright

remotion-dev · Dec 17, 2024 · f332505 · f332505
1 parent 2146e8a
commit f332505
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 45 deletions.
diff --git a/public/PinkHighlight.png b/public/PinkHighlight.png
diff --git a/public/WhiteHighlight.png b/public/WhiteHighlight.png
diff --git a/remotion/Opening/Title.tsx b/remotion/Opening/Title.tsx
@@ -7,11 +7,8 @@ import {
   useVideoConfig,
 } from "remotion";
 import type { z } from "zod";
-import {
-  PANE_BACKGROUND,
-  PANE_BORDER,
-  PANE_TEXT_COLOR,
-} from "../TopLanguages/Pane";
+import { PaneEffect } from "../PaneEffect";
+import { PANE_BACKGROUND, PANE_TEXT_COLOR } from "../TopLanguages/Pane";
 import { TitleImage, type openingTitleSchema } from "./TitleImage";
 
 const title: React.CSSProperties = {
@@ -80,21 +77,17 @@ export const OpeningTitle: React.FC<
         scale: String(login.length > 18 ? 0.75 : 1),
       }}
     >
-      <div
+      <PaneEffect
+        innerRadius={INNER_BORDER_RADIUS + PADDING}
         style={{
-          padding: 20,
-          backgroundColor: "rgba(255, 255, 255, 0.1)",
-          borderRadius: INNER_BORDER_RADIUS + PADDING + 20,
           transform: `scale(${scaleDivided}) rotateY(${x}deg) rotateX(${
             rotation + rotateX
           }rad) translateY(${translateY}px)`,
-          border: "1px solid rgba(255, 255, 255, 0.1)",
         }}
       >
         <div
           style={{
             background: PANE_BACKGROUND,
-            border: PANE_BORDER,
             display: "inline-flex",
             flexDirection: "row",
             paddingRight: 70,
@@ -113,7 +106,7 @@ export const OpeningTitle: React.FC<
             <div style={title}>{login}</div>
           </div>
         </div>
-      </div>
+      </PaneEffect>
     </AbsoluteFill>
   );
 };
diff --git a/remotion/PaneEffect.tsx b/remotion/PaneEffect.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { AbsoluteFill, Img, staticFile } from "remotion";
+
+export const PaneEffect: React.FC<{
+  readonly children: React.ReactNode;
+  readonly innerRadius: number;
+  readonly style: React.CSSProperties;
+}> = ({ children, innerRadius, style }) => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        ...style,
+      }}
+    >
+      <AbsoluteFill>
+        <div
+          style={{
+            height: "100%",
+            width: "100%",
+            zIndex: -1,
+          }}
+        >
+          <Img
+            style={{
+              height: "130%",
+              marginTop: "-5%",
+              width: "100%",
+              objectFit: "fill",
+              scale: String(1.6),
+              opacity: 0.1,
+            }}
+            src={staticFile("WhiteHighlight.png")}
+          />
+        </div>
+      </AbsoluteFill>
+      <AbsoluteFill>
+        <div
+          style={{
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: -1,
+          }}
+        >
+          <Img
+            style={{
+              height: "100%",
+              marginTop: "-5%",
+              aspectRatio: "1 / 1",
+              scale: "4",
+            }}
+            src={staticFile("PinkHighlight.png")}
+          />
+        </div>
+      </AbsoluteFill>
+
+      <div
+        style={{
+          padding: 20,
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+          border: "1px solid rgba(255, 255, 255, 0.2)",
+          borderRadius: innerRadius + 20,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/remotion/PinkHighlight.tsx b/remotion/PinkHighlight.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+
+export const PinkHighlight: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <AbsoluteFill
+        style={{
+          backgroundColor: "pink",
+          borderRadius: "50%",
+          filter: "blur(140px)",
+          height: "33.3333%",
+          width: "33.3333%",
+          marginLeft: "33.33333%",
+          marginTop: "33.33333%",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
diff --git a/remotion/Root.tsx b/remotion/Root.tsx
@@ -24,6 +24,7 @@ import { OgImageContent } from "./OgImage";
 import { OPENING_SCENE_LENGTH, OpeningScene } from "./Opening";
 import { OpeningTitle } from "./Opening/Title";
 import { openingTitleSchema } from "./Opening/TitleImage";
+import { PinkHighlight } from "./PinkHighlight";
 import { Poof } from "./Poof";
 import { Productivity } from "./Productivity/Productivity";
 import { Tablet, tableSchema } from "./Productivity/Tablet";
@@ -78,6 +79,7 @@ import {
   TopLanguagesTitleCard,
   topLanguagesTitleCardSchema,
 } from "./TopLanguages/TitleCard";
+import { WhiteHighlight } from "./WhiteHighlight";
 
 export const RemotionRoot: React.FC = () => {
   return (
@@ -1123,6 +1125,18 @@ export const RemotionRoot: React.FC = () => {
           }}
         />
       </Folder>
+      <Still
+        component={PinkHighlight}
+        id="PinkHighlight"
+        width={1080}
+        height={1080}
+      />
+      <Still
+        component={WhiteHighlight}
+        id="WhiteHighlight"
+        width={1080}
+        height={540}
+      />
     </>
   );
 };
diff --git a/remotion/TopLanguages/TitleCard.tsx b/remotion/TopLanguages/TitleCard.tsx
@@ -47,7 +47,6 @@ export const TopLanguagesTitleCard: React.FC<
       extrapolateRight: "clamp",
     },
   );
-  console.log({ durationInFrames, hide });
   const zoomOutProgress = interpolate(frame, [0, TITLE_CARD_DURATION], [0, 1]);
   const scale = interpolate(zoomOutProgress, [0, 1], [1.3, 1]);
   const opacity = Math.min(frame / 30) * hide;

diff --git a/remotion/TopLanguages/TopLanguagesTitle.tsx b/remotion/TopLanguages/TopLanguagesTitle.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { spring, useCurrentFrame, useVideoConfig } from "remotion";
 import { z } from "zod";
+import { PaneEffect } from "../PaneEffect";
 import { PANE_BACKGROUND, PANE_BORDER, PANE_TEXT_COLOR } from "./Pane";
 import { RotatingPlanet } from "./RotatingPlanet";
 
@@ -28,43 +29,47 @@ export const TopLanguagesTitle: React.FC<z.infer<typeof topLanguagesTitle>> = ({
   });
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        backgroundColor: PANE_BACKGROUND,
-        border: PANE_BORDER,
-        padding: PADDING,
-        paddingRight: PADDING * 2,
-        alignItems: "center",
-        borderRadius: INNER_BORDER_RADIUS + PADDING,
-        scale: String(spr),
-      }}
+    <PaneEffect
+      style={{ scale: String(spr) }}
+      innerRadius={INNER_BORDER_RADIUS + PADDING}
     >
       <div
         style={{
-          borderRadius: INNER_BORDER_RADIUS,
-          height: 120,
-          width: 120,
-          marginRight: PADDING,
           display: "flex",
-          justifyContent: "center",
+          flexDirection: "row",
+          backgroundColor: PANE_BACKGROUND,
+          border: PANE_BORDER,
+          padding: PADDING,
+          paddingRight: PADDING * 2,
           alignItems: "center",
+          borderRadius: INNER_BORDER_RADIUS + PADDING,
         }}
       >
-        <RotatingPlanet randomSeed={randomizePlanetSeed} />
-      </div>
-      <div
-        style={{
-          color: PANE_TEXT_COLOR,
-          fontSize: 55,
-          fontFamily: "Mona Sans",
-          fontWeight: 800,
-          lineHeight: 1.1,
-        }}
-      >
-        My Top <br /> {pluralize ? "Languages" : "Language"}
-      </div>
-    </div>
+        <div
+          style={{
+            borderRadius: INNER_BORDER_RADIUS,
+            height: 120,
+            width: 120,
+            marginRight: PADDING,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <RotatingPlanet randomSeed={randomizePlanetSeed} />
+        </div>
+        <div
+          style={{
+            color: PANE_TEXT_COLOR,
+            fontSize: 55,
+            fontFamily: "Mona Sans",
+            fontWeight: 800,
+            lineHeight: 1.1,
+          }}
+        >
+          My Top <br /> {pluralize ? "Languages" : "Language"}
+        </div>
+      </div>{" "}
+    </PaneEffect>
   );
 };
diff --git a/remotion/WhiteHighlight.tsx b/remotion/WhiteHighlight.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+
+export const WhiteHighlight: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <AbsoluteFill
+        style={{
+          backgroundColor: "white",
+          borderRadius: "150px",
+          filter: "blur(100px)",
+          scale: String(0.6),
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
diff --git a/remotion/prefetch-all-assets.ts b/remotion/prefetch-all-assets.ts
@@ -1,4 +1,4 @@
-import { prefetch } from "remotion";
+import { prefetch, staticFile } from "remotion";
 import type { Planet, Rocket, TopLanguage } from "../src/config";
 import { contributionSceneAssets } from "./Contributions";
 import { prefetchLandingAssets } from "./EndScene";
@@ -34,6 +34,8 @@ const collectAllAssetsToPrefetch = ({
   return [
     sideRocket,
     frontRocket,
+    staticFile("WhiteHighlight.png"),
+    staticFile("PinkHighlight.png"),
     ...getMainAssetsToPrefetch(durationInFrames, rocket),
     ...getTopLanguageAssetsToPrefetch({ language1, language2, language3 }),
     ...getOpeningAssetsToPrefetch(rocket),