Key frames and the board
Build one still per world from the kit, then plan the time in the Board before you write any motion.
At the end of this page every world of the page has a still that you looked at. The brief has a filled “Ideas” ledger and “Board”. These are stages 4 and 5 of the loopThe loop is the ten stages that make a film: brief, references, design kit, states, board, draft, motion pass, critique, fix and final.. Both come before the motion, because a layout or timing error is cheap to fix now and costly after a render.
You need the design kit from Design system and kit and a films/<name>/page.html with one data-world element for each beat.
Build the key frames
Build one static state for each world
Use the kit parts only. Aim for about 1 line and 2 or 3 things in each frame. Add no motion yet. Give the ground a light, grain or depth device that you named from a reference frame.
Render the stills
bin/vawe frames films/hello/page.htmlThis writes one still for each data-world element, with the other worlds hidden. It also writes a contact sheet and prints the still-frame layout rules.
Look at them at full size
bin/vawe frames films/hello/page.html --full --world s3,s5--full writes stills at the size of the page (1920x1080 for 16:9) as out/<name>-frames/<id>-full.png. --world limits the run to the listed ids. Read each file. Fix text that is cramped, overlapping or unreadable now.
A key frameA key frame is one still of a world in its settled state. is the settled state of one world. If a still has a flat ground, add a device and render again. To try the lens looks on one frame, use bin/vawe frames <page> --looks --at <s>.
Fill the ideas
Before the board, fill the “Ideas” table of brief.md. Write one row for each beat and each cut. Each row has a meaning and four ideas from four different devices, each with a typicality number from 0 to 1. It also has the idea you chose and a reason with the word because. Choose an idea that is not the most typical. The method is in guides/IDEATE.md. bin/vawe check ideas <page> advises on the ledger.
Fill the board
The boardThe board is the "Board" section of the brief: a plan for time, with the rhythm of the cuts, the spectacle second, one named move for each cut and the sound. is a plan for time, not for frames. Run bin/vawe storyboard films/hello/page.html first. It lists what the taste docs say about the plan. Add the board to brief.md under the heading “Board”. It has four parts.
Rhythm
List each beat with its start, its hold and its cut-out length. The cuts must not all be equal: one under 0.4 s and one over 0.9 s.
| beat | in s | hold s | cut out s (length) |
|---|---|---|---|
| cold | 0.00 | 0.70 | 0.70 (0.00) |Spectacle
Write one line: Spectacle: the one big moment at 2.75 s. Put the same second in <meta name="spectacle" content="2.75">. Plan quiet before it. The spectacleThe spectacle is the second of the one big moment in a film, set by <meta name="spectacle" content="6.2">. second and the meta must differ by 0.25 s at most.
A named move for each cut
Add one row for each cut. Each row names a moveA move is a named, copyable piece of motion, such as mask-rise or whip-pan, with its CSS and Web Animations code, notes, a sound line and a clip. from prompts/moves/README.md and what carries the eye. It also gives what leaves first, the overlap in seconds, the camera and the depth. The last two columns say which arrivals overshoot and what the handoff is.
| cut | move (prompts/moves) | what carries the eye | what leaves first | overlap s | camera | depth | overshoots | handoff (family: object) |The handoff cell holds a family of the twelve in taste/craft/transitions.md and the object that carries over, for example position lock: the lockup holds while ground and ink flip. If nothing carries over, write deliberate cut: <reason>. Do not use the same family on two adjacent cuts, or on more than two cuts. Do not write “fade” as a move. Use the moves you named in “Taken from”. The procedure is in skills/vawe-transitions/SKILL.md.
Sound
Add rows under a table whose first column is at s. Plan small effects on actions: a recorded effect first, and a voiceA voice is one of the built-in synth sounds, such as pluck or whoosh, chosen with data-synth="<voice>". for a cut or the spectacle. Plan no bed. A silent film has one row with the voice none. List the voices with bin/vawe sound. The rules are in taste/craft/sound.md.
| at s | voice | gain dB | for |
|---|---|---|---|
| 0.70 | tick | -14 | the turn cut |What you see
bin/vawe reads the board and advises. It never refuses. The advice lines start with board: or transitions: and say, for example, all 5 cuts last 0.7 s; vary them or cuts 1 and 2 both use flood; change the family on adjacent cuts. A plan that you keep on purpose needs no change.
The example is the “Board” section of films/examples/colour-sting/brief.md.
What good looks like
- The beats of the board match the worlds of the page. The
shipverb advises when the start of a beat differs from the page by more than 0.25 s. - Every move in “Taken from” appears in a cut of the board.
- Every cut has a handoff, and the idea you chose for it is the one the frames show.
- Each cut says what carries the eye across it. That is the handoffA handoff is the thing that carries the eye across a cut, such as a match cut, a shared axis or a colour flood..
- The spectacle has a quiet second or more before it.
Common mistakes
| What you see | Why | What to do |
|---|---|---|
board: cut 2 names no move | The move cell is empty or says “fade” | Name a move from prompts/moves |
transitions: cut 3 has no planned handoff | The handoff cell is empty | Write family: object, or deliberate cut: <reason> |
the Spectacle is at 2.75 s but <meta name="spectacle"> says 3.2 s | The board and the page disagree | Put the big move at the board’s second, or change the board with a reason |
| A still looks flat | The ground has no light, grain or depth device | Add one from the kit and render again |