Product

Sixty frames a second, and a timeline you can actually read

A profiler is worth more than an opinion. Half the time the editor spent playing a piece went somewhere nobody would have guessed, and finding it doubled the frame rate.

Playback was running at thirty

On a project with sixty layers the editor drew a frame every thirty-three milliseconds. That is thirty frames a second on a sixty hertz screen: every second frame dropped, and a scrub that lagged behind the pointer. Nobody had measured it, so nobody knew.

A CPU trace put fifty-two per cent of it in two functions that answer what shelf a template belongs to and what its sentence is. Both answered by walking the whole catalogue, entry by entry, comparing names. Sorting the library asks that question about five thousand times, the panel sorts once for each of its sixteen shelves, and all of it ran again on every render of the editor shell — which, because the shell was subscribed to the playhead, meant sixty times a second whether or not the template panel was even open.

The catalogue is fixed at build time, so it is now indexed once when the module loads and every later question is a hash lookup. The shelves are worked out once per set of admin overrides rather than once per render. And the playhead is read by the three parts that need it — the canvas, the inspector, the timeline — instead of being handed down from a shell that then had to redraw itself to pass it on.

Same project, same machine, production build: thirty-three milliseconds a frame became sixteen point seven, the ninety-ninth percentile fell from fifty to under eighteen, and the long task that blocked the main thread for fifty-two milliseconds is gone. Thirty frames a second to sixty, with a third of the budget still spare.

The editor also stopped downloading the 3D engine for projects with no 3D in it. Three is a quarter of a megabyte, twenty-four templates in the library use it, and four separate imports were dragging it into everybody's first load. It now arrives when a scene needs it. Opening the editor went from 941 kilobytes of Javascript to 744, which on a mid-range laptop over a slow connection is about a second off the wait.

The preview strip is back, in both views, and big enough to read

The strip along the top of the timeline draws the composition as it will look, frame by frame, using the same renderer the export uses. It was being hidden in the Keyframes view to save a row — which took the picture away at exactly the moment somebody is placing a key against it. It shows in both views now.

It was also drawn too small to be worth having. Each cell was a fixed width, and the frame inside it was scaled to whichever of width or height fitted first, so a wide channel bar drew at a fifth of the row's height with empty strip above and below it. A tall card wasted the width the same way.

Each cell is now cut to the shape of what is in it. A wide bar gets wide cells and fills the row; a portrait card gets narrow ones and fills it too. The count follows the shape rather than a constant, and it is worked out again on every redraw — add a layer that changes the proportions of the composition and the cells change with it.

The timeline's preview row showing six wide frames of a channel bar, the channel name and subscribe button legible in each
Six frames instead of twenty-four slivers. The words on the bar are readable, which is the whole point of the row.

A colour has a shape too

Every number a layer animates can be opened as a curve: opacity, position, scale, rotation, font size, corner radius — twenty-seven of them. A curve is a value plotted against time, so the button is only offered where there is a value with a height. Colour is not one. The hex for YouTube red does not sit above the hex for link blue, and drawing a line between them would be inventing an axis.

That left colour rows with less than anything else on the timeline: a thin line in one fixed grey, with a diamond at each end wearing the colour it sets and nothing at all in between. You could see that a colour changed. You could not see what it changed to, or where in the run it got there.

The line is now the change. A ramp from the first key to the last, through every colour the track actually passes through, at the times it passes through them. It is sampled through the same evaluator that draws the frame rather than laid out one stop per keyframe, because colour keys carry easing — a run eased into its second colour spends most of its length near that colour, and evenly spaced stops would put the midpoint in the middle, where it is not.

A track keyed twice to the same colour keeps the thin line. Nothing changed, and a fat bar of one colour would say that something had.

Four property rows under a layer: position, opacity and width as thin lines with diamonds, and a border colour row drawn as a wide gradient running red, blue, green, amber and back to red
Three numbers and a colour, on the same layer. The colour row carries the five keys it moves through.

The subscribe card, built rather than pictured

The most-used end screen on Shorts is a white plate stood on its end: the channel's face breaking out of the top of it, SUBSCRIBE underneath, and three round buttons along the bottom with a hand coming in to press the first. It existed here only as something people had seen elsewhere.

It is now two templates, and every visible part of both is an ordinary timeline layer — the plate, the ring, the face, each button, each glyph, the cursor. The name, the handle, the picture in the circle and the colour of the ring are all edited in the editor.

The second is the same card in soft relief: one pale surface with the ring and the buttons pressed out of it, a light edge above and a dark one below, the red dropped to an accent. Only the parts inside the card get the two-sided lighting. Soft relief assumes the thing sits on a surface its own colour, and this card sits on somebody's footage, where a halo round the outside reads as a glow behind a sticker rather than as a shape pressed out of a panel.

Two portrait subscribe cards side by side: a white one with a red ring and buttons ringed with red dots, a hand pressing the first, and beside it the same card in pale soft relief with the red reduced to the glyphs
Subscribe Card at the press, and Subscribe Card Soft beside it. The ring of dots is twenty-four filled circles rather than a dashed stroke — a stroke pattern is a renderer setting, and the two renderers here would have to agree on it.

All updates