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>
);
};
widthWidth of the canvas in pixels. Must be a positive integer.
heightHeight of the canvas in pixels. Must be a positive integer.
color?Fill color of the rectangle.
If omitted, it is transparent.
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.
Effects are an upcoming feature of Remotion - if you are here, you are early!