Complete catalog

236 ways to communicate progress.

Handcrafted signatures and staples first, then 200 structural recipes built from twenty visual forms and ten motion topologies. Color, size, speed, and state stay as controls, not catalog variants.

Page 4 of 6

Loaders 136-180

Use case
Technology
CSS / SVG 7.5 KB gzip

Waveform geometry using pulse motion with state-specific transitions.

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

/** Pulse Waveform: waveform geometry driven by the pulse motion recipe. */
export const OrbuxPulseWaveform = defineGeneratedLoader('pulse-waveform');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-pulse-waveform': InstanceType<typeof OrbuxPulseWaveform>;
  }
}
CSS / SVG 7.5 KB gzip

Beacon geometry using scan motion with state-specific transitions.

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

/** Scan Beacon: beacon geometry driven by the scan motion recipe. */
export const OrbuxScanBeacon = defineGeneratedLoader('scan-beacon');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-beacon': InstanceType<typeof OrbuxScanBeacon>;
  }
}
CSS / SVG 7.5 KB gzip

Beads geometry using scan motion with state-specific transitions.

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

/** Scan Beads: beads geometry driven by the scan motion recipe. */
export const OrbuxScanBeads = defineGeneratedLoader('scan-beads');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-beads': InstanceType<typeof OrbuxScanBeads>;
  }
}
CSS / SVG 7.5 KB gzip

Bloom geometry using scan motion with state-specific transitions.

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

/** Scan Bloom: bloom geometry driven by the scan motion recipe. */
export const OrbuxScanBloom = defineGeneratedLoader('scan-bloom');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-bloom': InstanceType<typeof OrbuxScanBloom>;
  }
}
CSS / SVG 7.5 KB gzip

Cascade geometry using scan motion with state-specific transitions.

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

/** Scan Cascade: cascade geometry driven by the scan motion recipe. */
export const OrbuxScanCascade = defineGeneratedLoader('scan-cascade');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-cascade': InstanceType<typeof OrbuxScanCascade>;
  }
}
CSS / SVG 7.5 KB gzip

Columns geometry using scan motion with state-specific transitions.

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

/** Scan Columns: columns geometry driven by the scan motion recipe. */
export const OrbuxScanColumns = defineGeneratedLoader('scan-columns');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-columns': InstanceType<typeof OrbuxScanColumns>;
  }
}
CSS / SVG 7.5 KB gzip

Filament geometry using scan motion with state-specific transitions.

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

/** Scan Filament: filament geometry driven by the scan motion recipe. */
export const OrbuxScanFilament = defineGeneratedLoader('scan-filament');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-filament': InstanceType<typeof OrbuxScanFilament>;
  }
}
CSS / SVG 7.5 KB gzip

Glyph geometry using scan motion with state-specific transitions.

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

/** Scan Glyph: glyph geometry driven by the scan motion recipe. */
export const OrbuxScanGlyph = defineGeneratedLoader('scan-glyph');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-glyph': InstanceType<typeof OrbuxScanGlyph>;
  }
}
CSS / SVG 7.5 KB gzip

Halo geometry using scan motion with state-specific transitions.

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

/** Scan Halo: halo geometry driven by the scan motion recipe. */
export const OrbuxScanHalo = defineGeneratedLoader('scan-halo');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-halo': InstanceType<typeof OrbuxScanHalo>;
  }
}
CSS / SVG 7.5 KB gzip

Helix geometry using scan motion with state-specific transitions.

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

/** Scan Helix: helix geometry driven by the scan motion recipe. */
export const OrbuxScanHelix = defineGeneratedLoader('scan-helix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-helix': InstanceType<typeof OrbuxScanHelix>;
  }
}
CSS / SVG 7.5 KB gzip

Matrix geometry using scan motion with state-specific transitions.

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

/** Scan Matrix: matrix geometry driven by the scan motion recipe. */
export const OrbuxScanMatrix = defineGeneratedLoader('scan-matrix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-matrix': InstanceType<typeof OrbuxScanMatrix>;
  }
}
CSS / SVG 7.5 KB gzip

Mesh geometry using scan motion with state-specific transitions.

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

/** Scan Mesh: mesh geometry driven by the scan motion recipe. */
export const OrbuxScanMesh = defineGeneratedLoader('scan-mesh');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-mesh': InstanceType<typeof OrbuxScanMesh>;
  }
}
CSS / SVG 7.5 KB gzip

Portal geometry using scan motion with state-specific transitions.

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

/** Scan Portal: portal geometry driven by the scan motion recipe. */
export const OrbuxScanPortal = defineGeneratedLoader('scan-portal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-portal': InstanceType<typeof OrbuxScanPortal>;
  }
}
CSS / SVG 7.5 KB gzip

Prism geometry using scan motion with state-specific transitions.

View details HTML
// 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>;
  }
}
CSS / SVG 7.5 KB gzip

Ripple geometry using scan motion with state-specific transitions.

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

/** Scan Ripple: ripple geometry driven by the scan motion recipe. */
export const OrbuxScanRipple = defineGeneratedLoader('scan-ripple');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-ripple': InstanceType<typeof OrbuxScanRipple>;
  }
}
CSS / SVG 7.5 KB gzip

Satellite geometry using scan motion with state-specific transitions.

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

/** Scan Satellite: satellite geometry driven by the scan motion recipe. */
export const OrbuxScanSatellite = defineGeneratedLoader('scan-satellite');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-satellite': InstanceType<typeof OrbuxScanSatellite>;
  }
}
CSS / SVG 7.5 KB gzip

Signal geometry using scan motion with state-specific transitions.

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

/** Scan Signal: signal geometry driven by the scan motion recipe. */
export const OrbuxScanSignal = defineGeneratedLoader('scan-signal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-signal': InstanceType<typeof OrbuxScanSignal>;
  }
}
CSS / SVG 7.5 KB gzip

Sonar geometry using scan motion with state-specific transitions.

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

/** Scan Sonar: sonar geometry driven by the scan motion recipe. */
export const OrbuxScanSonar = defineGeneratedLoader('scan-sonar');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-sonar': InstanceType<typeof OrbuxScanSonar>;
  }
}
CSS / SVG 7.5 KB gzip

Tracer geometry using scan motion with state-specific transitions.

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

/** Scan Tracer: tracer geometry driven by the scan motion recipe. */
export const OrbuxScanTracer = defineGeneratedLoader('scan-tracer');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-tracer': InstanceType<typeof OrbuxScanTracer>;
  }
}
CSS / SVG 7.5 KB gzip

Vortex geometry using scan motion with state-specific transitions.

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

/** Scan Vortex: vortex geometry driven by the scan motion recipe. */
export const OrbuxScanVortex = defineGeneratedLoader('scan-vortex');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-vortex': InstanceType<typeof OrbuxScanVortex>;
  }
}
CSS / SVG 7.5 KB gzip

Waveform geometry using scan motion with state-specific transitions.

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

/** Scan Waveform: waveform geometry driven by the scan motion recipe. */
export const OrbuxScanWaveform = defineGeneratedLoader('scan-waveform');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-scan-waveform': InstanceType<typeof OrbuxScanWaveform>;
  }
}
CSS / SVG 7.5 KB gzip

Beacon geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Beacon: beacon geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleBeacon = defineGeneratedLoader('shuffle-beacon');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-beacon': InstanceType<typeof OrbuxShuffleBeacon>;
  }
}
CSS / SVG 7.5 KB gzip

Beads geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Beads: beads geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleBeads = defineGeneratedLoader('shuffle-beads');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-beads': InstanceType<typeof OrbuxShuffleBeads>;
  }
}
CSS / SVG 7.5 KB gzip

Bloom geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Bloom: bloom geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleBloom = defineGeneratedLoader('shuffle-bloom');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-bloom': InstanceType<typeof OrbuxShuffleBloom>;
  }
}
CSS / SVG 7.5 KB gzip

Cascade geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Cascade: cascade geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleCascade = defineGeneratedLoader('shuffle-cascade');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-cascade': InstanceType<typeof OrbuxShuffleCascade>;
  }
}
CSS / SVG 7.5 KB gzip

Columns geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Columns: columns geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleColumns = defineGeneratedLoader('shuffle-columns');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-columns': InstanceType<typeof OrbuxShuffleColumns>;
  }
}
CSS / SVG 7.5 KB gzip

Filament geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Filament: filament geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleFilament = defineGeneratedLoader('shuffle-filament');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-filament': InstanceType<typeof OrbuxShuffleFilament>;
  }
}
CSS / SVG 7.5 KB gzip

Glyph geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Glyph: glyph geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleGlyph = defineGeneratedLoader('shuffle-glyph');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-glyph': InstanceType<typeof OrbuxShuffleGlyph>;
  }
}
CSS / SVG 7.5 KB gzip

Halo geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Halo: halo geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleHalo = defineGeneratedLoader('shuffle-halo');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-halo': InstanceType<typeof OrbuxShuffleHalo>;
  }
}
CSS / SVG 7.5 KB gzip

Helix geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Helix: helix geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleHelix = defineGeneratedLoader('shuffle-helix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-helix': InstanceType<typeof OrbuxShuffleHelix>;
  }
}
CSS / SVG 7.5 KB gzip

Matrix geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Matrix: matrix geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleMatrix = defineGeneratedLoader('shuffle-matrix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-matrix': InstanceType<typeof OrbuxShuffleMatrix>;
  }
}
CSS / SVG 7.5 KB gzip

Mesh geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Mesh: mesh geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleMesh = defineGeneratedLoader('shuffle-mesh');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-mesh': InstanceType<typeof OrbuxShuffleMesh>;
  }
}
CSS / SVG 7.5 KB gzip

Portal geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Portal: portal geometry driven by the shuffle motion recipe. */
export const OrbuxShufflePortal = defineGeneratedLoader('shuffle-portal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-portal': InstanceType<typeof OrbuxShufflePortal>;
  }
}
CSS / SVG 7.5 KB gzip

Prism geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Prism: prism geometry driven by the shuffle motion recipe. */
export const OrbuxShufflePrism = defineGeneratedLoader('shuffle-prism');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-prism': InstanceType<typeof OrbuxShufflePrism>;
  }
}
CSS / SVG 7.5 KB gzip

Ripple geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Ripple: ripple geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleRipple = defineGeneratedLoader('shuffle-ripple');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-ripple': InstanceType<typeof OrbuxShuffleRipple>;
  }
}
CSS / SVG 7.5 KB gzip

Satellite geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Satellite: satellite geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleSatellite = defineGeneratedLoader('shuffle-satellite');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-satellite': InstanceType<typeof OrbuxShuffleSatellite>;
  }
}
CSS / SVG 7.5 KB gzip

Signal geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Signal: signal geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleSignal = defineGeneratedLoader('shuffle-signal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-signal': InstanceType<typeof OrbuxShuffleSignal>;
  }
}
CSS / SVG 7.5 KB gzip

Sonar geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Sonar: sonar geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleSonar = defineGeneratedLoader('shuffle-sonar');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-sonar': InstanceType<typeof OrbuxShuffleSonar>;
  }
}
CSS / SVG 7.5 KB gzip

Tracer geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Tracer: tracer geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleTracer = defineGeneratedLoader('shuffle-tracer');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-tracer': InstanceType<typeof OrbuxShuffleTracer>;
  }
}
CSS / SVG 7.5 KB gzip

Vortex geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Vortex: vortex geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleVortex = defineGeneratedLoader('shuffle-vortex');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-vortex': InstanceType<typeof OrbuxShuffleVortex>;
  }
}
CSS / SVG 7.5 KB gzip

Waveform geometry using shuffle motion with state-specific transitions.

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

/** Shuffle Waveform: waveform geometry driven by the shuffle motion recipe. */
export const OrbuxShuffleWaveform = defineGeneratedLoader('shuffle-waveform');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-shuffle-waveform': InstanceType<typeof OrbuxShuffleWaveform>;
  }
}
CSS / SVG 7.5 KB gzip

Beacon geometry using spiral motion with state-specific transitions.

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

/** Spiral Beacon: beacon geometry driven by the spiral motion recipe. */
export const OrbuxSpiralBeacon = defineGeneratedLoader('spiral-beacon');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-spiral-beacon': InstanceType<typeof OrbuxSpiralBeacon>;
  }
}
CSS / SVG 7.5 KB gzip

Beads geometry using spiral motion with state-specific transitions.

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

/** Spiral Beads: beads geometry driven by the spiral motion recipe. */
export const OrbuxSpiralBeads = defineGeneratedLoader('spiral-beads');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-spiral-beads': InstanceType<typeof OrbuxSpiralBeads>;
  }
}
CSS / SVG 7.5 KB gzip

Bloom geometry using spiral motion with state-specific transitions.

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

/** Spiral Bloom: bloom geometry driven by the spiral motion recipe. */
export const OrbuxSpiralBloom = defineGeneratedLoader('spiral-bloom');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-spiral-bloom': InstanceType<typeof OrbuxSpiralBloom>;
  }
}
CSS / SVG 7.5 KB gzip

Cascade geometry using spiral motion with state-specific transitions.

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

/** Spiral Cascade: cascade geometry driven by the spiral motion recipe. */
export const OrbuxSpiralCascade = defineGeneratedLoader('spiral-cascade');

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