Skip to main content

Starburstv4.0.500

The starburst() effect from @remotion/effects renders a WebGL2-based retro ray pattern.

Apply the effect to a <Solid> and animate its parameters with interpolate():

MyComp.tsx
import {starburst} from '@remotion/effects/starburst';
import {
  AbsoluteFill,
  interpolate,
  Solid,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const {width, height, durationInFrames} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Solid
        width={width}
        height={height}
        effects={[
          starburst({
            rays: 16,
            colors: ['#ffdd00', '#ff8800'],
            rotation: interpolate(frame, [0, durationInFrames], [0, 360]),
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

Keeping the interpolate() calls inline makes the keyframes editable in Remotion Studio.

See also​