Every visual layer — video, image, text, shape, sequence — carries a framing toolkit in the VISUAL & FILTERS panel: rounded corners, a styled border, and stackable shadows. Shape layers add their own geometry controls, custom SVG silhouettes, and clipping masks.
Border
- Width + color — the ring hugs the layer’s edge; color supports alpha.
- Style — pick solid, dashed, dotted, or double from the visual stroke selector.
- On shape layers the border follows the actual outline (an elliptical ring around an ellipse, a triangular one around a triangle), not the bounding box. Custom SVG shapes don’t support borders.
- The small trash icon next to the label removes the border in one click.
Radius
- One R value rounds all corners; click the link icon to unlink and set each corner (TL / TR / BL / BR) separately.
- There’s no practical cap — oversized values clamp to the layer size, i.e. fully rounded.
- On shape layers, radius applies to rectangle shapes (rounding the rectangle itself).
Shadows
Click + to add up to four shadow layers. Each has:
- X / Y offset, blur, spread, and a color with alpha.
- An Inset toggle for inner shadows.
- The first shadow in the list sits on top, CSS-style.
Shadows are never clipped by the layer’s boundary — the render surface grows to fit their reach, in preview and in exports. On shape layers, shadows hug the silhouette (spread and inset are ignored there).
Shape layers
Add a shape from the timeline toolbar. Types:
- Rectangle, Ellipse — sized by Width/Height (% of frame).
- Triangle — a Direction picker (▲ ▼ ◀ ▶) plus an Apex position slider: 50% is symmetric, 0% or 100% gives a right triangle.
- Arrow — Head size (% of width) and Line width (% of height) control the proportions.
- Path (editable points) — a freeform bezier outline you shape on the canvas. See below.
- Line (editable points) — the same editor, but drawn as a stroke with its own thickness, ends and Trim. See below.
- Custom (SVG) — upload any
.svg; its silhouette becomes the shape, recolored by the Fill color. The file is stored inside the project, so it travels with project and preset exports.
Shapes take the full layer toolkit: transforms, filters, keyframes, transitions, blend modes. Shape width, height, and circle radius may exceed 100% (or the composition’s pixel dimensions), allowing shapes to extend beyond the viewport.
Editable paths
Pick Path (editable points) from the Shape dropdown and the outline you already had — rectangle, ellipse, circle, triangle, arrow — is converted into anchor points, so nothing moves. (A custom SVG has no outline that can be read back; it starts from a rectangle instead.) A PATH block appears with everything else you need:
- Edit points turns on the on-canvas editor. Finish editing, or Escape, turns it off. While it’s on, the usual move/scale/rotate box steps aside.
- Presets opens a floating picker of glyph cards drawn from each preset’s actual outline — 11 closed shapes for paths (Circle, Rectangle, Rounded, Triangle, Diamond, Pentagon, Hexagon, Star, Burst, Blob, Squircle) and 6 open ones for lines, with the start point marked. Applying keeps the picker open for quick comparison, and on a keyframed path it writes the keyframe under the playhead, resampled to the shared point count — so two clicks (Rectangle at 0%, Circle at 100%) make a morph.
- Closed — unchecked, the path is drawn as a stroked line instead of a filled shape, using the Stroke controls described under Lines below. Handy for underlines, squiggles and hand-drawn arrows. An open path can’t be a clipping mask, so that toggle hides itself.
On the canvas:
| Drag an anchor | move the point; its curve handles come along |
|---|---|
| Click an anchor | select it, revealing its two cyan curve handles |
| Drag a handle | shape the curve; the opposite handle mirrors it |
| Alt-drag a handle | break the pair and bend just this side |
| Alt-click an anchor | toggle between a hard corner and a smooth curve |
| Click the outline | insert a new anchor there, without changing the shape |
| Delete / Backspace | remove the selected anchor |
| Arrow keys | nudge the selected anchor (Shift for bigger steps) |
| Shift-drag | constrain to one axis |
A corner point’s handles sit on top of it, so they stay hidden until you Alt-click it back to smooth. The selected point’s X / Y also appear in the panel as a % of the shape’s box, along with Reset handles (hand it back to the automatic smoothing) and Delete.
Select several points at once: shift-click anchors one by one, or drag a box across the preview to sweep up everything inside it (Shift adds; Cmd/Ctrl+A takes the whole outline). A transform box appears around the selection — drag its body to move every anchor together, its eight grips to scale (Shift keeps proportions, Alt works from the centre), and the dot above it to rotate (Shift snaps to 15°). Curve handles ride along, so a scaled or rotated selection keeps the outline’s shape. Arrow keys nudge the whole selection; Delete removes every selected point at once.
Points are stored relative to the shape’s box, so Width and Height keep resizing the whole path, and the layer’s own transforms, filters, background and effects all work exactly as on any other shape.
Animating a path
The outline itself is keyframable. Click the ◆ next to the point count (or add Shape path from the Keyframe Builder’s Add Property menu, under Shape) and the current outline is captured into a keyframe at the start and end of the clip — nothing moves yet.
From then on, moving a point writes into the keyframe under the playhead, creating one there if there isn’t one. Park the playhead where you want the shape to arrive, drag the points, and the outline morphs between keyframes with the usual easing. It’s the After Effects mask-path model: every keyframe holds a whole outline, and the points morph one-to-one.
Because of that one-to-one pairing, all the keyframes have to keep the same number of points. Adding or removing an anchor while a path is keyframed applies to every keyframe at once.
Presets are the fast way to animate a shape change. On a keyframed path a preset no longer replaces the whole outline — it writes the keyframe under the playhead, resampled to the point count the keyframes share. So: turn on keyframes, sit at 0% and click Rectangle, move to 100% and click Circle. Two clicks and the rectangle morphs into a circle.
Lines
Line (editable points) is the same point editor drawn as a stroke rather than a fill — a rule, an underline, a connector, a hand-drawn squiggle. Its presets are Straight, Arc, S-curve, Wave, Zigzag and Corner, and everything under Editable paths above applies: drag anchors, bend handles, insert and delete points, keyframe the whole path to morph one line into another.
A Stroke block replaces the usual Border section:
- Width — thickness in composition pixels. Keyframable (◆).
- Dash — solid, dashed or dotted.
- Ends — flat, round or square caps. Round and square extend half the stroke width past the last point; flat stops exactly on it.
- Corners — how the stroke turns at an anchor: round, miter or bevel.
The stroke takes its colour from the BACKGROUND section, so a line can carry a gradient or a live shader just like a filled shape.
Trim
Trim draws only part of the line, measured along its own length — the After Effects “Trim Paths” idea, and the standard way to make a stroke write itself on:
- Start / End — the visible span, 0–100%. Keyframe End from 0 to 100 and the line draws itself on; keyframe Start as well and it wipes away behind itself.
- Offset — slides that span along the path. On a closed path it wraps around, which is how you get a segment chasing its own outline.
All three are keyframable. Trim works on any stroked shape, including a closed path with Closed unticked — so you can draw a circle on, stroke by stroke.
Glow on a line
Running Glow’s default tracing mode looks for the edge of a filled area, which a stroke doesn’t have — on a thin line the effect used to be all but invisible. Adding Running Glow to a Line (or an open path) now switches it to Thin lines / outlines automatically and matches its Edge Width to the line’s own thickness, so it lights up immediately. Both are ordinary controls in the effect, so you can still change them.
To keep only the light and hide the line, use Glow only — hide the layer in the effect’s Source group (the same thing as taking Layer Opacity to 0). Do not reach for a transparent fill colour: the glow traces the shape’s silhouette, so making the shape transparent erases the very thing the light follows and the effect vanishes with it. With Glow only the shape keeps its colour for tracing purposes and simply isn’t drawn.
Image to Vector
The Shape panel can trace a raster image into a shape. Pick a source with the standard media tile — an image already on the board, the media library, or an upload — and the tracer (pure JavaScript, fully offline, the image never leaves the device) turns it into the one closed path a shape layer holds:
- Detail — Low / Medium / High sets how many editable anchor points the trace produces; changing it re-traces straight away.
- Trace options — read the shape from transparency, background colour or brightness (or Auto); set the threshold by hand; keep all pieces or just the largest; keep or fill counters; invert; raise the speck filter on noisy images; Smoothing and Edge reach clean up ragged edges from compressed frames while keeping 90° corners crisp.
- Marks made of several pieces trace whole, counters (the holes in a G or an O) are kept, and the traced shape is sized to the artwork’s own bounds.
- Convert to Editable Path then hands the silhouette to the point editor — and since a vectorized path starts as a closed stroke, Trim can animate a logo outline drawing on.
Shape background
Selecting a shape shows a dedicated BACKGROUND panel — the old single “Fill color” swatch is folded into it. Choose how the silhouette is filled:
- Solid — one colour, with an opacity slider in the picker; that alpha is the fill opacity.
- Gradient — preset swatches or a freeform gradient, with an optional Animated toggle.
- Shader (GLSL) — a live fragment-shader fill, from a preset (Silk Flow, Glow Blobs, Coral Waves, Plasma, Mesh Gradient, Blue Planet, Aurora Ridge, Fire, Space Travel, Glitter Dust and more) or your own Shadertoy-style code. Every preset shows its own controls under the preview — colour pickers for the colours it actually uses, size/density sliders where they make sense, a Tint on the graded ones — plus speed, a Scale slider (0.25–4×) that zooms the pattern itself at full sharpness, and a Detail setting for pixel-measured shaders.
- Pattern or Image — tile a pattern or place a picture inside the shape.
The background is clipped to the outline, so a gradient, shader, or image fills a rounded rectangle, ellipse, triangle, or arrow exactly. Shader and animated-gradient fills render in the Video Editor; elsewhere a plain colour or a still gradient stands in. Custom SVG shapes are still recoloured by the solid fill colour. For moving footage inside a silhouette, use the shape as a clipping mask over a normal video layer.
Clipping masks
Turn on “Use as clipping mask for layers below” on any shape and everything underneath the shape’s channel shows only inside it. The fill isn’t drawn — its alpha sets the mask strength — and the shape’s transforms and keyframes animate the mask, so a drifting rounded rectangle or a custom SVG logo can act as a moving reveal window.
Text layers carry the same toggle, at the bottom of the TEXT LAYER panel: the letters themselves become the mask, so footage plays inside the type. Everything that shapes the glyphs still counts — font, weight, size, letter spacing, case, and the whole TEXT ANIMATION panel — so a word-by-word stagger reveals the footage word by word. The text’s own shadow and caption bar are ignored while masking (their soft, boxy alpha would bleed into the matte, and the panels hide themselves); to feather the edge use FILTERS → Blur, and for a matte that fades across the block give the text a gradient or semi-transparent fill.
Invert mask flips either kind: instead of showing the layers below inside the shape or the letters, it knocks them out and shows everything around them — the usual way to punch stencil type through footage.
To mask one specific layer instead of everything below — or to mask by brightness rather than alpha — use a Track Matte.
A mask applies to every channel below it (not just the one directly underneath), masks stack, and hiding the mask’s channel disables it. The project background is not a layer, so it stays behind the mask instead of being cut out by it. Masks bake into every export, and they work both at the top level and inside a sequence’s own timeline.
Whatever sits on the channels below is what you see inside the mask — including the parts of it that are dark or empty. If a masked shape looks like it has bites taken out of it, check the layer underneath: an image with an opaque black background (a logo PNG, say) fills the letters with that black, and its own outline appears to cut through them. Put a layer with full-frame coverage below the mask for a clean fill.
Leave a Reply