Chapter 978: Starburst

Core Idea

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

Key Concepts

• See also

Code Examples

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>
  );
};

• What it demonstrates: Usage pattern for Starburst from the official docs.

Key Takeaways

1. Understand see also when working with Starburst.

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.