← back to Prestige Car Wash Video

src/Background.tsx

19 lines

import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';

// Persistent dark gradient with two slowly drifting accent glows.
export const Background: React.FC<{ accent: string }> = ({ accent }) => {
  const f = useCurrentFrame();
  const gx = interpolate(f % 900, [0, 450, 900], [18, 70, 18]);
  const gy = interpolate(f % 1200, [0, 600, 1200], [22, 62, 22]);
  return (
    <AbsoluteFill
      style={{
        background:
          `radial-gradient(60% 60% at ${gx}% ${gy}%, ${accent}22 0%, transparent 60%),` +
          `radial-gradient(50% 50% at ${100 - gx}% ${80 - gy / 2}%, ${accent}14 0%, transparent 55%),` +
          'linear-gradient(160deg, #0a1220 0%, #0b1728 45%, #060c16 100%)',
      }}
    />
  );
};