Aller au contenu

sRectangle Node

By Kriss Norde

sRectangle generates a parametric vector rectangle (or a rounded square, all the way to a pill, depending on the Corner Radius). It belongs to the family of Shape nodes prefixed with s - they all work in vector and need an sRender to produce a visible final image.

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:

  1. Chain the shape nodes together (sRectangle → sBoolean → sTransform...).
  2. End with an sRender, which converts everything into a rasterized 2D image.
  3. 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 → Merge

Controls 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 sTransform downstream 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.