A spoken line in sync with motion

explainer

The brief. Speak "one two three". When the word two starts, grow a circle, then wait until the line ends.

Open in the playground Source on GitHub

What it uses

The code

examples/src/voice.rs in oxframe-sdk, for oxframe 0.20.2. In the playground it compiles in the browser and you can change it.

//! A spoken line. The circle grows when the second word starts.

use oxframe::prelude::*;

#[oxframe::scene]
pub async fn spoken(view: View) {
    let dot = view.add(Circle::new().size(24.0).fill(color!("#e13238")));
    let line = voice("one two three").start();
    line.at_word("two").await;
    dot.size().to(160.0, 0.3).await;
    line.await;
}

pub fn project() -> Project {
    Project::new("voice").size(960, 540).fps(60).scene(spoken())
}

More examples