mesh-gradient-bg

1import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { EASING } from "@/remotion/lib/motion-tokens";
3 
4export type MeshGradientBgProps = {
5  backgroundColor?: string;
6  /** Blob accent colors — solid hex, blended additively over the stage. */
7  colors?: [string, string, string];
8  intensity?: number;
9};
10 
11const DEFAULT_COLORS: [string, string, string] = ["#e8b86d", "#2dd4bf", "#f472b6"];
12 
13type BlobConfig = {
14  x: number;
15  y: number;
16  size: number;
17  driftX: number;
18  driftY: number;
19  phase: number;
20  period: number;
21  blur: number;
22  alpha: number;
23};
24 
25const BLOBS: BlobConfig[] = [
26  { x: 20, y: 30, size: 60, driftX: 12, driftY: 9, phase: 0, period: 2.6, blur: 60, alpha: 0.55 },
27  { x: 78, y: 22, size: 48, driftX: -10, driftY: 14, phase: 1.7, period: 3.3, blur: 46, alpha: 0.46 },
28  { x: 58, y: 78, size: 54, driftX: 9, driftY: -12, phase: 3.4, period: 2.9, blur: 54, alpha: 0.5 },
29];
30 
31export const MeshGradientBg: React.FC<MeshGradientBgProps> = ({
32  backgroundColor = "#080810",
33  colors = DEFAULT_COLORS,
34  intensity = 1,
35}) => {
36  const frame = useCurrentFrame();
37  const { fps } = useVideoConfig();
38  const time = frame / fps;
39 
40  // Continuous breathing scale — driven by a sine so it loops with no seam,
41  // unlike a clamped ramp that would freeze once it reached its endpoint.
42  const breathe = interpolate(Math.sin(time / 5.5), [-1, 1], [0, 1], {
43    easing: EASING.editorial,
44  });
45 
46  return (
47    <AbsoluteFill style={{ background: backgroundColor, overflow: "hidden" }}>
48      <AbsoluteFill style={{ transform: `scale(${1 + breathe * 0.03})` }}>
49        {BLOBS.map((blob, index) => {
50          const wave = Math.sin(time / blob.period + blob.phase);
51          const waveY = Math.cos(time / (blob.period * 1.3) + blob.phase * 0.7);
52          const x = blob.x + wave * blob.driftX * intensity;
53          const y = blob.y + waveY * blob.driftY * intensity;
54          const scale = 0.94 + breathe * 0.1 + wave * 0.05;
55          const color = colors[index % colors.length];
56 
57          return (
58            <div
59              key={index}
60              style={{
61                position: "absolute",
62                left: `${x}%`,
63                top: `${y}%`,
64                width: `${blob.size}%`,
65                aspectRatio: "1",
66                transform: `translate(-50%, -50%) scale(${scale})`,
67                borderRadius: "50%",
68                background: `radial-gradient(circle at 42% 38%, ${color}, transparent 70%)`,
69// … truncated