Skip to main content

<Solid>v4.0.464

Renders a solid-color rectangle on a <canvas> element.

MyComp.tsx
import {AbsoluteFill, Solid} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Solid color="#3344ff" width={1920} height={1080} />
    </AbsoluteFill>
  );
};

API​

width​

Logical width of the canvas in pixels. Must be a positive integer.

height​

Logical height of the canvas in pixels. Must be a positive integer.

effects?v4.0.464​

Apply effects after the rectangle has been painted to the canvas.

color?​

Fill color of the rectangle.
If omitted, it is transparent.

pixelDensity?v4.0.472​

number

Controls the backing bitmap density. Default: 1.

Set a higher value to paint to a higher-resolution backing canvas while keeping the logical canvas size unchanged.
This is useful to counteract quality loss when the <Solid> is scaled up – for example via the scale render option, or on a high-DPI display in the preview. Pass usePixelDensity() to use the render scale while rendering and window.devicePixelRatio while previewing:

MyComp.tsx
import {AbsoluteFill, Solid, usePixelDensity} from 'remotion';

export const MyComp: React.FC = () => {
  const pixelDensity = usePixelDensity();
  return (
    <AbsoluteFill>
      <Solid color="#3344ff" width={1920} height={1080} pixelDensity={pixelDensity} />
    </AbsoluteFill>
  );
};

className?​

A class name to apply to the <canvas> element.

style?​

Inline styles to apply to the <canvas> element.

cropLeft?v4.0.500​

Crops the canvas from the left by a ratio between 0 and 1. See cropLeft on <Sequence>.

cropRight?v4.0.500​

Crops the canvas from the right by a ratio between 0 and 1. See cropRight on <Sequence>.

cropTop?v4.0.500​

Crops the canvas from the top by a ratio between 0 and 1. See cropTop on <Sequence>.

cropBottom?v4.0.500​

Crops the canvas from the bottom by a ratio between 0 and 1. See cropBottom on <Sequence>.

Inherited props​

<Solid> inherits from, durationInFrames, trimBeforev4.0.482, playbackRate, name, showInTimeline and hidden from <Sequence>.

From v4.0.528, it also inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>.

Adding a ref​

You can add a React ref to a <Solid> component.
If you use TypeScript, type it with HTMLCanvasElement:

MyComp.tsx
import {useRef} from 'react';
import {Solid} from 'remotion';

const MyComp = () => {
  const ref = useRef<HTMLCanvasElement>(null);
  return <Solid ref={ref} color="red" width={100} height={100} />;
};

What is this component for?​

This is mainly a component for adding effects to a solid color.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​