Overview
sRectangle is one of Fusion's 4 primitive shape generators (sRectangle, sEllipse, sNGon, sStar). It defines a parametric rectangle: position, size, rotation, corner radius, edge style.
Resolution independent: being vector, the rectangle stays sharp at any scale - ideal for motion graphics, UI and animated geometric masks.
Where to find this node
- Effects Library:
Tools > Shape > sRectangle - Quick add: right-click in the Node Editor →
Add Tool > Shape > sRectangle
The Shape + sRender workflow
All the Shape nodes prefixed with s (sRectangle, sEllipse, sBoolean, sTransform, etc.) produce vector data, not images. To see them in the viewer or composite them with other elements:
- Chain the shape nodes together (sRectangle → sBoolean → sTransform...).
- End with an sRender, which converts everything into a rasterized 2D image.
- Connect the sRender output to a Merge, Blur, MediaOut, etc.
Rule: never a Merge directly after an sRectangle. Always an sRender first.
Inputs
- No input required - a pure generator.
- An optional input can be connected to chain it with another Shape node (e.g. an sRectangle preceded by an sTransform).
Setup
Simple rectangle:
sRectangle → sRender → Merge 2D FG
Background → Merge 2D BG
Merge → MediaOut
Animated rectangle in a UI layout:
sRectangle (animated Width) → sRender → Transform → Merge
Compound shape (intersection of shapes):
sRectangle → sBoolean (Subtract) ← sEllipse
↓
sRender → MergeControls tab
- Solid
- A checkbox. On = a filled rectangle (color set in Style). Off = only an outline, transparent in the middle.
- Border Width
- Outline thickness (mostly useful when Solid is off).
- Corner Radius
- Corner rounding. 0.0 = sharp corners, 1.0 = fully rounded corners (a pill or circle depending on the proportions). Animatable.
- Offset (X / Y)
- Position of the center of the rectangle.
- Width / Height
- Dimensions of the rectangle. Animatable independently.
- Angle
- Rotation around the center (in degrees).
- Border Style
- Corner style when there is an outline:
- Bevel: beveled.
- Round: rounded.
- Miter: an extended sharp angle.
- Cap Style (for outlines)
- Ends of the outline when Length < 1: Flat, Round, Square.
- Length
- Length of the stroke (0 to 1). Animate it from 0 to 1 = a write-on animation (the outline draws itself progressively). Ideal for animated reveals.
- Allow Combining
- Controls the alpha behavior when several shapes overlap (e.g. in an sBoolean).
Style tab
Sets the color and visual properties of the fill and the outline:
- Fill Color - the fill color (if Solid is on).
- Border Color - the outline color.
- Gradient - a gradient fill option (linear/radial).
Use cases
- Animated UI cards / buttons - an sRectangle with an animatable Corner Radius for morphing buttons, motion design card backgrounds.
- Progress bar - Width animated from 0 to the final width, with another sRectangle behind it as the track.
- Lower third or broadcast banner - a background rectangle for lower third text, animatable through Scale or Width.
- A frame around an image - Solid off + Border Width = a clean frame, an alternative to a classic Background.
- Animated geometric mask - a rectangle used as a mask by a Matte Control to reveal/hide an animated rectangular area.
- Write-on animation - Solid off + Length animated 0 → 1 = a rectangular outline that draws itself frame by frame.
- Base for a compound shape (Boolean) - combine sRectangle + sEllipse through sBoolean for non-trivial custom shapes.
Tips
- Always an sRender at the end of the chain. Forget it = no visible output in the comp.
- Corner Radius 1.0 + Width = Height = a perfect circle. A shortcut for a circle with sRectangle (without using sEllipse).
- Width ≠ Height + a high Corner Radius = a pill shape (stadium shape) - the classic design for pill buttons or pill badges.
- Vector = sharp at any scale - enlarging an sRender at render time never pixelates the shape (unlike an enlarged PNG). A big advantage over a rectangular Background node.
- Length for write-ons - animating Length 0 → 1 is the classic trick for graphic outline reveals.
- Change the styling with an
sTransformdownstream rather than in the sRectangle itself. More flexible to evolve the shape without breaking the base stroke. - For different corners (a different radius top-left vs bottom-right), combine several sRectangle nodes + sBoolean.
