Docs components

Every component that a docs page can use, rendered live. For docs writers; the rules are in DESIGN.md and WRITING.md.

This page shows each docs component once. Copy the MDX from content/docs/style-guide.mdx. The design rules are in DESIGN.md and the writing rules are in WRITING.md, both at the root of the docs repo.

Video

The renderer seeksTo seek is to set the page to a time t in seconds and paint the frame for that time. the page to a time and captures one frame. The same time always gives the same frame.

The playhead seeks to 1.2 s, then to 3.0 s, then back to 1.2 s. The third seek gives frame 72 again.

Figure

The page on the left with the playhead between two seeks; the frame on the right still shows frame 72.
Between two seeks, the frame does not change. Made with vawe still at 2.2 s.

Diagram

The renderer does this for every t from 0 to the duration, then mixes the audio.
Do the stages in order. Each verb prints a next: line that names the next stage.

A new diagram uses the primitives. Mark the one thing to notice with accent.

A small custom diagram from the primitives, with a narrow drawing for a phone.

Steps

Write the brief

bin/vawe new hello --request "a 5 s sting for a coffee brand"

Render a draft

bin/vawe dev films/hello/page.html

You see out/hello-draft.mp4 and a next: line.

Callout

Term

A worldA world is the one element that holds one beat of the film, marked with data-world="<id>". holds one beatA beat is one part of the story with one idea, such as the hook, a feature or the end.. The virtual clockThe virtual clock is the code in core/engine/page-clock.js that controls Date, requestAnimationFrame, timers and Math.random during a render. makes timers follow the seek.

Cards

Quickstart

Render a film in ten minutes.

Glossary

The words the docs use.

On this page

VideoFigureDiagramStepsWrite the briefRender a draftCalloutTermCards