loom · terrazzo
@caustics/loom · v2.1.0
svelte · react · vanilla
60fps · 31KB gzipped
$99 →
component · 004
Loom
A live material runtime for the web — token-driven, non-repeating, deterministic.
Checkout coming soon Open the playground → The Everything Bundle →
Quick Start

That's it. Your site now has loom.

npm install @caustics/loom

<script>
  import { Loom } from '@caustics/loom';
</script>

<Loom preset="terrazzo" />
Configuration API

Sensible defaults. Documented types.

Prop Type Default Description
preset string "terrazzo" Named preset. Overrides individual props when set.
colors string[] undefined Override palette. Accepts hex, hsl, or CSS custom properties.
reducedMotion 'pause' | 'static' 'pause' Behavior when prefers-reduced-motion is active.
class string undefined Additional CSS classes applied to the root element.
What's Included

A zip. Everything else lives at caustics.dev.

caustics-loom/
├── svelte/     Loom.svelte · index.ts · types.ts
├── react/      Loom.tsx · index.ts · types.ts
├── vanilla/    loom.ts · compiled .js
├── docs/       README.md · API.md · CHANGELOG.md
├── LICENSE.md  Caustics Commercial License
└── package.json

Loom is a live material runtime for the web — the thing an AI-generated one-off or a static texture library can’t be: embeddable, reproducible from a seed, and on-brand. Eleven procedural surfaces (terrazzo, marble, risograph, woven fabric, a noise field, cast concrete, hammered metal, troweled plaster, wood grain, glazed tile, pebbled leather) render straight to a DOM element from your design tokens. It is static-first: a material is a surface, not an animation, so Loom renders once and then costs zero frames.

The headline is that it’s non-repeating. Seamless isn’t enough — a seamless tile laid across a hero still shows an obvious grid. tiling: 'stochastic' hex-tiles the seamless unit tile with per-tile random rotation and a variance-preserving blend, so a surface of any size holds a fixed feature size with no visible repeat (the autocorrelation at the tile period drops from 1.0 to ~0.02, contrast intact). No web library does this live — and the same algorithm exports as a three.js shader chunk for 3D.

The materials are theme-aware: an OKLab palette LUT accepts --token references and a MutationObserver recolors the surface when your theme flips, so a Loom background tracks your design tokens instead of hard-coded hex. Any surface can carry story layers — grime, patina, wear that follows the geometry via curvature and occlusion masks, shown live and exported byte-identically.

Beyond the live render, Loom is a verified producer. bake() writes a tileable PNG/WebP; exportPBR() returns a correct map set with true 16-bit height; and exportFor('unity-urp' | 'unreal' | 'godot' | 'three.js') packs the maps to each engine’s own conventions — Unity gets the inverted metallic-smoothness map it actually wants, Unreal a DirectX normal — with a wired .glb, MaterialX, and KTX2 alongside. Every claim is held by a standing 17 CPU + 172 GPU-gate verification harness. Thirty-two presets, deterministic seeds, a graceful 2D fallback, context-loss recovery, and Svelte 5 / React 18+ / vanilla through one mount().

Ready to ship?

Checkout coming soon The Everything Bundle

Caustics Commercial License · lifetime updates within v1