device-mockup-zoom

1import { loadFont } from "@remotion/google-fonts/Inter";
2import {
3  AbsoluteFill,
4  Img,
5  interpolate,
6  spring,
7  useCurrentFrame,
8  useVideoConfig,
9} from "remotion";
10import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
11import { DURATION, EASING, STAGGER } from "@/remotion/lib/motion-tokens";
12import { springSmooth } from "@/remotion/lib/springs";
13 
14const { fontFamily } = loadFont("normal", {
15  weights: ["500", "600", "700", "800"],
16  subsets: ["latin"],
17});
18 
19export type DeviceMockupZoomProps = {
20  src?: string;
21  title?: string;
22  subtitle?: string;
23  eyebrow?: string;
24  children?: React.ReactNode;
25  device?: "phone" | "browser" | "laptop";
26  backgroundColor?: string;
27  accentColor?: string;
28};
29 
30const COLORS = {
31  bg: "#080810",
32  panel: "#0d111b",
33  panelSoft: "#111827",
34  screen: "#f6f1e8",
35  ink: "#111827",
36  muted: "#6b7280",
37  line: "rgba(17, 24, 39, 0.12)",
38  chrome: "#171b26",
39  chromeLight: "#242a3a",
40  accent: "#e8b86d",
41  teal: "#2dd4bf",
42  rose: "#f472b6",
43} as const;
44 
45const clampProgress = (
46  frame: number,
47  input: [number, number],
48  output: [number, number],
49) =>
50  interpolate(frame, input, output, {
51    easing: EASING.enter,
52    extrapolateLeft: "clamp",
53    extrapolateRight: "clamp",
54  });
55 
56type MockupContentProps = {
57  frame: number;
58  accentColor: string;
59};
60 
61const BrowserDashboard: React.FC<MockupContentProps> = ({
62  frame,
63  accentColor,
64}) => {
65  const bars = [0.46, 0.72, 0.58, 0.9, 0.66, 0.82, 0.54];
66  const graphProgress = clampProgress(frame, [18, 64], [0, 1]);
67  const rowProgress = clampProgress(frame, [28, 70], [0, 1]);
68 
69  return (
70    <div
71      style={{
72        width: "100%",
73        height: "100%",
74        background: COLORS.screen,
75        color: COLORS.ink,
76        display: "grid",
77        gridTemplateColumns: "22% 1fr",
78        fontFamily,
79      }}
80    >
81      <div
82        style={{
83          borderRight: `1px solid ${COLORS.line}`,
84          padding: "5% 6%",
85          display: "flex",
86          flexDirection: "column",
87          gap: "6%",
88          background: "#fffaf1",
89        }}
90      >
91        <div
92          style={{
93            width: "58%",
94            height: "5%",
95            borderRadius: 999,
96            background: accentColor,
97          }}
98        />
99        {["Overview", "Funnels", "Segments", "Exports"].map((item, index) => (
100          <div
101            key={item}
102            style={{
103              height: "7%",
104              borderRadius: 12,
105              padding: "0 10%",
106// … truncated