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

Loaders 46-90

Use case
Technology
CSS / SVG 7.5 KB gzip

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

/** Drift Matrix: matrix geometry driven by the drift motion recipe. */
export const OrbuxDriftMatrix = defineGeneratedLoader('drift-matrix');

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

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

/** Drift Mesh: mesh geometry driven by the drift motion recipe. */
export const OrbuxDriftMesh = defineGeneratedLoader('drift-mesh');

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

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

/** Drift Portal: portal geometry driven by the drift motion recipe. */
export const OrbuxDriftPortal = defineGeneratedLoader('drift-portal');

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

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

/** Drift Prism: prism geometry driven by the drift motion recipe. */
export const OrbuxDriftPrism = defineGeneratedLoader('drift-prism');

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

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

/** Drift Ripple: ripple geometry driven by the drift motion recipe. */
export const OrbuxDriftRipple = defineGeneratedLoader('drift-ripple');

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

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

/** Drift Satellite: satellite geometry driven by the drift motion recipe. */
export const OrbuxDriftSatellite = defineGeneratedLoader('drift-satellite');

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

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

/** Drift Signal: signal geometry driven by the drift motion recipe. */
export const OrbuxDriftSignal = defineGeneratedLoader('drift-signal');

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

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

/** Drift Sonar: sonar geometry driven by the drift motion recipe. */
export const OrbuxDriftSonar = defineGeneratedLoader('drift-sonar');

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

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

/** Drift Tracer: tracer geometry driven by the drift motion recipe. */
export const OrbuxDriftTracer = defineGeneratedLoader('drift-tracer');

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

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

/** Drift Vortex: vortex geometry driven by the drift motion recipe. */
export const OrbuxDriftVortex = defineGeneratedLoader('drift-vortex');

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

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

/** Drift Waveform: waveform geometry driven by the drift motion recipe. */
export const OrbuxDriftWaveform = defineGeneratedLoader('drift-waveform');

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

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

/** Fold Beacon: beacon geometry driven by the fold motion recipe. */
export const OrbuxFoldBeacon = defineGeneratedLoader('fold-beacon');

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

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

/** Fold Beads: beads geometry driven by the fold motion recipe. */
export const OrbuxFoldBeads = defineGeneratedLoader('fold-beads');

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

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

/** Fold Bloom: bloom geometry driven by the fold motion recipe. */
export const OrbuxFoldBloom = defineGeneratedLoader('fold-bloom');

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

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

/** Fold Cascade: cascade geometry driven by the fold motion recipe. */
export const OrbuxFoldCascade = defineGeneratedLoader('fold-cascade');

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

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

/** Fold Columns: columns geometry driven by the fold motion recipe. */
export const OrbuxFoldColumns = defineGeneratedLoader('fold-columns');

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

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

/** Fold Filament: filament geometry driven by the fold motion recipe. */
export const OrbuxFoldFilament = defineGeneratedLoader('fold-filament');

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

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

/** Fold Glyph: glyph geometry driven by the fold motion recipe. */
export const OrbuxFoldGlyph = defineGeneratedLoader('fold-glyph');

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

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

/** Fold Halo: halo geometry driven by the fold motion recipe. */
export const OrbuxFoldHalo = defineGeneratedLoader('fold-halo');

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

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

/** Fold Helix: helix geometry driven by the fold motion recipe. */
export const OrbuxFoldHelix = defineGeneratedLoader('fold-helix');

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

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

/** Fold Matrix: matrix geometry driven by the fold motion recipe. */
export const OrbuxFoldMatrix = defineGeneratedLoader('fold-matrix');

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

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

/** Fold Mesh: mesh geometry driven by the fold motion recipe. */
export const OrbuxFoldMesh = defineGeneratedLoader('fold-mesh');

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

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

/** Fold Portal: portal geometry driven by the fold motion recipe. */
export const OrbuxFoldPortal = defineGeneratedLoader('fold-portal');

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

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

/** Fold Prism: prism geometry driven by the fold motion recipe. */
export const OrbuxFoldPrism = defineGeneratedLoader('fold-prism');

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

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

/** Fold Ripple: ripple geometry driven by the fold motion recipe. */
export const OrbuxFoldRipple = defineGeneratedLoader('fold-ripple');

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

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

/** Fold Satellite: satellite geometry driven by the fold motion recipe. */
export const OrbuxFoldSatellite = defineGeneratedLoader('fold-satellite');

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

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

/** Fold Signal: signal geometry driven by the fold motion recipe. */
export const OrbuxFoldSignal = defineGeneratedLoader('fold-signal');

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

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

/** Fold Sonar: sonar geometry driven by the fold motion recipe. */
export const OrbuxFoldSonar = defineGeneratedLoader('fold-sonar');

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

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

/** Fold Tracer: tracer geometry driven by the fold motion recipe. */
export const OrbuxFoldTracer = defineGeneratedLoader('fold-tracer');

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

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

/** Fold Vortex: vortex geometry driven by the fold motion recipe. */
export const OrbuxFoldVortex = defineGeneratedLoader('fold-vortex');

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

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

/** Fold Waveform: waveform geometry driven by the fold motion recipe. */
export const OrbuxFoldWaveform = defineGeneratedLoader('fold-waveform');

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

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

/** March Beacon: beacon geometry driven by the march motion recipe. */
export const OrbuxMarchBeacon = defineGeneratedLoader('march-beacon');

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

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

/** March Beads: beads geometry driven by the march motion recipe. */
export const OrbuxMarchBeads = defineGeneratedLoader('march-beads');

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

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

/** March Bloom: bloom geometry driven by the march motion recipe. */
export const OrbuxMarchBloom = defineGeneratedLoader('march-bloom');

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

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

/** March Cascade: cascade geometry driven by the march motion recipe. */
export const OrbuxMarchCascade = defineGeneratedLoader('march-cascade');

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

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

/** March Columns: columns geometry driven by the march motion recipe. */
export const OrbuxMarchColumns = defineGeneratedLoader('march-columns');

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

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

/** March Filament: filament geometry driven by the march motion recipe. */
export const OrbuxMarchFilament = defineGeneratedLoader('march-filament');

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

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

/** March Glyph: glyph geometry driven by the march motion recipe. */
export const OrbuxMarchGlyph = defineGeneratedLoader('march-glyph');

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

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

/** March Halo: halo geometry driven by the march motion recipe. */
export const OrbuxMarchHalo = defineGeneratedLoader('march-halo');

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

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

/** March Helix: helix geometry driven by the march motion recipe. */
export const OrbuxMarchHelix = defineGeneratedLoader('march-helix');

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

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

/** March Matrix: matrix geometry driven by the march motion recipe. */
export const OrbuxMarchMatrix = defineGeneratedLoader('march-matrix');

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

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

/** March Mesh: mesh geometry driven by the march motion recipe. */
export const OrbuxMarchMesh = defineGeneratedLoader('march-mesh');

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

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

/** March Portal: portal geometry driven by the march motion recipe. */
export const OrbuxMarchPortal = defineGeneratedLoader('march-portal');

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

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

/** March Prism: prism geometry driven by the march motion recipe. */
export const OrbuxMarchPrism = defineGeneratedLoader('march-prism');

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

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

/** March Ripple: ripple geometry driven by the march motion recipe. */
export const OrbuxMarchRipple = defineGeneratedLoader('march-ripple');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-march-ripple': InstanceType<typeof OrbuxMarchRipple>;
  }
}