OrbUX
All loaders

CSS / SVG · 7.5 KB gzip

Pulse Sonar

Sonar geometry using pulse motion with state-specific transitions.

recipegenerated-recipepulsesonarstate-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/pulse-sonar';

<orbux-pulse-sonar state="thinking"></orbux-pulse-sonar>

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

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

<orbux-pulse-sonar state="thinking"></orbux-pulse-sonar>

Component source pulse-sonar.ts 

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

/** Pulse Sonar: sonar geometry driven by the pulse motion recipe. */
export const OrbuxPulseSonar = defineGeneratedLoader('pulse-sonar');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-pulse-sonar': InstanceType<typeof OrbuxPulseSonar>;
  }
}

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.