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.
The duration is computed for you. The total width of the cards (count times card width plus gaps) divided by the scroll speed gives the travel time, and the start and end wait times are added to it. 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.
It is derived from the number of cards, their width and gap, and the scroll speed in pixels per second, plus the start and end wait times. The current card count, duration and travel distance are shown on screen.
No. Parsing the JSON, loading images and exporting the video all happen in your browser. No external request is made.