Build a scrolling ranking video from JSON and your own images
It suits content that is a rank, a photo and a short caption repeated down a list, such as a top ten. The layout is just cards scrolling sideways, so you can build it without opening an editor.
The recommended format is an object with meta, video, style, display and items. The older card-array-only JSON still loads. When video / style / display are present in the JSON, those values are applied to the on-screen settings before rendering.
"Set the length by" chooses which end you fix. Either way, the value you did not fix is calculated and written into its input, so the current seconds and px/s are always visible on screen.
| Mode | You enter | Solved for you | Good for |
|---|---|---|---|
| Scroll speed | Speed (px/s) | Video length | When how fast it reads matters most |
| Total seconds | Length (s) | Speed (px/s) | A fixed running time: matching BGM, a 30-second ad slot, cutting against other material |
The arithmetic is the same in both directions. Travel distance = video width + total card width (count x card width + gaps); travel time = distance / speed; length = start wait + travel time + end wait. The waits are inside the length you ask for, so asking for 15 seconds exports a 15-second file.
When you set the length, whatever is left after the start and end waits is the time available for travel. A request that leaves less than 0.2s cannot be honoured, so it is raised to the shortest workable length and a warning is shown. It is never silently exported at a different length. If you want it shorter than the tool allows, reduce the start and end waits.
The three readouts on screen (card count, duration, travel distance) update as you change settings.
| Video size | Ratio | Typical use |
|---|---|---|
| 1280x720 | 16:9 | Quick tests |
| 1920x1080 | 16:9 | Standard landscape video |
| 1080x1920 | 9:16 | Short-form and vertical social posts |
| 720x1280 | 9:16 | A lighter vertical export |
The rank band, caption, border and accent line can each be turned off. For a photo-only look, hide the caption and rank band and raise the image area towards 100 percent. To make the text readable instead, increase the card height and lower the image area. Accent colors can be set per card through the accent field in the JSON.
Image framing is controlled by fit (cover or contain) and position (for example 50% 50%). If faces are cropped, move the position higher.
A ranking video where cards scroll from right to left. Each card holds a rank, an image and a caption. A reverse button flips the JSON order, so you can run it from lowest to highest or the other way around.
You do not upload them. Use "add images" to pick local files or drop them in. Your JSON only needs the file name. Loaded images stay inside your browser.
You choose between two modes. In "Scroll speed" the length follows from the number of cards, their width and gap, and the speed in pixels per second, plus the start and end wait times. In "Total seconds" it works the other way round: you give the seconds and the speed is solved so the cards fit. The current card count, duration and travel distance are shown on screen.
Yes. Set "Set the length by" to "Total seconds" and enter 30 as the length. The speed needed for every card to scroll through is calculated for you. The start and end waits are counted inside that length, so the exported file is exactly 30 seconds.
A length that leaves less than 0.2s after the start and end waits cannot work, because no time is left for the cards to scroll. In that case the length is raised to the shortest workable one and a warning says so on screen. Reducing the start and end waits lets shorter lengths through.
No. Parsing the JSON, loading images and exporting the video all happen in your browser. No external request is made.