path-draw

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { EASING } from "@/remotion/lib/motion-tokens";
3import {
4  clampProgress,
5  fitViewBox,
6  getPathDrawStyles,
7  samplePath,
8} from "@/remotion/lib/path-utils";
9 
10export type PathDrawProps = {
11  /** One path, or several drawn in order with `staggerInFrames` between them. */
12  d: string | string[];
13  durationInFrames?: number;
14  delayInFrames?: number;
15  /** Offset between the start of each path when `d` is an array. */
16  staggerInFrames?: number;
17  stroke?: string;
18  strokeWidth?: number;
19  width?: number;
20  height?: number;
21  /** Omit to frame the artwork automatically from its bounding box. */
22  viewBox?: string;
23  /** Colour flooded in behind the stroke once a path finishes drawing. */
24  fill?: string;
25  /** Bright dot riding the tip of the stroke while it draws. */
26  head?: boolean;
27  glow?: boolean;
28};
29 
30/** Padding in path units so the stroke is not clipped by an auto viewBox. */
31const AUTO_FIT_PADDING = 8;
32 
33export const PathDraw: React.FC<PathDrawProps> = ({
34  d,
35  durationInFrames = 60,
36  delayInFrames = 0,
37  staggerInFrames = 8,
38  stroke = "#e8b86d",
39  strokeWidth = 4,
40  width = 200,
41  height = 200,
42  viewBox,
43  fill,
44  head = true,
45  glow = true,
46}) => {
47  const frame = useCurrentFrame();
48  const { id } = useVideoConfig();
49  const paths = (Array.isArray(d) ? d : [d]).filter(Boolean);
50  // Filter ids are document-global, so two PathDraws mounted on one frame
51  // would share a filter. Scoping by composition keeps them independent.
52  const filterId = `path-draw-glow-${id}`;
53  const resolvedViewBox = viewBox ?? fitViewBox(paths, AUTO_FIT_PADDING);
54  // A filter region defaults to a share of the element's bounding box, and a
55  // straight horizontal or vertical path has a zero-area box — which would
56  // drop the stroke entirely. Anchoring the region to the viewBox keeps every
57  // path filtered, degenerate or not.
58  const [boxX, boxY, boxWidth, boxHeight] = resolvedViewBox
59    .split(/[\s,]+/)
60    .map(Number);
61 
62  return (
63    <svg width={width} height={height} viewBox={resolvedViewBox}>
64      {glow ? (
65        <defs>
66          <filter
67            id={filterId}
68            filterUnits="userSpaceOnUse"
69            x={boxX}
70            y={boxY}
71            width={boxWidth}
72            height={boxHeight}
73          >
74            <feGaussianBlur stdDeviation="1.5" result="blur" />
75            <feMerge>
76              <feMergeNode in="blur" />
77// … truncated