Design system  /  Identity  /  Film  /  Kinetic type
Film ยท kinetic type

Words arrive when they are said.

We move words, never letters. Each kind of word has one way in, nothing pops, and every line stays up long enough to read.

The rules

Whole words

A letter sweep spells other words on its way. "Conduct" is not "Conduction". So we have no letter reveal at all.

One way in per role

Running words rise out of their line. The hero word turns over, like a hex. A slam word rises fast and stops dead.

Time to read

A line holds 1.5 seconds after its last word, or 0.4 seconds a word if that is longer. Five words a line at most.

Three recipes

Lock

Every word rises into its final place on its beat, and the line locks together. No sound of its own.

Slam

One big word a line, three at most. Each stops dead on a beat, with a dry click on that frame.

Hero

The line locks, and one word turns over in orange: the scene's one orange. A click when it lands.

On a voice

The voice is the clock. We align the take word by word, place it so its first word lands on a beat, and start each word two frames before it is heard. That way each word can be read on the frame it is spoken.

Play the sound to play the film. The picture follows the audio clock.

Spoken now

The word being spoken is underlined and shaded.

Voice only, without music:

This voice is provisional

The takes are generated with a clone of Ruben's voice, from the clean-reference run. Ruben has not yet chosen between this voice and the trained one. When he does, we swap the takes and the film retimes itself from the alignment.

Only generated takes are published. The voice model and the recordings are kept in a private repository, ConductionNL/voice-ruben.

The recipe, step by step

  1. Write the line in our voice: one claim, under 16 words, sentence case.
  2. Generate the take with the cloned voice. Keep only the generated take.
  3. Align it with WhisperX, which gives each word a start and an end. Check the words against the text.
  4. Place the take so its first word lands on a beat.
  5. Pass the words to kineticText in preview/films/_lib/scenes/kinetic.js. Drop the full stop and the comma at the end of a line.
  6. Put the take in the film's music. score.mjs lowers the music under the voice and mixes to -14 LUFS.
  7. Check the sync frame by frame on a contact sheet of the finished render.
Conduction Design System · scene type in preview/films/_lib/scenes/kinetic.js ← Back to film · ← Back to identity