Starburst<AvailableFrom v="4.0.435"/>

The <Starburst> component from @remotion/starburst renders a static WebGL-based retro starburst ray pattern.

tsx

import {Starburst} from '@remotion/starburst';
import {AbsoluteFill} from 'remotion';

const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <Starburst durationInFrames={60} rays={16} colors={['#ffdd00', '#ff8800']} />
    </AbsoluteFill>
  );
};

Rotating the pattern

Use rotation to offset the angle of the rays in degrees:

tsx

import {Starburst} from '@remotion/starburst';
import {AbsoluteFill} from 'remotion';

// ---cut---
const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <Starburst rays={12} colors={['#ffdd00', '#ff8800']} rotation={45} durationInFrames={30} />
    </AbsoluteFill>
  );
};