Shape layers
$.addShape(props, settings) draws a vector primitive. Pick the silhouette via settings.shapeType (rectangle, ellipse, polygon, or star). Width, height, fills, strokes, and corner radii are all animatable.
On this page
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#0f0f23' });
// All four shapeTypes pop in side by side.
const SHAPES = [
{ type: 'rectangle', x: 0.18, color: '#ff5a1f' },
{ type: 'ellipse', x: 0.39, color: '#4ecdc4' },
{ type: 'polygon', x: 0.61, color: '#a78bfa' },
{ type: 'star', x: 0.82, color: '#facc15' },
];
const layers = [];
for (const s of SHAPES) {
layers.push($.addShape(
{
width: 16, height: 16,
fill: s.color,
position: [s.x, 0.5],
sides: 6, innerRadius: 0.45,
},
{
shapeType: s.type,
transitionIn: { transition: 'overshootPop', duration: '500ms', params: { from: 0.3 } },
transitionOut: { transition: 'fade', duration: '400ms' },
},
{ waitFor: 0 },
));
$.wait('150ms');
}
$.wait('1.5s');
for (const l of layers) l.remove();
$.wait('500ms');
return $;Shape types
| shapeType | Looks like | Knobs |
|---|---|---|
rectangle | Box with optional rounded corners. | width, height, cornerRadius |
ellipse | Oval / circle when width = height. | width, height |
polygon | Regular n-gon (triangle, hexagon, …). | width, height, sides |
star | n-pointed star. | width, height, sides, innerRadius |
Properties
| Prop | Type / default | Notes |
|---|---|---|
width / height | em / 100 | 1 em = 1% of project width. Animatable. |
fill | css colour / #ffffff | 'transparent' disables the fill. |
strokeColor | css colour / #000000 | Animatable. |
strokeWidth | em / 0 | 0 hides the stroke. Animatable. |
strokeAlignment | inner | center | outer / inner | Where the stroke sits relative to the box edge. |
strokeDash / strokeGap | em / 0 | Dash pattern. 0 = solid. |
strokeLinejoin | miter | round | bevel | Corner style. |
cornerRadius | em / 0 | Rectangle only. Capped at half the shorter side. |
sides | 6 | Polygon vertices / star points. Integer ≥ 3. Not animatable. |
innerRadius | 0.5 | Star only. Ratio of inner to outer radius. |
shapeType (setting) | rectangle | Pick the silhouette. |
Examples
// A pill-shaped backdrop behind a heading
const pill = $.addShape(
{
width: 60, height: 12,
fill: '#1c2233',
strokeColor: '#3a4257', strokeWidth: 0.2,
cornerRadius: 6,
position: [0.5, 0.5],
},
{ shapeType: 'rectangle' },
);
$.wait('3s');
pill.remove();
// A six-pointed star that pulses
const star = $.addShape(
{ width: 30, height: 30, fill: '#facc15', sides: 6, innerRadius: 0.4 },
{ shapeType: 'star' },
);
star.animate({ scale: 1 }, { scale: 1.15 }, { duration: '600ms', wait: false });