packages/docs/docs/solid.mdx
Renders a solid-color rectangle on a <canvas> element.
import {AbsoluteFill, Solid} from 'remotion';
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Solid color="#3344ff" width={1920} height={1080} />
</AbsoluteFill>
);
};
widthLogical width of the canvas in pixels. Must be a positive integer.
heightLogical height of the canvas in pixels. Must be a positive integer.
effects?<AvailableFrom v="4.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?<AvailableFrom v="4.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:
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.
<Solid> inherits from, durationInFrames, name, showInTimeline and hidden from <Sequence>.
You can add a React ref to a <Solid> component.
If you use TypeScript, type it with HTMLCanvasElement:
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} />;
};
This is mainly a component for adding effects to a solid color.