small fix, don't worry about it

2026-07-29 05:53:50 +00:00 · 2026-04-10 12:06:01 +02:00
parent 954a1a1080
commit c6a99c7e21
214 changed files with 40234 additions and 2825 deletions
@@ -0,0 +1,70 @@
+import {interpolate, useCurrentFrame} from 'remotion';
+import {Backdrop} from '../components/Backdrop';
+import {DemoSurface} from '../components/DemoSurface';
+import {HighlightBox} from '../components/HighlightBox';
+import {KineticHeadline} from '../components/KineticHeadline';
+import {SignalBadge} from '../components/SignalBadge';
+import {routeScreens, timeHeadline, timeOverviewStats} from '../data/trailerData';
+import {formatMetricValue, formatStopwatch} from '../lib/format';
+import {easedProgress} from '../lib/motion';
+import {trackeepTheme} from '../theme/trackeep';
+
+const SCALE = 1520 / 1280;
+const s = (value: number) => value * SCALE;
+
+export const TimeTrackingScene = () => {
+  const frame = useCurrentFrame();
+  const timerProgress = easedProgress(frame, 8, 40);
+  const entriesProgress = easedProgress(frame, 16, 28);
+  const billableProgress = easedProgress(frame, 24, 30);
+  const timerBox = easedProgress(frame, 10, 18);
+  const overviewBox = easedProgress(frame, 30, 18);
+  const entriesBox = easedProgress(frame, 50, 18);
+  const buttonProgress = easedProgress(frame, 24, 14);
+  const pulse = 1 + Math.sin(frame / 4) * 0.03;
+
+  return (
+    <Backdrop>
+      <KineticHeadline frame={frame} beat={timeHeadline} titleSize={66} subtitleSize={22} style={{left: 120, top: 92, width: 650}} />
+      <SignalBadge x={1100} y={112} progress={timerProgress} label="Tracked Today" value={formatStopwatch(Math.round(315 * timerProgress))} icon="time" />
+      <SignalBadge x={1364} y={112} progress={entriesProgress} label="Entries" value={`${Math.round(timeOverviewStats[1].target * entriesProgress)}`} icon="analytics" />
+      <SignalBadge
+        x={1570}
+        y={112}
+        progress={billableProgress}
+        label="Billable"
+        value={formatMetricValue(timeOverviewStats[2], timeOverviewStats[2].target * billableProgress)}
+        icon="productivity"
+      />
+      <DemoSurface
+        frame={frame}
+        src={routeScreens.timeTracking}
+        style={{left: 260, top: 188}}
+        rotateX={{from: 4.5, to: 1.5}}
+        rotateY={{from: -4, to: 2}}
+        scale={{from: 1.035, to: 1.005}}
+        translateX={{from: 42, to: -12}}
+        translateY={{from: 20, to: -6}}
+        imageScale={{from: 1.03, to: 1.01}}
+      >
+        <HighlightBox x={s(311)} y={s(120)} width={s(456)} height={s(412)} progress={timerBox} label="Quick capture" />
+        <HighlightBox x={s(792)} y={s(120)} width={s(456)} height={s(412)} progress={overviewBox} label="Today's overview" align="top-right" />
+        <HighlightBox x={s(312)} y={s(558)} width={s(936)} height={s(154)} progress={entriesBox} label="Billable entry" />
+        <div
+          style={{
+            position: 'absolute',
+            left: s(337),
+            top: s(362),
+            width: s(406),
+            height: s(36),
+            borderRadius: 10,
+            opacity: buttonProgress,
+            transform: `scale(${pulse})`,
+            boxShadow: `0 0 0 ${interpolate(buttonProgress, [0, 1], [0, 10])}px rgba(57,185,255,0.12), 0 0 46px ${trackeepTheme.colors.primarySoft}`,
+            border: `1px solid rgba(57, 185, 255, 0.65)`
+          }}
+        />
+      </DemoSurface>
+    </Backdrop>
+  );
+};