OrbUX
All loaders

CSS / SVG · 7.5 KB gzip

Drift Helix

Helix geometry using drift motion with state-specific transitions.

recipegenerated-recipedrifthelixstate-aware
Download HTML Download JS
Interactive preview

Usage

Download HTML

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

npm install @vikast908/loaders@0.2.0 @vikast908/core@0.2.0
import '@vikast908/loaders/drift-helix';

<orbux-drift-helix state="thinking"></orbux-drift-helix>

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

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

<orbux-drift-helix state="thinking"></orbux-drift-helix>

Component source drift-helix.ts 

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

/** Drift Helix: helix geometry driven by the drift motion recipe. */
export const OrbuxDriftHelix = defineGeneratedLoader('drift-helix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-helix': InstanceType<typeof OrbuxDriftHelix>;
  }
}

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.