Skip to content

Finished video

“Hotaru Yoyaku” before and after in a pictogram video

90 seconds showing three scenes where a gray problem turns into an orange solution, in the same layout

Narration and on-screen text are in Japanese. The sections below describe the video in English.

Service introduction
90 sec
Landscape
Coded motion graphics
In-house sample | The service name and the restaurant are fictional
Published Oct 17, 2026

How it was made: Every scene was drawn in HTML, SVG and CSS and rendered frame by frame in the browser. No generative AI was used. The music and sound effects are free tracks we already had, and there is no narration, so on-screen text carries the message

A video like this$1,200 (excl. tax) · As soon as the same day90 seconds, landscape (pictogram) | Pricing

Overview

The problem state is gray and the solved state is orange, and the same scene is compared before and after.

Subject: The restaurant booking service “Hotaru Yoyaku” (fictional)
Three problems: Phone calls during service stop the cooking
A handwritten booking book double-books a table
A no-show leaves a table empty
How it is shown: In the same layout, a wipe from left to right changes only the color and the symbols. At the end, the three solutions come together on one screen

Materials used and the checks on record

Supplied materials: None. The service name, the restaurant and the screens are fictional.
Where the materials came from: The shapes, icons, figures and screens were all drawn in code. No photos or outside image materials were used.
Checks on record: On the finished video, the length is 90 seconds, the frozen time is 11.9% (the standard is 15% or less) and the loudness is −16 LUFS. We looked at stills to confirm that the three before-and-after scenes change only in color and symbols while keeping the same layout.
What we did: A drop of sweat looked like a hair bun, so we changed its color and position. A rejected tag crossed over a filled seat, so we changed it to go around through the gap in the row. We attached the firefly symbol's wings to its body.

Talk to us about your video

You don’t need a finished plan to get in touch.

Ask about a video like this See pricing and the production process Videos by use and industry Compare with other options