Shapes

The Shapes panel adds vector shapes to the canvas. A shape is a ShapeItem with type: 'shape'. The editor player and the browser export draw shapes the same way, so the export looks the same as the preview.

The Shapes panel

The panel shows four shapes: Rectangle, Ellipse, Arc, and Line. A click adds the shape at the playhead, in the centre of the canvas, on a new track. A new shape is 400×400 px and 90 frames long.

When you select a shape, the panel shows two tabs:

• Style — the shape, the fill, the stroke, the shadow, and the settings of the shape kind.
• Animate — the enter and exit animations and the keyframes.

To remove the panel from the sidebar, add 'shape' to the disabledPanels prop:

<ReactVideoEditor projectId="my-project" disabledPanels={['shape']} />

Shape kinds

The shape field selects the geometry. Its type is ShapeKind:

The panel adds only rectangles, ellipses, arcs, and lines. Particles and paper shapes come from templates or from your own editorState.

Fill and gradients

styles.fill is a solid colour. styles.gradient replaces the fill with a linear or radial gradient. In the Style tab, the Fill type control has three options: Solid, Linear, and Radial.

A gradient has two or more colour stops:

interface ShapeGradientStop {
  color: string;
  offset: number; // The position on the gradient, from 0 to 100
}

Linear gradient (ShapeLinearGradient)

Radial gradient (ShapeRadialGradient)

Old projects can keep a CSS linear-gradient() string in styles.gradient. The editor reads the string and writes the data form when you edit the gradient.

Stroke, corners, soft edge, and shadow

ShapeShadow has these fields:

Arc (ShapeArc)

An arc is a part of a ring in the item box. The fill or the gradient colours the ring.

A new arc has startAngle: 0, sweep: 270, thickness: 48, and roundEnds: true.

Line (ShapeLine)

The stroke colour and the stroke width draw the line.

Draw on

styles.draw sets the drawn part of an arc or a line, from 0 to 100 %. If you do not set it, the full shape shows. Add keyframes to the draw property to draw the shape on over time.

Particles (ShapeParticles)

A particles shape draws many dots on one canvas. The dots move from a cloud into a formed shape. Its Style tab has a Particles section in place of the fill, stroke, and shadow sections.

Add keyframes to the progress and shimmer properties to animate the particles.

Grid mode

If you set grid, the dots stay on the marked cells of a grid that fills the item box. The progress value shows the dots in a sweep from the left to the right. In grid mode, the editor does not use count, points, seed, drift, or appear.

ParticlesGrid has columns, rows, and mask. The mask string holds one line for each row. Each line holds the lengths of the empty and marked runs of cells, in turn, and starts with an empty run. Each length is one character of 0-9a-zA-Z (0 to 61).

Paper (ShapePaper)

A paper shape draws a procedural paper texture. It also uses the corner radius, the stroke, and the stroke width. All fields are optional. The amounts go from 0 (none) to 1 (strong).

Paper presets

The SDK has 8 paper presets. The Paper section of the Style tab shows them as a quick select.

Use the preset helpers from /types:

import {
  PAPER_PRESETS,
  PAPER_PRESET_IDS,
  applyPaperPreset,
  findPaperPreset,
  type PaperPresetId,
} from '@reactvideoeditor/react-video-editor/types';

// Apply a preset. The preset keeps the seed and the boil of the current paper.
const paper = applyPaperPreset(item.styles.paper, 'kraft');

// Find the preset that matches a paper, or null.
const presetId: PaperPresetId | null = findPaperPreset(paper);

• PAPER_PRESETS — an object of presets. Each preset has a name and a paper look.
• PAPER_PRESET_IDS — the preset IDs, in the quick-select order.
• applyPaperPreset(paper, id) — gives the settings of the preset, with the seed and the boil of paper.
• findPaperPreset(paper) — gives the ID of the preset with the same look, or null. The seed and the boil are not part of the look.

Example

This editorState has one rectangle with a radial gradient and a shadow:

import { ItemType, type EditorState } from '@reactvideoeditor/react-video-editor/types';

const editorState: EditorState = {
  dimensions: { width: 1920, height: 1080 },
  playbackRate: 1,
  tracks: [
    {
      id: 'track-1',
      magnetic: false,
      muted: false,
      visible: true,
      items: [
        {
          id: 'card-1',
          type: ItemType.SHAPE,
          shape: 'rectangle',
          content: 'Rectangle',
          from: 0,
          durationInFrames: 90,
          left: 760,
          top: 340,
          width: 400,
          height: 400,
          rotation: 0,
          styles: {
            opacity: 1,
            borderRadius: '24px',
            gradient: {
              type: 'radial',
              centreX: 50,
              centreY: 40,
              radius: 70,
              stops: [
                { color: '#60a5fa', offset: 0 },
                { color: '#1e3a8a', offset: 100 },
              ],
            },
            softEdge: 0,
            dropShadow: { x: 0, y: 12, blur: 24, color: 'rgba(0,0,0,0.35)' },
          },
        },
      ],
    },
  ],
};

Custom compositions

If you render with your own composition, use ShapeLayerContent to draw shape items:

import { ShapeLayerContent } from '@reactvideoeditor/react-video-editor/remotion/components/shape-layer-content';

See Custom compositions.

Related

• Tracks and items
• Keyframes
• Templates