Skip to main content

<Starburst>v4.0.435

Renders a static WebGL-based retro starburst ray pattern.
Is a <Sequence> component under the hood and accepts its props.

Example​

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

const MyVideo = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <Starburst
        durationInFrames={60}
        rays={16}
        colors={['#ffdd00', '#ff8800', '#ff4400']}
        rotation={15}
        width={1080}
        height={1080}
      />
    </AbsoluteFill>
  );
};

API​

Apart from the props listed below, all props from <Sequence> except children and layout are accepted.

rays​

The number of rays in the starburst pattern. Must be between 2 and 100.

colors​

An array of CSS color strings for the rays, for example hex values, color names like "red" or hsl() colors. Colors are assigned to rays cyclically. Must contain at least 2 colors.

<Starburst rays={12} colors={['#ff0066', '#6600ff', '#00ccff']} />

rotation?​

Rotates the starburst pattern in degrees (0-360). Default: 0.

smoothness?​

Controls the softness of the ray edges. 0 gives hard edges, 1 gives very soft edges. Default: 0.

vignette?​

Controls the radial transparency falloff from the center. 1 (default) means no vignette — the starburst is fully opaque. 0 makes the entire canvas transparent. Values in between create a circular fade from opaque at the center to transparent at the edges.

originOffsetX?​

Shifts the origin of the starburst pattern horizontally. -1 moves the origin to the left edge, 1 to the right edge. Default: 0 (centered).

originOffsetY?​

Shifts the origin of the starburst pattern vertically. -1 moves the origin to the top edge, 1 to the bottom edge. Default: 0 (centered).

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​