Graphics
Deprecated
<Graphic> and its kinds are deprecated and will be removed in a later release; the lint warns on each one. Draw the same thing with <Motion>, <Three> or a <Layer>: the examples show each, and Free code explains them.
Built-in kinds of <Graphic>: pure functions from props and the theme to SVG, drawn the same in the preview and the export. Each card plays its example as the export renders it; its page has the code. Generated from packages/graphics by pnpm docs:gen; the previews were rendered by the Node export, which is gone, and <Graphic> is deprecated, so they are not rendered again.
<Composition fps={30} width={640} height={360}>
<Track id="main" layout="free">
<Graphic id="g1" kind="lower-third" start={0} duration={3} />
</Track>
</Composition>Every kind also takes the <Graphic> props: timing, transform, enter/exit, style, and width/height for its box. Colours and fonts default to theme tokens.
Arrows
arrowA straight arrow across its box, pointing right.curved-arrowAn arrow that arcs from the bottom left to the bottom right of its box.hand-arrowA loose, marker-drawn arrow with a slight curve.Callouts
calloutText in a rounded box with a pointer on one side.speech-bubbleA round comic-style bubble with a tail to one side below it.badgeA round badge with a short word or two, and a ring inside its edge.pillA fully rounded label, with an optional dot before the text (a live indicator, a status).burstA starburst sticker with a word on it, for prices, offers and shouts.Lower thirds
lower-thirdA name and a role on a panel with an accent bar at its left edge.lower-third-cardA name and a role on a rounded card, with an accent dot before the name.lower-third-splitThe name on an accent block and the role on a panel below it, offset to the right.Frames
corner-bracketsFour corner marks framing a region, like a viewfinder.frameA rounded border around a region, solid or dashed.device-frameA phone or a browser window drawn around an open screen.Highlights
underlineA hand-drawn underline to put under a word.circle-scribbleA loose hand-drawn loop around something, overshooting where it closes.markerA translucent highlighter stroke with ragged ends that sweeps across in sweep seconds (0 to show it at once).strikeA hand-drawn line through a word, slightly rising, to cross it out.Progress
progress-barA bar that fills from from to to over the element's duration.countdownA ring that empties over the element's duration around the seconds left, counting down from from (default: the duration).stepsA row of dots for steps in a sequence, the active one (1-based) filled and larger.Data
counterA number that counts from from to to over countFor seconds, with an optional prefix, suffix and caption under it.unit-gridtotal units in a grid with filled of them coloured, one by one over fillFor seconds: "7 in 10".comparisonBars side by side for a few values, each with its label and value, growing over growFor seconds.sample-sizeA field of dots for a sample of n, with share of them highlighted, appearing over appearFor seconds.Dividers
Backgrounds
gradient-backgroundA full-frame linear or radial gradient between two colours.dots-backgroundA full-frame grid of small dots on a solid colour.grid-backgroundA full-frame grid of thin lines on a solid colour, like graph paper.waves-backgroundThree soft waves in the palette's colours across the bottom of the frame, rising to level (a fraction of the height) and drifting at speed.blobs-backgroundLarge blurred colour fields that drift slowly: a soft, modern backdrop.Effects
confettiConfetti thrown up from the bottom centre that tumbles down across the frame over the element's duration.sparklesFour-pointed stars that twinkle in and out across the box.