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 5 of 6

Loaders 181-225

Use case
Technology
CSS / SVG 7.5 KB gzip

Columns 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 Columns: columns geometry driven by the spiral motion recipe. */
export const OrbuxSpiralColumns = defineGeneratedLoader('spiral-columns');

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

Filament 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 Filament: filament geometry driven by the spiral motion recipe. */
export const OrbuxSpiralFilament = defineGeneratedLoader('spiral-filament');

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

Glyph 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 Glyph: glyph geometry driven by the spiral motion recipe. */
export const OrbuxSpiralGlyph = defineGeneratedLoader('spiral-glyph');

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

Halo 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 Halo: halo geometry driven by the spiral motion recipe. */
export const OrbuxSpiralHalo = defineGeneratedLoader('spiral-halo');

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

Helix 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 Helix: helix geometry driven by the spiral motion recipe. */
export const OrbuxSpiralHelix = defineGeneratedLoader('spiral-helix');

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

Matrix 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 Matrix: matrix geometry driven by the spiral motion recipe. */
export const OrbuxSpiralMatrix = defineGeneratedLoader('spiral-matrix');

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

Mesh 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 Mesh: mesh geometry driven by the spiral motion recipe. */
export const OrbuxSpiralMesh = defineGeneratedLoader('spiral-mesh');

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

Portal 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 Portal: portal geometry driven by the spiral motion recipe. */
export const OrbuxSpiralPortal = defineGeneratedLoader('spiral-portal');

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

Prism 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 Prism: prism geometry driven by the spiral motion recipe. */
export const OrbuxSpiralPrism = defineGeneratedLoader('spiral-prism');

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

Ripple 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 Ripple: ripple geometry driven by the spiral motion recipe. */
export const OrbuxSpiralRipple = defineGeneratedLoader('spiral-ripple');

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

Satellite 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 Satellite: satellite geometry driven by the spiral motion recipe. */
export const OrbuxSpiralSatellite = defineGeneratedLoader('spiral-satellite');

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

Signal 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 Signal: signal geometry driven by the spiral motion recipe. */
export const OrbuxSpiralSignal = defineGeneratedLoader('spiral-signal');

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

Sonar 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 Sonar: sonar geometry driven by the spiral motion recipe. */
export const OrbuxSpiralSonar = defineGeneratedLoader('spiral-sonar');

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

Tracer 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 Tracer: tracer geometry driven by the spiral motion recipe. */
export const OrbuxSpiralTracer = defineGeneratedLoader('spiral-tracer');

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

Vortex 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 Vortex: vortex geometry driven by the spiral motion recipe. */
export const OrbuxSpiralVortex = defineGeneratedLoader('spiral-vortex');

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

Waveform 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 Waveform: waveform geometry driven by the spiral motion recipe. */
export const OrbuxSpiralWaveform = defineGeneratedLoader('spiral-waveform');

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

Beacon geometry using switch 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';

/** Switch Beacon: beacon geometry driven by the switch motion recipe. */
export const OrbuxSwitchBeacon = defineGeneratedLoader('switch-beacon');

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

Beads geometry using switch 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';

/** Switch Beads: beads geometry driven by the switch motion recipe. */
export const OrbuxSwitchBeads = defineGeneratedLoader('switch-beads');

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

Bloom geometry using switch 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';

/** Switch Bloom: bloom geometry driven by the switch motion recipe. */
export const OrbuxSwitchBloom = defineGeneratedLoader('switch-bloom');

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

Cascade geometry using switch 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';

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

Columns geometry using switch 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';

/** Switch Columns: columns geometry driven by the switch motion recipe. */
export const OrbuxSwitchColumns = defineGeneratedLoader('switch-columns');

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

Filament geometry using switch 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';

/** Switch Filament: filament geometry driven by the switch motion recipe. */
export const OrbuxSwitchFilament = defineGeneratedLoader('switch-filament');

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

Glyph geometry using switch 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';

/** Switch Glyph: glyph geometry driven by the switch motion recipe. */
export const OrbuxSwitchGlyph = defineGeneratedLoader('switch-glyph');

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

Halo geometry using switch 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';

/** Switch Halo: halo geometry driven by the switch motion recipe. */
export const OrbuxSwitchHalo = defineGeneratedLoader('switch-halo');

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

Helix geometry using switch 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';

/** Switch Helix: helix geometry driven by the switch motion recipe. */
export const OrbuxSwitchHelix = defineGeneratedLoader('switch-helix');

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

Matrix geometry using switch 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';

/** Switch Matrix: matrix geometry driven by the switch motion recipe. */
export const OrbuxSwitchMatrix = defineGeneratedLoader('switch-matrix');

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

Mesh geometry using switch 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';

/** Switch Mesh: mesh geometry driven by the switch motion recipe. */
export const OrbuxSwitchMesh = defineGeneratedLoader('switch-mesh');

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

Portal geometry using switch 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';

/** Switch Portal: portal geometry driven by the switch motion recipe. */
export const OrbuxSwitchPortal = defineGeneratedLoader('switch-portal');

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

Prism geometry using switch 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';

/** Switch Prism: prism geometry driven by the switch motion recipe. */
export const OrbuxSwitchPrism = defineGeneratedLoader('switch-prism');

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

Ripple geometry using switch 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';

/** Switch Ripple: ripple geometry driven by the switch motion recipe. */
export const OrbuxSwitchRipple = defineGeneratedLoader('switch-ripple');

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

Satellite geometry using switch 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';

/** Switch Satellite: satellite geometry driven by the switch motion recipe. */
export const OrbuxSwitchSatellite = defineGeneratedLoader('switch-satellite');

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

Signal geometry using switch 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';

/** Switch Signal: signal geometry driven by the switch motion recipe. */
export const OrbuxSwitchSignal = defineGeneratedLoader('switch-signal');

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

Sonar geometry using switch 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';

/** Switch Sonar: sonar geometry driven by the switch motion recipe. */
export const OrbuxSwitchSonar = defineGeneratedLoader('switch-sonar');

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

Tracer geometry using switch 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';

/** Switch Tracer: tracer geometry driven by the switch motion recipe. */
export const OrbuxSwitchTracer = defineGeneratedLoader('switch-tracer');

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

Vortex geometry using switch 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';

/** Switch Vortex: vortex geometry driven by the switch motion recipe. */
export const OrbuxSwitchVortex = defineGeneratedLoader('switch-vortex');

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

Waveform geometry using switch 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';

/** Switch Waveform: waveform geometry driven by the switch motion recipe. */
export const OrbuxSwitchWaveform = defineGeneratedLoader('switch-waveform');

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

Beacon geometry using weave 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';

/** Weave Beacon: beacon geometry driven by the weave motion recipe. */
export const OrbuxWeaveBeacon = defineGeneratedLoader('weave-beacon');

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

Beads geometry using weave 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';

/** Weave Beads: beads geometry driven by the weave motion recipe. */
export const OrbuxWeaveBeads = defineGeneratedLoader('weave-beads');

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

Bloom geometry using weave 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';

/** Weave Bloom: bloom geometry driven by the weave motion recipe. */
export const OrbuxWeaveBloom = defineGeneratedLoader('weave-bloom');

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

Cascade geometry using weave 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';

/** Weave Cascade: cascade geometry driven by the weave motion recipe. */
export const OrbuxWeaveCascade = defineGeneratedLoader('weave-cascade');

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

Columns geometry using weave 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';

/** Weave Columns: columns geometry driven by the weave motion recipe. */
export const OrbuxWeaveColumns = defineGeneratedLoader('weave-columns');

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

Filament geometry using weave 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';

/** Weave Filament: filament geometry driven by the weave motion recipe. */
export const OrbuxWeaveFilament = defineGeneratedLoader('weave-filament');

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

Glyph geometry using weave 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';

/** Weave Glyph: glyph geometry driven by the weave motion recipe. */
export const OrbuxWeaveGlyph = defineGeneratedLoader('weave-glyph');

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

Halo geometry using weave 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';

/** Weave Halo: halo geometry driven by the weave motion recipe. */
export const OrbuxWeaveHalo = defineGeneratedLoader('weave-halo');

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

Helix geometry using weave 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';

/** Weave Helix: helix geometry driven by the weave motion recipe. */
export const OrbuxWeaveHelix = defineGeneratedLoader('weave-helix');

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