new style for contributions

remotion-dev · Dec 17, 2024 · b654f41 · b654f41
1 parent cf7bb52
commit b654f41
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 150 deletions.
diff --git a/remotion/Contributions/index.tsx b/remotion/Contributions/index.tsx
@@ -13,7 +13,7 @@ import {
 } from "remotion";
 
 import React, { useMemo } from "react";
-import type { Planet, Rocket } from "../../src/config";
+import { type Planet, type Rocket } from "../../src/config";
 import { appearDelays } from "../Contributions/compute-positions";
 import { Gradient } from "../Gradients/NativeGradient";
 import { IssueNumber } from "../Issues/IssueNumber";
@@ -46,8 +46,7 @@ const GRID_HEIGHT = ROWS * SIZE;
 const TRANSITION_GLOW = 45;
 const START_SPREAD = TRANSITION_GLOW + 10;
 
-const FADE_OUT_START = 80;
-const FADE_OUT_DURATION = 20;
+const TOP_OFFSET = 200;
 
 const mapRowToMove: Record<number, number> = {
   0: SIZE * 3,
@@ -222,14 +221,16 @@ export const ContributionsScene: React.FC<{
     extrapolateRight: "clamp",
   });
 
-  const numberEnter = spring({
+  const constantScale = interpolate(frame, [0, 50], [0.8, 1]);
+
+  const disappear = spring({
     fps,
     frame,
     config: {
       damping: 200,
     },
+    delay: 90,
   });
-  const numberTop = interpolate(numberEnter, [0, 1], [250, 0]);
 
   return (
     <AbsoluteFill>
@@ -247,92 +248,87 @@ export const ContributionsScene: React.FC<{
       </AbsoluteFill>
       <AbsoluteFill
         style={{
-          justifyContent: "center",
-          alignItems: "center",
-          zIndex: 0,
-        }}
-      >
-        <PaneEffect
-          padding={20}
-          pinkHighlightOpacity={1}
-          whiteHighlightOpacity={1}
-          innerRadius={20}
-          style={{}}
-        >
-          <div
-            style={{
-              width: GRID_WIDTH,
-              height: GRID_HEIGHT,
-              background: PANE_BACKGROUND,
-              padding: 20,
-              boxSizing: "content-box",
-              borderRadius: 20,
-            }}
-          />
-        </PaneEffect>
-      </AbsoluteFill>
-      <AbsoluteFill
-        style={{
-          justifyContent: "center",
-          alignItems: "center",
-          zIndex: 1,
+          scale: String(constantScale + interpolate(disappear, [0, 1], [0, 3])),
+          transform:
+            "translateY(" + interpolate(disappear, [0, 1], [0, 500]) + "px)",
         }}
       >
-        <div
-          style={{
-            position: "relative",
-            width: GRID_WIDTH,
-            height: GRID_HEIGHT,
-          }}
-        >
-          {new Array(COUNT).fill(0).map((_, i) => (
-            <Dot
-              key={i}
-              frame={frame}
-              i={i}
-              data={contributionData[i]}
-              targetColumn={targetColumn}
-              maxContributions={maxContributions}
-            />
-          ))}
-        </div>
-
         <AbsoluteFill
           style={{
-            marginTop: numberTop,
-            opacity:
-              frame >= FADE_OUT_START &&
-              frame < FADE_OUT_START + FADE_OUT_DURATION
-                ? (FADE_OUT_DURATION - (frame - FADE_OUT_START)) /
-                  FADE_OUT_DURATION
-                : frame < FADE_OUT_START
-                  ? 1
-                  : 0,
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 0,
           }}
         >
-          <IssueNumber
-            align="center"
-            label="Contributions"
-            currentNumber={Math.floor(number)}
-            max={total}
-          />
+          <PaneEffect
+            padding={20}
+            pinkHighlightOpacity={1}
+            whiteHighlightOpacity={1}
+            innerRadius={20}
+            style={{}}
+          >
+            <div>
+              <IssueNumber
+                align="center"
+                label="Contributions"
+                currentNumber={Math.floor(number)}
+                max={total}
+              />
+            </div>
+            <div
+              style={{
+                width: GRID_WIDTH,
+                height: GRID_HEIGHT,
+                background: PANE_BACKGROUND,
+                padding: 20,
+                boxSizing: "content-box",
+                borderRadius: 20,
+              }}
+            />
+          </PaneEffect>
         </AbsoluteFill>
-
         <AbsoluteFill
           style={{
-            left: targetColumn * SIZE + 120,
-            top: 440,
-            position: "absolute",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 1,
           }}
         >
-          <Img
-            src={FrontRocketSource.getFrontRocketSource(rocket)}
+          <div
             style={{
-              width: 732 / 8,
-              height: 1574 / 8,
-              transform: "rotate(90deg)",
+              position: "relative",
+              width: GRID_WIDTH,
+              height: GRID_HEIGHT,
+              marginTop: TOP_OFFSET,
             }}
-          />
+          >
+            {new Array(COUNT).fill(0).map((_, i) => (
+              <Dot
+                key={i}
+                frame={frame}
+                i={i}
+                data={contributionData[i]}
+                targetColumn={targetColumn}
+                maxContributions={maxContributions}
+              />
+            ))}
+          </div>
+          <AbsoluteFill
+            style={{
+              left: targetColumn * SIZE + 120,
+              top: 440 + TOP_OFFSET / 2,
+              position: "absolute",
+            }}
+          >
+            <Img
+              src={FrontRocketSource.getFrontRocketSource(rocket)}
+              style={{
+                width: 732 / 8,
+                height: 1574 / 8,
+                transform: "rotate(90deg)",
+              }}
+            />
+          </AbsoluteFill>
         </AbsoluteFill>
       </AbsoluteFill>
     </AbsoluteFill>

diff --git a/remotion/IGStory/PullRequests.tsx b/remotion/IGStory/PullRequests.tsx
@@ -1,5 +1,3 @@
-import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
-
 export const PullRequests: React.FC<{
   pullRequests: number;
 }> = ({ pullRequests }) => {
@@ -44,7 +42,7 @@ export const PullRequests: React.FC<{
           style={{
             fontFamily: "Mona Sans",
             fontWeight: "500",
-            color: PANE_TEXT_COLOR,
+            color: "white",
             fontSize: digits > 2 ? 55 : 65,
             lineHeight: "65px",
           }}

diff --git a/remotion/Issues/IssueNumber.tsx b/remotion/Issues/IssueNumber.tsx
@@ -1,15 +1,14 @@
 import React from "react";
-import { AbsoluteFill } from "remotion";
 import { SevenSegment } from "../SevenSegment/SevenSegmentNumber";
 
 export const IssueNumber: React.FC<{
-  currentNumber: number;
-  max: number;
-  label: string;
-  align: "left" | "right" | "center";
+  readonly currentNumber: number;
+  readonly max: number;
+  readonly label: string;
+  readonly align: "left" | "right" | "center";
 }> = ({ currentNumber, label, align, max }) => {
   return (
-    <AbsoluteFill
+    <div
       style={{
         color: "white",
         fontFamily: "Mona Sans",
@@ -29,8 +28,6 @@ export const IssueNumber: React.FC<{
                   alignItems: "center",
                 }),
           width: 300,
-          position: "absolute",
-          bottom: 35,
           paddingLeft: 10,
           paddingRight: 10,
           paddingTop: 5,
@@ -57,6 +54,6 @@ export const IssueNumber: React.FC<{
           {label}
         </div>
       </div>
-    </AbsoluteFill>
+    </div>
   );
 };
diff --git a/remotion/OgImage/PullRequests.tsx b/remotion/OgImage/PullRequests.tsx
@@ -1,5 +1,3 @@
-import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
-
 export const PullRequests: React.FC<{
   pullRequests: number;
 }> = ({ pullRequests }) => {
@@ -36,15 +34,15 @@ export const PullRequests: React.FC<{
           }}
         >
           <path
-            fill={PANE_TEXT_COLOR}
+            fill={"white"}
             d="M80 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm32.4 97.2c28-12.4 47.6-40.5 47.6-73.2c0-44.2-35.8-80-80-80S0 35.8 0 80c0 32.8 19.7 61 48 73.3V358.7C19.7 371 0 399.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-32.8-19.7-61-48-73.3V272c26.7 20.1 60 32 96 32h86.7c12.3 28.3 40.5 48 73.3 48c44.2 0 80-35.8 80-80s-35.8-80-80-80c-32.8 0-61 19.7-73.3 48H208c-49.9 0-91-38.1-95.6-86.8zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM344 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"
           />
         </svg>
         <div
           style={{
             fontFamily: "Mona Sans",
             fontWeight: "500",
-            color: PANE_TEXT_COLOR,
+            color: "white",
             fontSize: digits > 2 ? 55 : 65,
             lineHeight: "65px",
           }}
@@ -56,7 +54,7 @@ export const PullRequests: React.FC<{
         style={{
           fontFamily: "Mona Sans",
           fontSize: 20,
-          color: PANE_TEXT_COLOR,
+          color: "white",
           fontWeight: 500,
         }}
       >

diff --git a/remotion/Productivity/Productivity.tsx b/remotion/Productivity/Productivity.tsx
@@ -8,7 +8,7 @@ import {
 } from "remotion";
 import type { Hour, ProductivityPerHour, Weekday } from "../../src/config";
 import { isMobileDevice } from "../Opening/devices";
-import { TABLET_BG } from "./TabletSVG";
+import { PANE_BACKGROUND } from "../TopLanguages/Pane";
 import { TopDay } from "./TopDay";
 
 type Props = {
@@ -18,9 +18,9 @@ type Props = {
 };
 
 const Bar = (props: {
-  productivity: number;
-  index: number;
-  mostProductive: boolean;
+  readonly productivity: number;
+  readonly index: number;
+  readonly mostProductive: boolean;
 }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -51,9 +51,7 @@ const Bar = (props: {
           width: "100%",
           height: `${props.productivity * 100}%`,
           borderRadius: 4,
-          backgroundColor: props.mostProductive
-            ? "rgba(255, 255, 255, 0.7)"
-            : "#181B28",
+          backgroundColor: props.mostProductive ? PANE_BACKGROUND : "#181B28",
           border: "3px solid rgba(255, 255, 255, 0.1)",
         }}
       />
@@ -62,8 +60,8 @@ const Bar = (props: {
 };
 
 const ProductivityGraph = (props: {
-  productivityPerHour: Array<ProductivityPerHour>;
-  style?: React.CSSProperties;
+  readonly productivityPerHour: Array<ProductivityPerHour>;
+  readonly style?: React.CSSProperties;
 }) => {
   const maxProductivity = Math.max(
     ...props.productivityPerHour.map((p) => p.productivity),
@@ -128,7 +126,6 @@ export const Productivity: React.FC<Props> = ({ graphData, weekday, hour }) => {
   return (
     <AbsoluteFill
       style={{
-        background: TABLET_BG,
         display: "flex",
       }}
     >
@@ -152,6 +149,8 @@ export const Productivity: React.FC<Props> = ({ graphData, weekday, hour }) => {
         delay={60}
         soundDelay={95}
       />
+      <br />
+      <br />
       <TopDay
         values={[
           "0",
@@ -187,7 +186,7 @@ export const Productivity: React.FC<Props> = ({ graphData, weekday, hour }) => {
           if (value === "12") {
             return "12 pm";
           }
-          
+
           if (value === "0") {
             return "12 am";
           }
@@ -200,7 +199,13 @@ export const Productivity: React.FC<Props> = ({ graphData, weekday, hour }) => {
         }}
         soundDelay={120}
       />
-
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
       <div
         style={{
           display: "flex",