Videobana

Getting started

Videobana turns a JSON document into a narrated, animated explainer video. This page takes you from nothing to a downloaded file in a few minutes.

How it works

A video is described by one JSON document: a list of scenes (title card, cards, charts, quiz, code…) and, for every scene, the sentences the narrator says. Everything else is automatic.

  1. 1
    Build the video
    Scene by scene in the visual editor, as JSON, from an example, or let the AI write it from a topic. Every problem in the document is reported with its location and a hint on how to fix it.
  2. 2
    Preview it
    The preview plays the video in your browser straight away, with an estimated timing. The timeline under it shows every scene, sentence and the music, with an audio track for your own recordings and music: drop them there, move them and trim them.
  3. 3
    Add the voice-over
    In the Voice tab, generate it with a text-to-speech voice, record your own while the video plays, or import an audio file. The picture follows the audio: items appear exactly when the narrator reaches them.
  4. 4
    Export
    The server draws every frame of the video in a headless browser and encodes it, so the file looks exactly like the preview. Choose the format, aspect ratio and resolution you need.

Sharing and embedding

Saved videos are private by default. In the editor, open Share to make a video public: anyone can watch it at /watch/{id} and embed it with the code the dialog generates. Private videos answer 404 to anonymous visitors; oEmbed and public media URLs work the same way.

Quick start

1. With the dashboard and the AI

  • On the dashboard, say what the video is about and choose a kind of video (or open Create and press Generate with AI, where the kind is the first thing to pick). The window asks what to start from: an idea, your own script, notes or a web page, or your own pictures. Adjust the length, the shape, the language and the voice if you like; a look, an audience, a tone and background music are under the other options.
  • Open the result in the visual editor or the JSON editor. Change anything: the preview and the checks update as you edit, and Undo takes the whole AI result back.
  • To change something in plain words, use the sparkle on a scene (Edit this scene with AI), or the Change this video tab of the AI window, which can also translate the video.
  • To change one scene, click on its picture in the AI window at what is wrong (or press Point at what to change under the preview) and write a note there: the notes are numbered, and the AI knows which words each one is about. Pictures help too: drop, paste or choose up to four (a photo, a chart, a sketch) in any of the AI forms, and the AI works from what they show. Tick Also show it in the video to put one in the video.
  • A video the AI writes gets its voice-over recorded as soon as it opens (you can turn that off in the window), and is saved to your projects. A saved video saves itself a moment after you stop editing; the Finishing touches row under the preview says what is still missing (the voice-over, pictures, music). Export opens the export page in a new tab, and Publish prepares what you need to post it.

2. With your own JSON

Open Create, switch to the JSON view and paste your document, or press Import to open a .json file. The editor colours the JSON, completes keys and values as you type, and underlines every problem. Export in the same view downloads the document. This is the smallest useful document:

{
  "title": "My first video",
  "subtitle": "Edit this JSON and the preview updates as you type.",
  "domain": "general",
  "scenes": [
    {
      "kind": "intro",
      "say": [
        "Welcome! This is my first video."
      ]
    },
    {
      "kind": "statement",
      "eyebrow": "Remember",
      "text": "Change **anything** and watch the preview update.",
      "icon": "✨",
      "say": "Change anything, and watch the preview update."
    },
    {
      "kind": "bullets",
      "heading": "Try this next",
      "items": [
        {
          "text": "Change a **say** line",
          "say": "Change what the narrator says."
        },
        {
          "text": "Add a scene from the list",
          "say": "Add another scene from the list."
        },
        {
          "text": "Press **play**",
          "say": "Then press play to watch it."
        }
      ]
    }
  ]
}

Only title and scenes are required. See JSON format for every field and the scene reference for what each kind of scene needs.

3. From your own code

One request stores the video and starts the export; then you poll the job and download the file. The full flow, with curl, Node and Python, is in the API guide.

4. On your website

A video you made public, or any video JSON, plays on any page with one script and one tag: <video-player>. Autoplay, loop, captions, volume, speed and the controls are attributes, and it can be the hero section of a page. See the web component guide.

Voice-over

There are two kinds of voice-over, set by narration.engine. Wherever you create a video, you first choose Standard or Premium, and the options that follow are the ones of your choice. Product ads (Ads) always use the premium voice.

Standard voice

The default ("engine": "standard"). The narration is generated by a local Supertonic text-to-speech server. Choose a voice (narration.voice: M1, M2, M3, M4, M5, F1, F2, F3, F4, F5), a speed and a language (31 languages, or na to detect it from the text) in the narration block of the document. Press play to hear each voice; the samples are in English, and every voice speaks all the languages.

  • Male voice 1
  • Male voice 2
  • Male voice 3
  • Male voice 4
  • Male voice 5
  • Female voice 1
  • Female voice 2
  • Female voice 3
  • Female voice 4
  • Female voice 5
  • Every sentence is synthesised on its own, trimmed and placed on a timeline with short pauses between sentences and longer ones between scenes (narration.pauses).
  • A sentence that is already recorded is reused: changing one line re-records only that line.
  • Set narration.silent to true for a video without a voice. Captions carry it and timing is estimated from the text.
  • A video can also be written in zh, th, he, ms, no, which have no generated voice: it is then silent, with captions, unless you add a recording of your own.
  • If the voice mispronounces a word, spell it the way it should sound in narration.pronunciations. Captions keep the original spelling.
  • Names and phrases from another language in the middle of a sentence (the German street names of an English travel video, say) go in narration.foreign, by language: { "de": ["Brandenburger Tor"] }. That language's voice speaks them; the captions do not change.

Premium voice

"engine": "premium" speaks with Google Gemini 3.8 Flash TTS (google/gemini-3.8-flash-tts) through OpenRouter, with the same key as the AI. It is directed like an actor, so the voice can sound like the person or the brand the video is about. Choose one of 30 voices in narration.premium.voice; every voice speaks every language, and you can hear each one here:

  • Zephyr · Bright
  • Puck · Upbeat
  • Charon · Informative
  • Kore · Firm
  • Fenrir · Excitable
  • Leda · Youthful
  • Orus · Firm
  • Aoede · Breezy
  • Callirrhoe · Easy-going
  • Autonoe · Bright
  • Enceladus · Breathy
  • Iapetus · Clear
  • Umbriel · Easy-going
  • Algieba · Smooth
  • Despina · Smooth
  • Erinome · Clear
  • Algenib · Gravelly
  • Rasalgethi · Informative
  • Laomedeia · Upbeat
  • Achernar · Soft
  • Alnilam · Firm
  • Schedar · Even
  • Gacrux · Mature
  • Pulcherrima · Forward
  • Achird · Friendly
  • Zubenelgenubi · Casual
  • Vindemiatrix · Gentle
  • Sadachbia · Lively
  • Sadaltager · Knowledgeable
  • Sulafat · Warm
  • narration.premium.style is how the whole video is delivered: emotion, energy and inflection in a few words (“warm, confident, with a smile in the voice”). accent is a regional accent or dialect as a hint (American, British, Australian, Irish, Scottish, Indian English, South African, Canadian, Southern American, or your own), and pace is slow, natural, brisk.
  • Every scene can add to it with its own delivery (“building excitement”, “quiet and sincere”), so a video can start curious and end warm.
  • Moments of human sound go in the narration as tags, such as <breath>, <sigh>, <laugh>, <whispers> or <short pause>. The voice performs them; the captions leave them out. A tag the voice does not know is dropped rather than read aloud.
  • Sentences are recorded one by one and reused when they do not change, as with the standard voice. A change of voice, style, accent or pace records the video again.
  • The premium voice has no speed: how fast it speaks follows from pace. It has an allowance of its own, counted in the seconds it speaks (the Free plan has 3 minutes a month; a sentence that was spoken before costs nothing), shown next to your other limits on the Usage page. It needs OPENROUTER_API_KEY.

For both

Exports record the voice-over first when it has not been recorded (or the script changed). You can also add it in the editor, while you write, to hear the result before exporting. The examples of the gallery come with theirs.

Exporting

FormatWhat you get
mp4H.264 + AAC. Plays everywhere: social media, phones, slides.
webmVP9 + Opus. Smaller files, ideal for the web.
movH.264 + AAC in a QuickTime container, for Final Cut and iMovie.
gifSilent loop, limited to 480p and 15 fps.
mp3Just the narration, for podcasts.
pngOne frame, for thumbnails (set `at`).
srtCaptions timed to the narration.
vttCaptions for HTML5 video players.
jsonThe spec this video was made from.

Aspect ratios and resolutions

The aspect ratio sets the proportions (16:9 landscape, 4:3 classic, 1:1 square, 4:5 portrait, 3:4 tall, 9:16 vertical). The resolution names the pixels of the shorter side, so 1080p is 1920×1080 for 16:9 and 1080×1920 for 9:16. The layout adapts to the aspect ratio: wide ones use the landscape layout, square and tall ones the phone layout.

Aspect ratio480p720p1080p2160p
16:9854×4801280×7201920×10803840×2160
4:3640×480960×7201440×10802880×2160
1:1480×480720×7201080×10802160×2160
4:5480×600720×9001080×13502160×2700
3:4480×640720×9601080×14402160×2880
9:16480×854720×12801080×19202160×3840

Also available: 360p, 480p, 720p, 1080p, 1440p, 2160p; frame rates from 10 to 60 fps; draft, standard and high encoder quality; and an optional length limit that renders only the first seconds, which is handy for checking settings.

Presets in the dashboard

PresetSettings
YouTube16:9 · 1080p · MP4
Shorts / Reels / TikTok9:16 · 1080p · MP4
Instagram post1:1 · 1080p · MP4
Web embed16:9 · 720p · WebM
Quick draft16:9 · 480p · first 15 s
Thumbnail16:9 · 1080p · PNG

Writing with the AI

The AI is given the full scene catalog and the style options, writes a complete document and has it checked by the same validator you use. If the first answer has problems, it is shown the list and asked to fix them, up to three times. The dashboard shows how many attempts it took.

The kind of video

Pick what the video is for and the AI writes it that way: a hook for a short, a recap for a lesson, a call to action for a promo. The kind also sets a sensible shape, length and look, and the mood of the music; change any of them if you want something else.

KindForShapeLength
explainerExplainer: Make a topic click. Made for YouTube, websites, courses.16:9 landscape3 minutes
lessonLesson: Teach it so it sticks. Made for Classrooms, courses, training.16:9 landscape5 minutes
howtoHow-to: Step by step. Made for Tutorials, recipes, DIY, help centres.16:9 landscape3 minutes
revisionRevision: Remember it for the exam. Made for Students, study groups, exam preparation.16:9 landscape3 minutes
quizQuiz: Test what they know. Made for Classrooms, social posts, team events.16:9 landscape3 minutes
shortShort: Vertical and fast. Made for TikTok, Reels, YouTube Shorts.9:16 vertical30 seconds
tipsQuick tips: 5 ways to…, 3 mistakes…. Made for TikTok, Reels, Shorts, LinkedIn.9:16 vertical1 minute
storyStory: Tell it like a documentary. Made for YouTube, history, biography, bedtime.16:9 landscape3 minutes
travelTravel guide: Plan a trip, show a place. Made for YouTube, Instagram, friends and family.16:9 landscape3 minutes
inviteInvitation: Parties, weddings, events. Made for WhatsApp, Instagram stories, group chats.9:16 vertical30 seconds
memoriesMemories: A tribute, a year in review. Made for Family, anniversaries, farewells.16:9 landscape1 minute
promoPromo: Sell an idea or product. Made for Websites, ads, social feeds.16:9 landscape1 minute
demoProduct demo: Show your app or site in action. Made for Websites, sales emails, help centres, social feeds.16:9 landscape1 minute
offerOffer: A sale, an opening, news from the shop. Made for WhatsApp status, Instagram, Facebook, shop screens.9:16 vertical30 seconds
reviewReview: Compare it, rate it, decide. Made for YouTube, blogs, social feeds.16:9 landscape3 minutes
casestudyCustomer story: Problem, solution, result. Made for Websites, sales decks, LinkedIn.16:9 landscape1 minute
trainingTraining: Onboarding, policies, safety. Made for Intranets, onboarding, compliance.16:9 landscape5 minutes
updateUpdate: What's new, in order. Made for Team updates, news, newsletters.16:9 landscape3 minutes
pitchPitch: Win over a room. Made for Meetings, investors, proposals.16:9 landscape3 minutes

The shape (aspect) is kept in the document, so the editor, the watch page, embeds and exports start from the shape the video was made for. The AI pictures follow it too: a tall video gets tall pictures.

LengthScenesRuns for
30s4 to 530 seconds
1m6 to 81 minute
3m10 to 143 minutes
5m16 to 225 minutes
10m28 to 3810 minutes

The voice speed (speed, from 0.5 to 2, default 1) is passed to the AI too: at a faster voice it writes more words for the same length, at a slower one fewer. If the result runs well over or under the length asked for, it is asked once or twice to adjust.

Give it a clear topic, and use the description for what to include or avoid, the audience for who is watching, and the tone for how it should feel. Setting the domain forces a look; leave it out and the AI picks one.

Base a video on a web page or your own text

Choose Notes or a link under Start from in the creation window. Paste the address of an article, a post or a documentation page and press Read page: its words appear in the box (without menus, footers and side panels) and the topic is filled in from its title. You can also open a .txt or .md file, or paste any text. The box is yours to edit before you generate: the script then uses only the facts in it. About 3,000 words fit; for a longer text, keep the part the video is about.

Only public pages can be read: addresses on a private network are refused, and so are pages that need a sign-in, build themselves in the browser, or are not text (PDF, images). For those, copy the text and paste it.

Say your own words

Choose My own script, then write or paste the narration. The video says exactly those words, in that order: the AI only divides them into scenes and designs the screen of each, and the length of the video follows from the script (up to 9,000 characters). The window counts the words and tells how long they take to say at the voice speed you chose. Pictures you add are put in the video. If the AI changes some of your words, it is sent back to put them right; if it still does not keep them, you are told how much of your script made it, and can carry on or try again.

Start from your pictures

Choose My pictures and drop, paste or choose up to four (photos, screenshots, a whiteboard, a chart). The AI tells the video from what they show, and puts them in it unless you untick Also show it in the video.

Music with the AI

Tick Add background music and the AI composes an instrumental track that fits the kind of video, without vocals so the voice stays clear, and puts it under the narration. It plays in the preview, on the watch page and in embeds, and is mixed into exports, always lowered while someone speaks. You can also compose one at any time from the Music tab of the editor: choose a mood (calm, uplifting, energetic, cinematic, playful, corporate, tense, chill), add your own words (“with a Spanish guitar”) and pick a loop of about 30 seconds or a full track of about 2 minutes. A track counts against your monthly AI tokens, about as much as writing one video.

Sound design

A professional film is cut to sound as much as to picture. Set sound on a video and it gets sound design made for it, from nothing, so no files and no licences: whooshes on the cuts, a hit on every hard cut, a riser and a deep impact as the product appears, small pops for lines of text and a sparkle on the offer. effects is soft, punchy (the default) or cinematic; bed adds a music bed (ambient, pulse or drive) whose tempo is fitted to the cuts so they land on the beat. The narrator always sits on top: the bed ducks under the voice, and the whole mix is mastered to about −15 LUFS, the level of social video. It plays in the preview and is mixed into exports. Product ads switch it on for you.

Your brand

Give one video your name, logo, brand colour and fonts, then press Keep this video's as my kit under Brand kit in the side panel. Every new video the AI writes starts with your kit (the window has a switch to leave it off for one video), and Use it on this video puts it on any other. The kit is kept with your account, so it is there on any device.

Pictures with the AI

A video with pictures holds attention better than one made of text alone. The Generate images with AI box of the creation window is ticked by default: once the script is written, an art director reads it and decides which scenes deserve a picture, then paints them in one look so they read as a series.

  1. 1
    Plan
    The art director chooses the scenes, whether each gets a backdrop behind it, a cut-out beside the text, or a picture scene of its own, and writes a prompt for every picture. It plans only as many as you have credits for.
  2. 2
    Paint
    The pictures are painted together on sprite sheets: a grid of pictures per request to the model, separated by magenta dividers (12 pictures use a 3 × 4 grid, more are split evenly over several sheets, because models draw big grids right less often). A cut-out is painted on a flat green or black screen, which is removed afterwards so it has a transparent background.
  3. 3
    Place
    Each picture is cut out of the sheet along the dividers the model drew, so it holds nothing of its neighbours (a sheet whose grid cannot be read is painted again), checked (a cell the model left empty, or a subject its cell cuts off, is painted again once), saved to your images and put on its scene. Nothing is lost if you stop: the pictures that are ready are kept.
  • Untick Generate images with AI when you only want the script. You can add pictures at any time from the Pictures tab of the editor.
  • In the creation window and in the editor, choose the look (photo, cinematic, flat illustration, 3D, isometric, watercolour, anime, pixel art, pencil sketch, papercraft, neon, or Auto), how many scenes get a picture (a few, balanced or lots) and the shape of the pictures.
  • Pick a scene in the editor to paint, upload, or choose a picture for it alone, and to see what it was painted from. Several versions can be painted at once, so you can pick the best.
  • Every picture that comes out counts as one AI image against your plan (100 a month on the free plan). A picture that does not come out is not charged. The Usage page shows what is left.

Your own footage and screenshots

Two scenes are made from what you bring, so a video can show your own footage and your own screens.

  • Video clip (clip): footage from a phone or a camera fills the frame while the narrator speaks, or plays on its own. You add it in the editor (the AI cannot see your footage): upload an MP4, MOV or WebM of up to a minute and 100 MB; it is prepared as a silent video with a poster picture, so the voice and the music carry the sound. Choose the part to play (start and length) and whether it fills the frame or fits inside it (fit). The scene lasts at least as long as the clip plays, and exports draw it frame by frame like everything else.
  • Walkthrough (walkthrough): a screenshot of an app, a website or a document becomes a guided tour. The picture sits in a window frame, the view glides to each area you mark, the rest dims, and a numbered pin shows a short note while the narrator explains it. Attach a screenshot to the creation window (the Product demo kind is made for this) and the AI marks the areas itself, or add the scene in the editor and draw each area on the picture. Each step has its own words and a marker (box, spotlight, arrow or pin), up to eight steps per screenshot.

Publishing

Publish in the top bar gathers what you need to post the video, from its own words:

  • Chapters for the YouTube description, with the time each scene starts (YouTube needs at least three, each at least ten seconds, starting at 0:00).
  • Post copy for YouTube, TikTok, Instagram, LinkedIn and X: a title or caption, text and hashtags for each, within that place's limits. Choose the places, write again for one of them, edit and copy. It uses only what the video says, and counts against your AI tokens.
  • Subtitles as .srt or .vtt files timed to the narration.

Tips for good videos

  • One idea per scene, one short sentence per idea. Sentences of ten to twenty words are easy to follow.
  • Start with an intro and end on your strongest scene: a statement, a number or a picture. Add an outro recap only to a long lesson, and a cta only when the video asks the viewer to do something.
  • The top bar and the progress indicator are optional. Hide them for short, cinematic videos with style.header set to [], and keep them for long lessons.
  • Mix scene kinds: cards, a chart, a quiz and a code scene in a row feel livelier than five card scenes.
  • Keep on-screen text short. The limits exist so the text always fits, even on a phone-shaped video.
  • Write numbers as you want them spoken. In English, digits and symbols are read out well; in other languages write them in words.
  • Let the domain pick the look first, then change only what you need in style.
  • Use pictures where they explain, not on every scene: a few strong backdrops and cut-outs are better than a picture behind everything.

When something does not work

The dashboard shows the state of every part the engine needs. Each one that fails says what is wrong:

PartNeeded forIf it fails
Voice serverRecording the voice-overStart the Supertonic server (default http://localhost:30008/tts) or set TTS_URL. Silent videos work without it.
ChromeMP4, WebM, MOV, GIF and PNG exportsInstall Google Chrome or set CHROME_PATH.
ffmpegEncoding audio and videoInstall ffmpeg and ffprobe, or set FFMPEG and FFPROBE to their paths.
AI keyGenerating with the AI and recording the premium voice-overSet OPENROUTER_API_KEY and OPENROUTER_CHAT_MODEL.
Image modelPainting picturesSet OPENROUTER_IMAGE_MODEL to a model that can paint images. The same key is used.
StorageSaving videos and exportsMake sure DATA_DIR is writable.