How Text Match Cuts Work Under the Hood

This page explains how TextSnapy builds each frame and turns those frames into a video file without uploading anything. It’s useful if you are curious, if you want to recreate the effect elsewhere, or if you want to understand why some browsers export faster than others.

Anchoring the focal word

Every frame starts from an anchor point – by default the centre of the frame, adjustable with the position sliders. The renderer measures the focal word in its font and size, then places it so the middle of the word sits exactly on the anchor. Because the word is drawn with the same font, size and highlight on every frame, its pixels are identical from cut to cut.

Building context around it

Next, the renderer fills the rest of the frame. On the focal line, words flow outward: leftwards from just before the focal word and rightwards from just after it, so the gaps look like ordinary word spacing. Other lines start at random offsets so each page looks different. The words come from your text first, then from filler copy written for each style.

A seeded random number generator makes every choice – which words, which font, where a line starts. The same seed always produces the same frames, which is why the exported video matches the preview exactly, and why Regenerate (which changes the seed) gives you a fresh set of pages.

Making it fast enough to preview

Drawing a page of text is cheap, but blurring it is not. So the background of each cut is drawn once into an off-screen layer and reused for every frame until the next cut. Each frame then only composites that layer, draws the focal word and applies the zoom or transition. That keeps the preview smooth on phones.

Zoom without losing the match

The zoom is a scale transform centred on the anchor point. Scaling around a point leaves that point where it is, so the focal word grows but doesn’t drift. The amount follows an ease-out curve – quick at first, then settling – controlled by the Zoom and Motion speed sliders.

Encoding video in the browser

Exports use one of two paths, picked automatically:

• WebCodecs. In browsers that support it, each frame is rendered at full resolution, handed to the browser’s built-in H.264 (or VP9) encoder, and written into an MP4 or WebM container with the open-source Mediabunny library. This runs faster than real time and is frame-accurate.
• MediaRecorder. Older browsers record the canvas in real time instead. It works, but the tab needs to stay in front for the duration of the clip.

The cut sounds are synthesised with the Web Audio API – short filtered noise bursts and pitched tones – and rendered offline so they line up with cuts to the sample.

Why nothing is uploaded

All of the above happens in your browser tab. There is no server-side rendering queue, which is why TextSnapy can be free without accounts or upload limits, and why your text stays private.