What is B-roll? The cutaways around your main footage, in a website film
What is B-roll? It is the supporting footage an editor cuts to while the main track keeps going: the shot of hands on a keyboard while the interviewee talks, the street outside while the reporter explains. The main track is the A-roll, and B-roll exists to show what the A-roll cannot.
This guide is for someone making a short film of their own website who keeps hearing "add some B-roll" and wants to know what that means when the main footage is a screen recording.
Nightmare House (a browser horror experience), 16:9, 43 seconds, 73 spoken words: a screencast of the live site as A-roll, cut with two motion cards, "Visual distortions" and a 118 BPM big number, as B-roll.
A-roll and B-roll, in a website film
The terms come from film editing, when the main footage and the supporting footage sat on two separate reels. In a film made from a web page, the roles are clear. The A-roll is the screencast. We open your page in a real browser and film it while the camera moves to the parts the narration talks about: the search box, the pricing grid, the button. The voice-over is one continuous take laid over the whole film, so it plays the part an interview plays in a documentary.
B-roll is every scene that is not the page. It covers the beats a page cannot show: the problem before your product existed, a feeling, a number that lives in your head rather than on the screen, a sound.
| B-roll | What it is | Cost | Use it for |
|---|---|---|---|
Motion card | A drawn scene from the script: a statement, a big number, a timeline, a checklist, a quote and more (see the scene visuals) | Included in the render, every plan | Figures, lists, a promise, the closing line |
AI still | A generated image, animated by the camera | 40 credits each, paid plans | A person, a place, a before-state (AI images) |
AI clip | A few seconds of generated video. The house clip is 8 s at 720p, with sound; a named model is priced by quote | 311 credits for the house clip, paid plans | The hook, a transformation, a human moment |
Your own footage | An image or video you upload to replace a scene's picture | No generation cost | A real shoot, a product photo, an event |
Worked example: Nightmare House in 43 seconds
This film was made from nightmare-house-vercel.vercel.app, a psychological horror experience that runs in the browser. It is 43 seconds in 16:9 with 73 spoken words, and every piece of B-roll in it is a motion card: no AI image, no AI clip.
It opens on the title card, then a statement card, "Dare to enter", under the first line: "Feeling brave enough for 6 anomalies?" From there the A-roll takes over. The screencast holds the site's dark hero, its headphones advisory and the "Enter if you dare" button while the voice describes the investigation.
In the middle, for about ten seconds, the film cuts away twice. First a statement card, "Visual distortions", under "Confront anomalies with extreme visual distortion and erratic sensory triggers." Then a big-number card, 118 BPM, labelled "Intense audio", under "Low-frequency audio builds suspense." That figure is on the site itself, in its pulse-frequency readout, so the card is grounded in the page. Then the screencast returns, the cursor goes to the button, and the closing card repeats "Enter if you dare".
Why those cutaways work: a screencast cannot show sound. The site's main selling point, its audio, would have stayed invisible in a straight screen recording, so the big-number card turns a sound into a picture. That is the job of B-roll in one example.
What a paid plan would add: one AI clip on the hook, a slow push down a dark corridor for example, before the first frame of the site. That is the one beat where moving footage earns its price; the rest is right as it is.
For contrast, our own film Made by Seedance (29 seconds) is all B-roll: three generated clips of a desk, a timeline card, a title card, and no screencast. It works as a brand teaser and could never work as a demo. How those clips were written and priced is in AI video clips and B-roll.
How to plan the B-roll for a website film
Most films made from a URL get their cards from the storyboard automatically. Planning B-roll yourself is worth it when you write the script, or when a first render feels like one long scroll.
Mark the beats the page cannot show
Read the script line by line. Wherever a line talks about something that is not on the page (the problem, a feeling, a sound, a result in the customer's life), mark it as a B-roll candidate. Everything else stays on the screencast.
Pick the cheapest picture that carries the beat
A figure or a list is a motion card. A person or a place is an AI still. Use an AI clip only where movement is the message: the hook, a change over time, a reaction. If you have real footage of your team or your shop, upload it instead.
Keep the page on screen
For a film about a website, at least half the scenes should be recordings of the page (one in four in 9:16). If your B-roll list pushes past that, cut cards rather than screencast scenes.
Price it before you generate
In an assistant, list_models and quote_cost are free and give the cost before anything is spent; an AI budget caps how many clips and stills a film may generate. A 45-second film with one house clip and two stills costs one render (40 credits), plus 311 credits for the clip, plus 40 credits per still.
On the free plan, motion cards are the B-roll; AI stills and clips start on paid plans, listed on pricing. The first film on any website is free, with a small badge and no AI visuals.
Why there is no stock footage
Many URL-to-video tools illustrate a script with stock clips. Pictory, for example, lists Getty Images and Storyblocks libraries on its paid plans (see PageToVid vs Pictory). For an abstract article that is often the right picture.
For a website, it is the wrong one. A stock clip of smiling people at laptops could sit in anyone's film, and viewers recognise it. When a beat needs a picture the page does not have, we generate one for that sentence, draw a card from your own figures, or use footage you shot: each is specific to your film.
Mistakes that make B-roll look like filler
- Generated footage of your product. An AI clip of "our dashboard" shows a dashboard you never built. The product is A-roll: film the real page.
- B-roll as wallpaper. A cutaway under a line that names a button hides the button. Cut away when the words leave the page, not before.
- Too much of it. A film that is mostly cards and clips reads as an advert for a product nobody sees. See how to turn a website into a video for what the screencast should cover.
- Text and logos in generated shots. Video models are weakest at readable text and brand marks. Ask for no text, no logos, and put the words in a card.
- A clip where a still would do. A clip costs several times a still. If nothing in the shot needs to move, the still is the better buy.
When not to use PageToVid for B-roll
If your film is mostly B-roll by nature, such as a brand mood piece, a thought-leadership topic with nothing to film, or a news summary, a stock-footage editor fits better: Pictory or InVideo put large libraries behind every scene. If your A-roll is a person, such as a founder interview or a customer testimonial, you need a camera and an editor, and B-roll shot on the day by a videographer will always match better than anything generated. PageToVid is for films where the website is the A-roll; see website to video.
Turn your website into a video — free
Paste the page you want filmed. PageToVid writes the script, films the real site, records the voice and renders the MP4.
Frequently asked questions
What is the difference between A-roll and B-roll?
A-roll is the main footage that carries the story, such as an interview, a presenter or, in a website film, the screen recording of the page. B-roll is the supporting footage you cut to so the viewer sees what the A-roll cannot show.
Is a screen recording A-roll or B-roll?
It depends on the film. In a talking-head video, a screen recording is B-roll. In a film about a website or an app, the screen recording is the A-roll, and the cards, images and clips around it are the B-roll.
Does PageToVid use stock footage?
No. B-roll in a PageToVid film is a motion card drawn from your script, an AI image or clip generated for that scene on a paid plan, or footage you upload yourself.
Can I add B-roll on the free plan?
Yes, as motion cards such as statements, big numbers, timelines and checklists, and as images or videos you upload to a scene. AI-generated images and clips need a paid plan or a film pass, the first film included.