RavenRS · Rust GUI

ScrollScene

Edit and run the ScrollScene RavenRS example in your browser. Explore its Rust code and download a Cargo project for desktop and WebAssembly.

One declarative Rust interface, GPU rendering, reactive state and semantic design tokens. Free and open source under MIT OR Apache-2.0.

Rust source

fn scroll_scene() -> impl View {
    // Each step fades in, holds for its share of the scene and fades out.
    let step = |title: &'static str, text: &'static str, from: f32, to: f32| {
        let away = Effect::hidden().then(Effect::moved(0.0, 16.0));
        let card = Card::new(
            VStack::new((
                Text::new(title).style(TextStyle::Title),
                Text::new(text).foreground(Semantic::InkMuted),
            ))
            .spacing(8.0),
        );
        let link = ScrollLink::keyframes([
            (from - 0.08, away),
            (from + 0.02, Effect::IDENTITY),
            (to - 0.02, Effect::IDENTITY),
            (to + 0.08, away),
        ]);
        ScrollLinked::new(card, link)
    };
    let steps = ZStack::new((
        step("1. State", "A click changes a value.", -1.0, 0.33),
        step("2. Layout", "Only what read it moves.", 0.33, 0.66),
        step("3. Paint", "The GPU draws the frame.", 0.66, 2.0),
    ));
    ScrollView::new((
        Text::new("Scroll down: the scene holds while its steps change.").foreground(Semantic::InkMuted),
        ScrollScene::new(steps).length(600.0),
        Text::new("Here the scene lets go.").foreground(Semantic::InkMuted),
        Canvas::new(|_, _| {}).size(10.0, 200.0),
    ))
    .spacing(12.0)
    .height(280.0)
}

The interactive preview loads when JavaScript and WebGPU or WebGL2 are available. You can read the guide and examples here at any time.

More examples