# A whole video

> The gallery (gallery/ of the repository) has one scene per component; render one with cargo run --release -p components-gallery -- frame Sequence@50%.

Page: https://fframes-kit.pages.dev/docs/advanced/a-whole-video/

```rust
use fframes_kit::prelude::*;

#[derive(Debug)]
pub struct MyVideo {
    pub theme: Theme,
}

impl Video for MyVideo {
    const FPS: usize = 30;
    const WIDTH: usize = 1920;
    const HEIGHT: usize = 1080;

    fn duration(&self) -> Duration<'_> {
        Duration::Seconds(6.0)
    }

    fn audio(&self) -> AudioMap<'_> {
        AudioMap::none()
    }

    fn render_frame<'a>(&'a self, frame: Frame, ctx: &FFramesContext<'a, '_>) -> Svgr<'a> {
        let mut ui = Ui::new(frame, ctx, &self.theme);
        let c = self.theme.colors;
        let title = self.theme.typography.title;
        let content = ui.show(Series {
            items: vec![
                (3.0, children(move |ui| {
                    let fade = FadeIn { shift: (0.0, -40.0), ..ui.defaults() };
                    let out: FadeOut = ui.defaults();
                    let text = svgr!(
                        <text x="96" y="540" font-family={title.family} font-size={title.size}
                              font-weight={title.weight} fill={c.title}>"Hello"</text>
                    );
                    let entered = fade.apply(ui, text);
                    out.apply(ui, entered)
                })),
                (3.0, children(move |ui| {
                    let fade: FadeIn = ui.defaults();
                    fade.apply(ui, svgr!(<circle cx="960" cy="540" r="200" fill={c.accent} />))
                })),
            ],
            overlap: 0.0,
        });
        svgr!(
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"
                 width={ctx.current_video_size.width} height={ctx.current_video_size.height}>
                <rect width="1920" height="1080" fill={c.background} />
                {content}
            </svg>
        )
    }
}
```

The gallery (`gallery/` of the repository) has one scene per component; render one with
`cargo run --release -p components-gallery -- frame Sequence@50%`.