OrbUX
All loaders

CSS / SVG · 7.5 KB gzip

Switch Cascade

Cascade geometry using switch motion with state-specific transitions.

recipegenerated-recipeswitchcascadestate-aware
Download HTML Download JS
Interactive preview

Usage

Download HTML

Packages are @vikast908/core and @vikast908/loaders. Prefer 0.2.1+ (0.1.0 loaders is broken on npm). 

npm install @vikast908/loaders@0.2.1 @vikast908/core@0.2.1
import '@vikast908/loaders/switch-cascade';

<orbux-switch-cascade state="thinking"></orbux-switch-cascade>

Browser-only alternative: Download HTML (self-contained) or load the hosted ESM bundle: 

<script type="module" src="http://localhost:4321/orbux/switch-cascade.js"></script>

<orbux-switch-cascade state="thinking"></orbux-switch-cascade>

Component source switch-cascade.ts 

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Switch Cascade: cascade geometry driven by the switch motion recipe. */
export const OrbuxSwitchCascade = defineGeneratedLoader('switch-cascade');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-switch-cascade': InstanceType<typeof OrbuxSwitchCascade>;
  }
}

Depends on @vikast908/core. Paste the source, add the base element, and set state from your agent code.

Attributes & properties

NameTypeDescription
stateAgentState idle · thinking · streaming · tool-calling · waiting · done · error · cancelled
sizeCSS lengthOverall square size.
--orbux-widthCSS lengthOptional inline-size override.
--orbux-heightCSS lengthOptional block-size override.
speednumberAnimation speed multiplier (1 = default).
labelstringAccessible label (defaults per state).
pausedbooleanFreeze the animation.
quietbooleanSilence the ARIA live region (name stays current).
show-labelbooleanRender a visible caption beneath the loader.
pulse()methodFeed a data-activity burst (e.g. per streamed token).

Respects prefers-reduced-motion, exposes status/progressbar semantics with a debounced live label, and auto-pauses (sets data-paused) when offscreen or the tab is hidden. Emits orbux:statechange plus orbux:done / orbux:error / orbux:cancelled. Map an agent SDK on with @vikast908/core/adapters.