Layout & groups
Center, fit, arrange, and animate multiple scene nodes as one unit.
CineCode can measure and arrange nodes, so reusable scenes do not need a pile of
resolution-specific coordinate arithmetic. Layout helpers update node positions
immediately and return a Group for coordinated animation.
Frame-relative placement
Use CENTER_X / CENTER_Y for the midpoint and SAFE_X, SAFE_Y, SAFE_W,
and SAFE_H for the 90% action-safe area. SAFE_MARGIN is 0.05.
let title = s.text("A safe title", SAFE_X, SAFE_Y).font_size(52);
let panel_x = center_x(720);
let panel_y = center_y(420);Single-node layout
| Method | Description |
|---|---|
center() | Center the node on both axes. |
center_h() | Center horizontally and preserve y. |
center_v() | Center vertically and preserve x. |
fit(w, h) | Uniformly scale the node to fit in a box. |
fit_in(x, y, w, h) | Fit and center the node inside a rectangle. |
z(index) | Set paint order; higher values render later. |
Code blocks, rectangles, and sized images are measured from their decorated box, including padding. Other node kinds use their origin when no measurable box is available.
Create a group
let a = s.text("Plan", 0, 0);
let b = s.text("Build", 0, 0);
let c = s.text("Ship", 0, 0);
let steps = s.group([a, b, c]);
let pair = s.group(a, b);
let trio = s.group(a, b, c);
steps.add(s.circle(0, 0, 8));Arrange nodes
| Helper | Description |
|---|---|
s.row(nodes, x, y, gap) | Position nodes left-to-right. |
s.column(nodes, x, y, gap) | Position nodes top-to-bottom. |
s.grid(nodes, x, y, columns, gap) | Row-major grid sized from the largest member. |
s.stack(nodes, x, y) | Place members at one position with increasing z-order. |
Each helper returns a group:
let cards = s.row([a, b, c], SAFE_X, SAFE_Y, 28);
cards.fade_in(0, ms(500));
let matrix = s.grid(items, SAFE_X, 180, 3, 24);
matrix.shift(0, -30, sec(3), ms(450));Animate a group
Group methods apply coordinated tracks to every member while preserving their relative positions.
| Method | Description |
|---|---|
add(node) | Add a member. |
fade_in(start, dur) | Fade all members in. |
fade_out(start, dur) / dissolve(start, dur) | Fade all members out. |
fade_to(opacity, start, dur) | Animate all members to an opacity. |
shift(dx, dy, start, dur) | Translate members by an offset. |
move_to(x, y, start, dur) | Move the group bounding box's top-left. |
scale_to(factor, start, dur) | Scale members around the group centroid. |
z(index) | Set paint order for all members. |
Groups do not create an extra rendered node. They are authoring handles over the member nodes, so normal node styling and animation remain available.