audiogram-scene

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { AbsoluteFill, Img, useCurrentFrame, useVideoConfig } from "remotion";
3import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
4import { DURATION } from "@/remotion/lib/motion-tokens";
5import { AudiogramBars } from "@/remotion/primitives/audiogram-bars";
6import { FadeIn } from "@/remotion/primitives/fade-in";
7 
8const { fontFamily } = loadFont("normal", {
9  weights: ["400", "600", "700"],
10  subsets: ["latin"],
11});
12 
13export type AudiogramSceneProps = {
14  src: string;
15  title?: string;
16  subtitle?: string;
17  logoSrc?: string;
18  logoSize?: number;
19  accentColor?: string;
20  backgroundColor?: string;
21};
22 
23const COLORS = {
24  bg: "#080810",
25  title: "#fafafa",
26  subtitle: "#d4d4d8",
27  glow: "rgba(232,184,109,0.16)",
28  accent: "#e8b86d",
29} as const;
30 
31export const AudiogramScene: React.FC<AudiogramSceneProps> = ({
32  src,
33  title,
34  subtitle,
35  logoSrc,
36  logoSize,
37  accentColor = COLORS.accent,
38  backgroundColor = COLORS.bg,
39}) => {
40  const frame = useCurrentFrame();
41  const { width, height } = useVideoConfig();
42  const safeArea = getSafeAreaPadding({ width, height });
43  const hasHeader = Boolean(title || subtitle || logoSrc);
44 
45  return (
46    <AbsoluteFill
47      style={{
48        backgroundColor,
49        backgroundImage: `radial-gradient(ellipse 90% 55% at 50% 0%, ${COLORS.glow}, transparent)`,
50        paddingLeft: safeArea.paddingLeft,
51        paddingRight: safeArea.paddingRight,
52        paddingTop: safeArea.paddingTop,
53        paddingBottom: safeArea.paddingBottom + scaleFont(28, width),
54        display: "flex",
55        flexDirection: "column",
56        // Header and bars read as one block; `space-between` left a dead band
57        // across the middle of the frame at every aspect ratio.
58        justifyContent: "center",
59        alignItems: "stretch",
60        gap: scaleFont(64, width),
61        fontFamily,
62      }}
63    >
64      {hasHeader ? (
65        <FadeIn durationInFrames={DURATION.fast}>
66          <div
67            style={{
68              display: "flex",
69              flexDirection: "column",
70              alignItems: logoSrc ? "center" : "flex-start",
71              textAlign: logoSrc ? "center" : "left",
72              gap: scaleFont(12, width),
73            }}
74          >
75            {logoSrc ? (
76              <Img
77                src={logoSrc}
78                style={{
79                  width: logoSize ?? scaleFont(80, width),
80                  height: logoSize ?? scaleFont(80, width),
81// … truncated