All loaders

CSS / SVG · 7.5 KB gzip

Scan Prism

Prism geometry using scan motion with state-specific transitions.

recipegenerated-recipescanprismstate-aware
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/scan-prism';

<orbux-scan-prism state="thinking"></orbux-scan-prism>

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

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

<orbux-scan-prism state="thinking"></orbux-scan-prism>

Component source scan-prism.ts

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

/** Scan Prism: prism geometry driven by the scan motion recipe. */
export const OrbuxScanPrism = defineGeneratedLoader('scan-prism');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-prism': InstanceType<typeof OrbuxScanPrism>;
  }
}

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.