ContextQMD
Back to Remotion

starburst()

packages/docs/docs/starburst/starburst-effect.mdx

4.0.4682.6 KB
Original Source

starburst()<AvailableFrom v="4.0.468" />

Part of the @remotion/starburst package.

Renders a WebGL2-based retro starburst ray pattern as an effect for canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it when you want to apply starburst rays through an effects array instead of rendering the <Starburst> component.

starburst() replaces the underlying pixels instead of blending over them. It is usually the first effect in a chain, or applied to a <Solid> background before other effects.

Preview

<Demo type="effects-starburst" />

Example

tsx
import {starburst} from '@remotion/starburst';
import {AbsoluteFill, Solid} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Solid
        width={1280}
        height={720}
        color="black"
        effects={[
          starburst({
            rays: 16,
            colors: ['#ffdd00', '#ff8800', '#ff4400'],
            rotation: 15,
            smoothness: 0.1,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties.

rays

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

colors

An array of hex color strings for the rays. Colors are assigned to rays cyclically. Must contain at least 2 colors.

rotation?

Rotates the starburst pattern in degrees. Defaults to 0.

smoothness?

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

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).

disabled?

When true, the effect is skipped. Defaults to false.

Requirements

starburst() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer() (for example 'angle'). See Using WebGL during renders.

See also