Creative Block

Dynamic Template

# Canva Sample — Creative Block An eight-scene story in three aspect ratios. Six scenes are recreated frame by frame from a screen recording of a Canva design and then generalised into slots; two are breather cards authored in the same language. One entrance carries the whole film: every word, and every line of body copy, lifts 2.2% of the frame height while a top inset unmasks it from its own baseline up. ## What was measured The .mov is 388×682 at 60fps and holds six scenes before it loops. Cut points were taken from the frame-difference profile — the cover runs 5.9s, the other five 7.6s each — and every layer's entrance was timed by tracking its white pixels frame by frame. | # | scene | source | layout | entrance order (seconds into the scene) | | --- | --- | --- | --- | --- | | 1 | Cover | measured | centred, low | title words 0.55 · chip 1.45 | | 2 | First | measured | centred | chip 0.75 · title words 1.15 · body lines 1.55 | | 3 | Pause | authored | centred, mid-frame | title words 0.55 | | 4 | Second | measured | ranged left | chip 0.75 · title words 1.15 · body lines 1.55 | | 5 | Third | measured | ranged left | chip 0.80 · title words 1.20 · bullets 1.55 | | 6 | Breath | authored | centred, mid-frame | title words 0.55 | | 7 | Close | measured | centred | title words 1.20 · statement 1.45 · body lines 1.70 | | 8 | Outro | measured | centred, mid-frame | caps line and chip together at 1.40 | The two breather cards punctuate the run of steps. Each is the display line alone at the frame's centre — no chip, no paragraph — held for 3.8s against the measured scenes' 7.6s, so they read as a beat rather than a step. The word stagger measures 0.15s and runs across a line break rather than restarting on it — in scene 4 "Change" enters at 1.217, "the" at 1.367 and "input", on the second line, at 1.533. The rise itself is 15px in the recording (2.2% of frame height) over about 0.47s on a power3 ease-out, and the glyph tops are hidden until the last moment, which is the mask rather than the fade: at first contact only the bottom 8px of each word is lit. ## Aspect ratios 9:16 is the base and the only measured one — it is the canvas the source was drawn at. 16:9 and 1:1 are designed, and laid out by the same rhythm rather than by scaling the portrait frame. The rhythm is the design's own. Each gap between two rows of a scene was recovered from the recording as a LINE-BOX gap in units of the display size, by taking the measured cap tops, baselines and chip rectangles back through each face's metrics: | gap | display units | | --- | --- | | cover kicker → title | −0.174 (they overlap, which is why "The" tucks into the title) | | cover title → chip | +0.180 | | chip → title | +0.237 (first, third) · +0.334 (second) | | title → body | +0.146 (first) · +0.165 (second) · +0.088 (third, under a two-line title) | | title → caps statement | +0.271 | | caps statement → body | +0.252 | | caps statement → chip | +0.218 | Every ratio then stacks its scene from those gaps against a bottom margin, and solves each font size against ITS OWN canvas height — the stored scale is resolution-independent, so a portrait size reused in landscape renders 1.78× too big. | | 9:16 | 16:9 | 1:1 | | --- | --- | --- | --- | | canvas | 1080×1920 | 1920×1080 | 1080×1080 | | display | 144px | 157px | 133px | | cover kicker | 95px | 106px | 88px | | chip / caps | 36px | 32px | 33px | | body | 34px | 30px | 32px | | block bottom | 71–85% (measured) | 88–92% | 87–90% | What is re-decided rather than re-scaled: the left-ranged scenes keep a 6.2% margin in 16:9 and hold the left 61% of the frame, so the photograph keeps its right side, where in 9:16 they run nearly full width. The scrim ramps earlier in the two new ratios because the type block starts higher up the frame. The breather cards and the outro stay on the frame's vertical centre in all three. The motion is identical everywhere — it is the same choreography on a different frame, and the `ch` units are what let it travel. Every text layer was then resolved per ratio and measured against the real font files — rendered line count against authored line count, widest line against box width, needed height against box height. All 60 layer/ratio pairs fit, and none rewraps. ## Type Two families, measured against the recording's own pixels. | role | face | px @1920 | tracking | | --- | --- | --- | --- | | display | Instrument Serif italic | 145 | 0 | | cover kicker | Instrument Serif upright | 96 | 0 | | chip / caps statement | Montserrat 600 | 35 | 0.25em | | body / bullets | Montserrat 500 | 34 | 0.09em | | standing mark | Montserrat 500 | 28 | 0.10em | The italic was picked by rasterising every serif italic in the catalogue against the cover's own "Block" and scoring intersection-over-union: Instrument Serif took 0.496 against Cormorant's 0.367, Playfair Display's 0.285 and DM Serif Display's 0.236, and its width landed within 1.2% of the reference. At 145px the seven display lines across the six scenes predict within ±2.5% of their measured widths. The body was calibrated the same way — 34px at 0.09em predicts the measured line widths within ±4%. Line heights are the measured baseline pitches: 0.98 on the display (51px between the two title lines in scene 4) and 1.58 on the body (19.1px between lines in the recording). ## Colour The source is near-monochrome — white type over photographs, with one solid blue chip. That blue measures #003FA0 in the recording. The six roles split it so a scheme swap has something to move: `display` and `body` are the two ink tiers, `chip` the accent, `scrim` the wash the photographs are darkened with, `ground` the file background. The chips use `backgroundFit: "line"` rather than a fixed rectangle, so a chip resizes to whatever copy replaces it instead of cropping or floating. ## Placeholders The photographs are placeholders — 9:16 crops of the stock set already in `social-sample-pill-tips`. That set holds seven pictures against eight scenes, so `breath.webp` is a left crop of the same picture `outro.webp` centre-crops; framed differently they read as two frames, and both are meant to be replaced. Every one sits in a `photo` slot behind a bottom-weighted scrim, so any picture can. The copy is placeholder too. The six measured scenes carry the recording's own text, kept because the layout was measured around exactly those line lengths; the two breather cards carry two words each.