Skip to main content

Starburstv4.0.435

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

MyComp.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:

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

See also​