wisp_storybook/stories/
s_vector_overlays.rs

1//! Story: vector highlight + callout overlays
2//! (M-VEC.8 / AUT-60 + M-VEC.9 / AUT-61).
3//!
4//! Composite scene with a "fake UI" backdrop and several overlay
5//! presets demonstrating both modules:
6//!
7//! - Highlight outline ring around a button.
8//! - Highlight filled pill behind a label.
9//! - Callout label box for an annotation.
10//! - Callout numbered badge.
11
12use glam::Vec2;
13use wisp::application::Application;
14use wisp::math::Rect;
15use wisp::{Callout, Color, Highlight, Stage, VectorShape, VectorStroke};
16
17use crate::story::Story;
18
19pub fn story() -> Story {
20    Story {
21        id: "vector-overlays",
22        category: "Vector",
23        title: "Highlight + callout overlays",
24        milestone: "M-VEC.8 / M-VEC.9",
25        writeup: include_str!("writeups/vector_overlays.md"),
26        build,
27        tick: None,
28    }
29}
30
31fn build(_app: &Application, stage: &mut Stage) {
32    let root = stage.root();
33
34    // Outline highlight — yellow ring around the upper-left "button" rect.
35    let outline = Highlight::outline(
36        VectorShape::rounded_rect(Rect::new(-0.7, 0.25, 0.45, 0.25), 0.06),
37        Color::rgba_u8(255, 230, 80, 255),
38        0.025,
39    );
40    let _ = outline.add_to_stage(stage, root);
41
42    // Filled pill highlight — translucent cyan over a rectangular label area.
43    let pill = Highlight::pill(
44        Rect::new(0.05, 0.30, 0.55, 0.12),
45        Color::rgba_u8(80, 220, 240, 255),
46        0.5,
47    );
48    let _ = pill.add_to_stage(stage, root);
49
50    // Callout label box — amber rounded card with a white outline.
51    let label = Callout::label_box(
52        Rect::new(-0.6, -0.4, 0.6, 0.25),
53        Color::rgba_u8(220, 170, 80, 230),
54        Some(VectorStroke::new(0.012, Color::WHITE)),
55        0.04,
56    );
57    let _ = label.add_to_stage(stage, root);
58
59    // Callout numbered badge — red circle in the upper right.
60    let badge = Callout::badge(
61        Vec2::new(0.55, 0.5),
62        0.085,
63        Color::rgba_u8(220, 60, 50, 255),
64    );
65    let _ = badge.add_to_stage(stage, root);
66
67    // Caption pill at the bottom.
68    let caption = Callout::caption_pill(
69        Rect::new(-0.55, -0.7, 1.1, 0.09),
70        Color::rgba_u8(40, 50, 70, 240),
71    );
72    let _ = caption.add_to_stage(stage, root);
73
74    // Glow approximation around the badge — wider stroke with low alpha.
75    let glow = Highlight::glow(
76        VectorShape::circle(Vec2::new(0.55, 0.5), 0.1),
77        Color::rgba_u8(255, 80, 70, 255),
78        0.05,
79    );
80    let _ = glow.add_to_stage(stage, root);
81}
wisp_storybook/stories/s_vector_overlays.rs

wisp_storybook/stories/
s_vector_overlays.rs
