Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Cursor preview canvas + appearance controls

Linear: AUT-141

CursorPreviewCanvas reuses the same backend pattern as the editor canvas (CSS fallback / Wisp asset / runtime unavailable) so a pixel- accurate Wisp preview can drop in later without changing the component contract. CursorAppearancePanel composes UI-18 inspector primitives into APPEARANCE / CLICK EFFECT / MOTION / BEHAVIOR sections with a footer (Reset / Apply).

Preview states

StateStory
Arrow with ring (light bg)cursor-preview-arrow-ring
Dark backgroundcursor-preview-dark-bg

Appearance panel states

StateStory
Defaultcursor-appearance-panel-default
Pulse click effectcursor-appearance-panel-pulse
Spotlight click effectcursor-appearance-panel-spotlight
Trail on (high smoothing)cursor-appearance-panel-trail-on

API

#![allow(unused)]
fn main() {
use ui_storybook::components::cursor::{
    CursorPreviewCanvas, CursorPreviewBackend, CursorAppearancePanel,
};
use ui_storybook::fixtures::cursor::sample_cursor_appearance;

view! {
    <CursorPreviewCanvas backend=CursorPreviewBackend::CssFallback />
    <CursorAppearancePanel view=sample_cursor_appearance() />
}
}

Halo strength row dims when halo is off

The appearance panel ships with disabled: true on the halo strength slider when halo_enabled == false — a small touch that prevents the parent from worrying about how to disable individual controls inline.