logo-reveal

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { PathDraw } from "@/remotion/primitives/path-draw";
4import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
5import { DELAY, DURATION, EASING, STAGGER } from "@/remotion/lib/motion-tokens";
6import { springSmooth } from "@/remotion/lib/springs";
7 
8const { fontFamily } = loadFont("normal", {
9  weights: ["500", "600"],
10  subsets: ["latin"],
11});
12 
13export type LogoRevealProps = {
14  /** One path, or several drawn in sequence for a multi-stroke mark. */
15  pathD: string | string[];
16  /** Omit to frame the mark automatically from its bounding box. */
17  viewBox?: string;
18  /** Mark size in pixels — defaults to a share of the frame's short edge. */
19  size?: number;
20  wordmark?: string;
21  tagline?: string;
22  stroke?: string;
23  strokeWidth?: number;
24  /** Fill flooded into the mark once the stroke closes. */
25  fill?: string;
26  backgroundColor?: string;
27};
28 
29const COLORS = {
30  bg: "#080810",
31  stroke: "#e8b86d",
32  glow: "rgba(232,184,109,0.22)",
33  ink: "#f4f4f5",
34  muted: "rgba(244,244,245,0.6)",
35} as const;
36 
37/** Beats: bloom → mark draws → wordmark → tagline. */
38const BEATS = {
39  mark: DELAY.short,
40  wordmark: DELAY.short + DURATION.slow,
41  tagline: DELAY.short + DURATION.slow + STAGGER.relaxed,
42} as const;
43 
44export const LogoReveal: React.FC<LogoRevealProps> = ({
45  pathD,
46  viewBox,
47  size,
48  wordmark,
49  tagline,
50  stroke = COLORS.stroke,
51  strokeWidth,
52  fill,
53  backgroundColor = COLORS.bg,
54}) => {
55  const frame = useCurrentFrame();
56  const { width, height, fps } = useVideoConfig();
57  const safeArea = getSafeAreaPadding({ width, height });
58 
59  const hasCopy = Boolean(wordmark || tagline);
60  // Without a wordmark the mark carries the whole frame, so it grows to fill
61  // the space the copy would otherwise take.
62  const markSize =
63    size ?? Math.round(Math.min(width, height) * (hasCopy ? 0.4 : 0.56));
64  const lineWidth = strokeWidth ?? Math.max(2, Math.round(markSize * 0.022));
65  const drawFrames = DURATION.slow * 2;
66 
67  // The bloom lands first and settles under the mark, so the frame is never
68  // empty while the stroke is still short.
69  const bloom = spring({
70    frame,
71    fps,
72    config: springSmooth,
73    durationInFrames: DURATION.slow,
74  });
75 
76  const wordmarkLift = spring({
77    frame: frame - BEATS.wordmark,
78    fps,
79    config: springSmooth,
80    durationInFrames: DURATION.normal,
81  });
82// … truncated