VyroAI

Loading...

A Cinematic Website Opening

A page that tells a story as the visitor scrolls, made in the web app wizard's Motion step. What the three cards cost, how the Frames board works, and when credits are taken.

What it is

A cinematic opening turns the top of your site into a short story. The page is split into 4 to 6 chapters. Each chapter is a generated picture that changes as the visitor scrolls. In the video version, a short clip moves from one picture to the next.

You make it in the new-project wizard for a Web App, in the step called Motion. The step is optional: Continue never waits on it, and arriving there costs nothing.

How should the page open?

Beside Low cost and Higher cost the card gives the price in credits for the number of chapters planned. While a price is not known yet, it reads the exact price is shown before you start instead.

The first time you pick Cinematic video, a box asks Start with pictures? With Pictures first, the recommended answer, you approve each picture before any clip is made. Straight to video draws and approves every picture by itself, then films the clips. The box warns: Faster, but a scene you don't like costs a whole clip to redo.

Use your kit

Once a cinematic card is picked, the Motion step shows a row headed Use your kit: Who and what should be in the pictures? Everything saved in your Kit is a chip. Tap one and its tag, such as @yourbrand, goes into your description on the next step; tap it again to take it out. The next step lists them under Placed for you from step 2, and + Open Kit takes you to the Kit to add something.

The kit cards are on the Plan step, inside Plan the chapters, in a section also called Use your kit. It reads the tags in your description, and you can pick a kit from the row at the top. Three cards show what was found, each with an Edit in Kit link:

With nothing from your Kit, the step says: The story still works without it — the pictures are then drawn from your words alone.

The board is on the Plan step, not on Motion

Motion is where you pick one of the three cards and, for a cinematic one, tap your Kit chips. The kit cards and the chapters themselves are planned at the end of the wizard, on the Plan step, behind a Plan the chapters button. It moved there on 21 September 2026, so the wizard asks how the page should open before it asks you to write six captions.

The Frames board, step by step

  1. Press “Plan the chapters”. You get 4 to 6 chapters, such as Arrive, Step inside, The work and Book. This part is free: retype any title or caption, press Add a chapter, or press Start the chapters over.
  2. Press “Draw all pictures”. The button shows the credits for all of them before you press. This is the first moment anything is charged.
  3. Judge each picture. Press Approve to keep it, or Redo to draw it again. The board reminds you: A redo costs one picture. Press the green Approved button to undo an approval.
  4. In video mode only: when every picture is approved, go to the row Clips between the pictures. Pick the model and the length in seconds, then press Make the N clips, where N is one fewer than your chapters.
  5. Press “Build the site with these”. It lights up when every picture is approved and, in video mode, every clip reads ready.

When credits are taken

Picking a card, planning chapters, editing words and approving a picture are free. Credits are taken when you press Draw all pictures, Draw or Redo on a single chapter, and Make the N clips.

Pictures are charged when they are drawn, not when the site is built. So if you draw pictures and then go back to Keep it still, the credits for those pictures are already spent.

If the clip model box stays on "Loading models…"

If the model box in Clips between the pictures stays on Loading models…, there is no model to film with, and Make the N clips stays greyed out. The pictures you already drew were still charged. Cinematic pictures needs no video model, so it is the safe route.

When a clip fails

Under the clips row, every clip has its own small label, such as 1 → 2 · filming, which turns to ready or failed. A failed clip gets a try again link right on its label. It films that one clip again.

If you redo or un-approve a picture after the clips were made, the clips are cleared, because they no longer match the pictures. Making them again costs credits again, so settle the pictures first.

What the builder is told

After Build the site with these, a box headed What the builder is told appears. It reads: The page tells a story in N chapters as the visitor scrolls, using your approved pictures (in video mode it adds and the clips between them). The headline stays clear of the busiest part of each picture. The pictures are kept on VyroAI and the site links to them, so an exported copy points at the same hosted files.

Going Back keeps your pictures

The chapters, pictures and approvals are held by the wizard, not by the Motion step, so pressing Back or Continue and returning does not lose pictures you paid for. One thing to remember: the story only reaches the build through Build the site with these. If you change a picture or a clip after pressing it, the box disappears and you press the button again.

Where to next

7 of 37 in Code Studio (IDE) · Last checked 23 September 2026 · Previous: The Template Shelf