packages/docs/docs/starburst/starburst.mdx
:::info Deprecated
@remotion/starburst is deprecated and will no longer be published starting with Remotion 5.0. Migrate to starburst() from @remotion/effects/starburst. The <Starburst> component will not be moved to @remotion/effects.
:::
Renders a static WebGL-based retro starburst ray pattern.
Is a <Sequence> component under the hood and accepts its props.
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>
);
};
Apart from the props listed below, all props from <Sequence> except children and layout are accepted.
raysThe number of rays in the starburst pattern. Must be between 2 and 100.
colorsAn 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).