Cropping a landscape video to portrait usually cuts the words

When we made the 11 samples, we built them in landscape and assumed that for a phone's portrait screen we could simply crop them. We could not. Cropping removes the ends of the text and half of the product. If you run a business and also make everything you show people yourself, this may be familiar. You take a photograph, put it on the website, upload it to Instagram, and paste it into a deck for a meeting. Each place asks for a different shape.

A landscape frame is a shape for putting things side by side. The product on the left, the name and the price on the right. Crop that to portrait and what remains is roughly the middle third. Whatever sat on the left and the right leaves the frame from both edges inward. Text usually runs out close to the right edge, so the first thing to disappear is the end of the sentence, which is to say the point you most wanted to make.

So we built a separate portrait composition for all 11 samples. Not a crop: a different arrangement. Our samples are not video files; they are drawn inside the browser with HTML, CSS and JavaScript. Each piece is a function that takes a moment in time and returns the picture at that moment. We gave that function one more thing to take in: a signal that says the frame is narrow now. When the signal is up, the piece draws itself in a different layout. We set the threshold at a frame narrower than 560px.

In portrait, things that were side by side stack top to bottom. A line holds fewer characters, so the line breaks have to be decided again. The framing changes too, because something fully visible in landscape can be so close in portrait that you cannot tell what it is. The same 15 seconds, the same thing to say, only the arrangement is different.

We also changed how we checked. Watching the video play does not find what is cut off; the eye follows the movement and never looks at the edges. So we stopped the clock and photographed 10 frames of each piece, at a desktop size (1440×900) and a phone size (390×844). Laid out as stills, the things we had missed appear at once.

Here is what appeared. In the EV piece, the top of the car was cut off. In another, the performance figures were cut off at the top. In the resort piece, the place name was cut off at the right. On the phone a price line was cut, a heading in the beauty piece broke in an ugly place, and the labels on a map were too small to read. One frame had a height of 0 and showed nothing at all. None of it was visible while the pieces were moving.

The smallest fix was in the music-festival piece. The festival is fictional, and so are the names on its lineup. On the phone, one of those names had only a few pixels of space left before the right edge. Nothing was cut. But a few pixels of margin is not a margin. A slightly different screen width, or a different fallback typeface, and that name is cut. We took the text size down from 13 to 11.5 in the units we measure against the frame, and made room.

A few pixels is not a margin: that is what I took from it. Fitting exactly is not far from not fitting. I do not think this is only about video. When you decide a text size, you either put the longest case in first and then decide, or you decide on the ordinary case and pray about the long one. Choose the second and one day it is cut on somebody's screen.

I think our job is to keep the person who commissions the work from carrying that. So in KAZENA Motion we design every scene in both landscape (16:9, for websites) and portrait (9:16, for Instagram and TikTok). What we deliver is a video file for each shape, together with the original files of the video (HTML, CSS, JavaScript and a short guide). Because those files exist, changing one line of text does not have to start with making the video again.

One honest limit. The smallest plan, Mini Motion, gives one shape only, landscape or portrait, and you choose. It is an entry plan built from existing templates, so building two separate arrangements is not part of it. If both shapes are needed, that is a plan above it. Which is another way of saying that it is better to decide which shape you need before anything is made.

That is why one of the first things we ask is whether you need landscape or portrait. The question looks harder than it is. Put another way, it is this: where will people actually see this? The top of a website, or a deck you show in a meeting, is landscape. Instagram, TikTok and stories are portrait. For a small business, portrait is usually what is needed first.

If there is one thing to do today, it is this: before making anything, pick the single place where people will see it first. Pick one place and the shape is decided. With the shape decided, you can stop running your text out to the right edge. This is not only about video; a single product photograph is the same. Aim for one picture that works everywhere and you get one picture that is slightly wrong everywhere.

KAZENA Motion is not taking orders yet. If you would like to be told when it opens, you can ask from the page.