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

Loaders 226-236

Use case
Technology
CSS / SVG 7.5 KB gzip

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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