Uncommon web

dithercnDithered globe hero

A Bayer dither engine plus examples, installed via the shadcn registry

dithercn draws every surface as ordered-dither cells tied to your shadcn theme tokens, so a globe, an aurora shader and a headline fill all share one pixel grid and palette. The components install as plain source into your project, so you edit them like your own code instead of configuring a black-box package.

<Aurora className="absolute inset-x-0 top-0 -z-20 h-[62%]"
  color="green" tipColor="purple" curtains={4} direction="down" mask="bottom" />
<DitherGlobe
  markers={[SF, NYC, LDN, FRA, SGP, TYO, SYD, GRU].map((at) => ({ at }))}
  arcs={[{ from: SF, to: LDN }, { from: NYC, to: FRA, color: "green" }]}
  start={-30} tilt={28} speed={5} cell={3} matrix="bayer4" />
<DitherText as="h1" fill="gradient" direction="down" to={0.45}>
  Ship to every edge at once.
</DitherText>

dithercnDithered ops dashboard

A Bayer dither engine plus examples, installed via the shadcn registry

The chart and interface examples render as plain SVG built from whole dither cells, snapped to device pixels, so bars, gauges and heatmap squares step through crisp Bayer densities rather than opacity. Each chart keeps a hidden data table and keyboard scrubbing, so the 1-bit look does not cost accessibility.

<StatCard label="p95 latency" value="182 ms" delta={6.1} good="down"
  trend={[150, 158, 149, 166, 171, 169, 182]} color="red" fill="hatched" bloom="low" />
<Gauge value={load} label="fleet CPU" unit="%" variant="dial"
  color={hot ? "red" : "blue"} fill={hot ? "hatched" : "gradient"} />
<BarChart data={weeks} x="week" layout="stacked" colors={["orange", "pink"]}
  series={[{ label: "Deploys", value: "deploys" }, { label: "Rollbacks", value: "rollbacks" }]} />
<Heatmap mode="matrix" data={pushes} rows={DAYS} columns={HOURS} steps={5} color="purple" />

Paper ShadersLive dithering shader

Zero-dependency WebGL shaders for React or vanilla JS

Paper's Dithering shader runs 2-colour ordered or random dithering over seven animated sources (sphere, warp, swirl, ripple...) entirely on the GPU in one small fragment shader. Every parameter is a prop, so matrix size, pixel size and ink colour can change live without remounting the canvas.

<Dithering
  colorBack={c.back}
  colorFront={c.front}
  shape={shape}      // "sphere" | "warp" | "simplex" | "swirl" | ...
  type={type}        // "random" | "2x2" | "4x4" | "8x8"
  size={size}
  speed={1}
  offsetX={off.x + baseX}
  offsetY={off.y + baseY}
/>

Paper ShadersSignature shader gallery

Zero-dependency WebGL shaders for React or vanilla JS

Each shader ships with named design presets (mesh gradients, grain, warp, metaballs, god rays, voronoi), so a whole art-directed background is one component spread with a preset's params. The same shaders can be designed in the Paper editor and exported as code.

const SHADERS = [
  { name: "Mesh Gradient", C: MeshGradient, presets: meshGradientPresets },
  { name: "Grain Gradient", C: GrainGradient, presets: grainGradientPresets },
  { name: "Metaballs", C: Metaballs, presets: metaballsPresets },
  { name: "God Rays", C: GodRays, presets: godRaysPresets },
];
const { C } = SHADERS[i];
<C key={i + ":" + p} className="shader" {...preset.params} />

three.js AsciiEffectLive 3D as ASCII

three.js add-on that renders any WebGL scene as text

AsciiEffect samples the WebGL frame each tick and rewrites it as a grid of real DOM characters, so the output is selectable text you can tint, glow and style with CSS. Swapping the character ramp changes the look completely, from classic terminal to Unicode shade blocks.

import { AsciiEffect } from "three/examples/jsm/effects/AsciiEffect.js";

const CHARSETS = { classic: " .:-=+*#%@", blocks: " ░▒▓█", binary: " 01" };
effect = new AsciiEffect(renderer, CHARSETS[charsetName], { invert: true, resolution: res });
stage.prepend(effect.domElement);
effect.setSize(w, h);
// every frame
effect.render(scene, camera);

pixi-filtersCRT filter rack

Community WebGL filter collection for PixiJS v8

pixi-filters bundles dozens of stackable post-process shaders (CRT, RGB split, glitch, pixelate, ASCII, old film, bloom) that attach to any PixiJS container as a plain filters array. Order in the array is the order of the effect chain, so you can build a CRT pipeline in a few lines.

const crt = new CRTFilter({ curvature: 4, lineWidth: 2.2, lineContrast: 0.35, noise: 0.12, noiseSize: 1.2, vignetting: 0.32 });
const rgb = new RGBSplitFilter({ red: [-3, 0], green: [0, 1], blue: [3, 0] });
const glitch = new GlitchFilter({ slices: 12, offset: 40, fillMode: 2, average: false });
const ascii = new AsciiFilter({ size: 9, color: "#7dffcf", replaceColor: false });
// order matters: pixel/ascii first (they quantise), CRT last (it curves the result)
const ORDER = ["pixel", "ascii", "film", "bloom", "glitch", "rgb", "crt"];
const on = ORDER.map((id) => RACK.find((r) => r.id === id)).filter((r) => r.on).map((r) => r.f);
app.stage.filters = on.length ? on : null;

postprocessingPixel, ASCII & halftone diorama

pmndrs post-processing effect library for three.js

postprocessing merges multiple effects into a single fullscreen shader pass, which keeps a stack of bloom, vignette and stylising effects cheap. Its PixelationEffect, ASCIIEffect and DotScreenEffect turn any three.js scene into pixel art, glyphs or print halftone with one constructor.

composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, bloom, vignette));
const asciiTexture = new ASCIITexture({ characters: " .:-+*=%@#", font: "Space Mono", fontSize: 54, size: 1024, cellCount: 16 });
const MODES = {
  pixel: { make: (v) => new PixelationEffect(v), set: (e, v) => (e.granularity = v) },
  ascii: { make: (v) => new ASCIIEffect({ asciiTexture, cellSize: v, color: null }), set: (e, v) => (e.cellSize = v) },
  halftone: { make: (v) => new DotScreenEffect({ angle: Math.PI * 0.25, scale: v }), set: (e, v) => (e.scale = v) },
};
effect = MODES[mode].make(amount);
composer.addPass(new EffectPass(camera, effect));

Paper ShadersLiquid metal logo

Zero-dependency WebGL shaders shipped as React components

LiquidMetal, Heatmap and GemSmoke take any SVG or PNG logo and turn its silhouette into animated chrome, thermal glow or smoke; the shape is pre-processed into a distance field in the browser. Pointer position drives the shaders' angle prop, so the reflections follow the cursor.

{ name: "Chrome", params: { ...pick(liquidMetalPresets, "Default"),
    colorBack: "#0b0b0c", colorTint: "#ffffff", repetition: 2.4, contour: 0.5 } },

// pointer x → the shader's flow angle (20°..160°)
pointer.current = 20 + (x + 0.5) * 140;

<C key={m.id} className="shader" {...l.params} image={mark}
   angle={angle} scale={0.62} offsetY={0.06} fit="contain" />

Paper ShadersSeven live image filters

Design-tool-grade image filters as single React components

FlutedGlass, Water, HalftoneCmyk, HalftoneDots, PaperTexture, LensDistortion and ImageDithering each take an image prop and run in one fragment shader, with no canvas code to write. Every slider maps to a real prop, and holding the button shows the untouched Vermeer underneath.

{
  id: "fluted", name: "Fluted Glass", C: FlutedGlass,
  base: { ...pick(flutedGlassPresets, "Default"), shadows: 0.35, highlights: 0.15, edges: 0.4 },
  sliders: [
    { key: "size", label: "rib size", min: 0.05, max: 1, step: 0.01, value: 0.42 },
    { key: "distortion", label: "distortion", min: 0, max: 1, step: 0.01, value: 0.6 },
  ],
},
// …Water, HalftoneCmyk, HalftoneDots, PaperTexture, LensDistortion, ImageDithering
<C key={f.id} className="shader" {...f.base} {...v} image={portrait} fit="cover" maxPixelCount={2560 * 1600} />

Paper ShadersAI prompt state border

Animated shader glows you can drop around any UI element

PulsingBorder draws a soft, smoky light along a rounded rectangle. Here it frames a chat composer and switches props between idle, generating and done states. Because colors, pulse, bloom and smoke are plain props, React state can drive the border directly.

const STATES = {
  idle: { speed: 0.45, intensity: 0.12, bloom: 0.2, pulse: 0.08, smoke: 0.18, spots: 3, spotSize: 0.35, colors: ["#2b5cff", "#7a3cff", "#00c2ff"] },
  generating: { speed: 1.5, intensity: 0.42, bloom: 0.5, pulse: 0.5, smoke: 0.55, spots: 4, spotSize: 0.55, colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc", "#ffb800"] },
  done: { speed: 0.3, intensity: 0.1, bloom: 0.25, pulse: 0, smoke: 0.12, spots: 2, spotSize: 0.5, colors: ["#19d38a", "#0dc1fd"] },
};
const st = STATES[status];

<PulsingBorder colorBack="#00000000" {...st}
  thickness={0.06} softness={0.85} aspectRatio="auto" smokeSize={0.6} />

Paper ShadersGod-rays landing hero

Cinematic shader backgrounds configured entirely through props

GodRays and SmokeRing make a full-bleed hero background with no video files, and each scene is about ten props. The light source leans toward the pointer, and the presets switch between warm volumetric rays, an eclipse ring and teal light.

id: "dawn", label: "Dawn", C: GodRays,
params: {
  colorBack: "#07070a", colorBloom: "#ff7a2f",
  colors: ["#ffb35c99", "#ff5e3ad0", "#fff1d6", "#ff9a3c66"],
  density: 0.32, spotty: 0.28, midIntensity: 0.55, midSize: 0.22, intensity: 0.8, bloom: 0.5, speed: 0.6,
  offsetY: -0.62,
},
// the light source leans toward the pointer
<C key={s.id} className="shader" {...p}
   offsetX={(p.offsetX ?? 0) + nudge.x} offsetY={(p.offsetY ?? 0) + nudge.y} />

Paper ShadersGenerative album covers

Seedable pattern shaders for generative graphic design

A seeded RNG picks one of seven pattern shaders (Waves, Swirl, Spiral, Voronoi, NeuroNoise, PerlinNoise, SimplexNoise), a palette and props to make a print-style record sleeve. The props are shown as code, and the poster can stay animated or freeze on a frame.

{ name: "Waves", C: Waves, make: (r, p) => ({ colorBack: p[0], colorFront: p[1],
    shape: range(r, 0, 3), frequency: range(r, 0.2, 0.6), amplitude: range(r, 0.25, 1),
    spacing: range(r, 1, 1.5), proportion: range(r, 0.15, 0.7), softness: 0,
    rotation: Math.floor(range(r, 0, 180)), scale: range(r, 0.5, 2.2) }) },

const r = rng(seed);
const kind = pickFrom(r, KINDS);
const params = round(kind.make(r, pal.c));

<C key={cover.seed} className="art" {...cover.params} speed={speed} frame={(cover.seed % 997) * 37} />

Paper ShadersShader loading states

Tiny WebGL canvases that work as spinners and status icons

Eight shaders (Metaballs, ColorPanels, Voronoi, DotOrbit, PulsingBorder, SmokeRing, Spiral, Swirl) run at icon size as activity indicators, alongside a SimplexNoise progress bar. Speed is a prop, so hovering a tile speeds it up and clicking it marks the task complete.

{ id: "think", label: "Thinking", sub: "reasoning · 14 steps", C: Metaballs, shape: "round",
  params: { colorBack: "#0f0f12", colors: ["#7c3cff", "#ff5a1f", "#ffc105", "#f585ff"], count: 7, size: 0.78, speed: 1.1, scale: 1.05 } },
{ id: "index", label: "Indexing", sub: "38,201 documents", C: Voronoi, shape: "square",
  params: { colors: ["#ffffff"], stepsPerColor: 1, colorGlow: "#7fe3ff", colorGap: "#07161c", distortion: 0.45, gap: 0.05, glow: 0.8, scale: 0.42, speed: 0.6 } },

// hover speeds a tile up, click freezes it as "done"
<C className="sh" {...t.params} speed={done ? 0 : hot ? base * 2.5 : base} />

Paper ShadersVanilla ShaderMount uniforms

Framework-free core: raw fragment shaders plus a tiny mount class

The React package wraps @paper-design/shaders, which works without a framework: new ShaderMount(el, fragmentShader, uniforms) and setUniforms(). Here the pointer drives the static radial gradient's focal point as a lit sphere, flinging the pointer adds ripples, and a live readout shows every uniform as it changes.

const orb = new ShaderMount(orbEl, staticRadialGradientFragmentShader, {
  ...paletteUniforms(PALETTES[pal]),
  u_radius: 0.8, u_focalDistance: 0.6, u_focalAngle: 0, u_falloff: 0.24, u_mixing: 0.55,
  u_distortion: 0, u_distortionShift: 0, u_distortionFreq: 12, u_grainMixer: 0.15, u_grainOverlay: 0.12,
  ...sizing(),
}, undefined, 0);

const u = {
  u_focalAngle: cur.angle, u_focalDistance: cur.dist,
  u_distortion: cur.ripple, u_distortionShift: cur.shift, u_distortionFreq: Math.round(cur.freq),
};
orb.setUniforms(u);

PretextWalden flows around the moon

DOM-free multiline text measurement and layout in pure TypeScript

Pretext measures and line-breaks text without touching the DOM, so you can re-layout a paragraph against arbitrary shapes every frame. Here two justified columns of Walden are re-broken around a draggable moon (and its own label) on each animation frame, using a per-row width and a shared cursor across columns, in well under 2 ms.

prepared = prepareWithSegments(WALDEN, `400 ${fs}px "Fraunces Variable"`); // once per font

// every frame: each row gets its own corridor(s) around the moon
for (const [a, b] of spans) {
  const avail = b - a;
  let range = layoutNextLineRange(prepared, avail, cursor);
  if (!range) { cursor = undefined; range = layoutNextLineRange(prepared, avail, cursor); }
  const line = materializeLineRange(prepared, range);
  drawLine(line.text, a, y + fs * 1.05, avail, range.width > avail * 0.72, near);
  cursor = range.end;
}

PretextShrink-wrapped glyph swarm

DOM-free multiline text measurement and layout in pure TypeScript

Because Pretext returns line breaks and widths without rendering, every grapheme can become a physics particle that knows exactly where it belongs. Quotes are laid out with layoutWithLines, framed by the tightest shrink-wrap width from measureLineStats, then morph letter by letter into the next quote.

const fontFor = size => `italic 400 ${size}px "Instrument Serif"`;

prepared = prepareWithSegments(text, fontFor(size));
({ lines } = layoutWithLines(prepared, maxW, lh));
const stats = measureLineStats(prepared, maxW); // widest line = shrink-wrapped width

lines.forEach((line, li) => {
  const x0 = (W - line.width) / 2;
  for (const { segment } of seg.segment(line.text)) { /* one spring particle per grapheme */ }
});

GSAP SplitTextSplit, mask, scramble

GSAP plugins that split text into animatable lines, words, chars

SplitText wraps lines, words and characters in elements (with optional line masks and auto re-split on resize), and ScrambleText decodes strings through random glyphs. Four click-through choreographies (rise, flip, scatter, decode) share one split; hovering a word makes it jump and re-decode.

gsap.registerPlugin(SplitText, ScrambleTextPlugin);

SplitText.create(h1, {
  type: 'lines,words,chars', mask: 'lines', autoSplit: true,
  onSplit: self => gsap.from(self.chars, {
    yPercent: 115, rotate: 8, duration: 0.9, ease: 'expo.out', stagger: 0.022,
  }),
});

gsap.to(el, { duration: 0.6, scrambleText: { text: real, chars: GLYPHS, revealDelay: 0.27 } });

NumberFlowVoyager 1 live telemetry

Animated, Intl-formatted number transitions as a web component

NumberFlow animates between Intl.NumberFormat outputs digit by digit, rolling each column and morphing separators and widths when the format changes. A live Voyager 1 distance board ticks every second; switching km / mi / AU morphs the whole format, and a time-warp slider spins decades of digits.

import { continuous } from 'number-flow'; // registers <number-flow>

const dist = document.getElementById('dist');
dist.format = { maximumFractionDigits: 0 };
dist.locales = 'en-US';
dist.plugins = [continuous];
dist.trend = 1;
dist.spinTiming = { duration: 900, easing: 'cubic-bezier(.2,.8,.2,1)' };

setInterval(() => dist.update(km * UNITS[unit].f), 1000);

ShikiOne block, every theme

TextMate-grammar syntax highlighter with VS Code themes

Shiki highlights code with the same TextMate grammars and themes as VS Code, so output matches the editor exactly, and it runs fully in the browser with a pure-JS regex engine (no WASM). The same snippet cross-fades through eight themes; swatches are built from each theme's own token colours and hovering a token shows its TextMate scope.

const hl = await createHighlighterCore({
  themes: [import('@shikijs/themes/vesper'), import('@shikijs/themes/tokyo-night') /* … */],
  langs: [import('@shikijs/langs/typescript'), import('@shikijs/langs/css')],
  engine: createJavaScriptRegexEngine(), // no WASM
});

const html = hl.codeToHtml(code, {
  lang, theme: name, includeExplanation: 'scopeName', transformers: [scopeTagger],
});

Splitting.jsVariable-font CSS wave

Splits text into spans with CSS custom-property indexes

Splitting.js makes one pass over the DOM, wrapping each word and character and giving it --char-index and --char-total custom properties; everything after that is plain CSS. A registered @property sweeps a highlight across the word, and each letter computes its own variable-font weight, softness, colour and lift from its distance to it.

Splitting({ target: '[data-splitting]', by: 'chars' });

/* CSS does the rest */
@property --hi { syntax: '<number>'; inherits: true; initial-value: 0; }
.wave .char {
  --d: max(var(--char-index) - var(--hi), var(--hi) - var(--char-index));
  font-variation-settings:
    'wght' clamp(120, 900 - var(--d) * 200, 900),
    'SOFT' clamp(0, 100 - var(--d) * 40, 100);
}

VaraKeats, written by hand

Animated SVG handwriting from stroke-path fonts

Vara draws text stroke by stroke from single-line font files, so letters appear in pen order instead of fading in. A Keats couplet is written out and re-written in four script hands; type your own line and Vara writes it on the ruled pad.

import Vara from 'vara';
import parisienne from 'vara/fonts/Parisienne/Parisienne.json?url';

const texts = lines.map((text, i) => ({
  text, fontSize: fs, strokeWidth: 1.6, color: '#f2c879',
  duration: 240 + text.length * 50, textAlign: 'center',
  y: i * gap, fromCurrentPosition: { y: false },
}));
const vara = new Vara('#pad', parisienne, texts, { textAlign: 'center' });
vara.animationEnd(i => { /* rewrite in the next hand */ });

CobeGlobe with anchored labels

A 5 kB WebGL dotted globe with markers and arcs

Cobe draws a Fibonacci-sampled dot-matrix Earth in a single fragment shader, with no three.js and zero deps. Version 2 adds arcs and exposes every marker as a CSS anchor, so the labels here are plain DOM elements placed with CSS anchor positioning and faded by a --cobe-visible-* variable.

const globe = createGlobe(canvas, {
  width: 600, height: 600, phi, theta, dark: 1,
  mapSamples: 20000, baseColor: [0.22, 0.24, 0.32],
  markerColor: [1, 0.52, 0.26], arcColor: [1, 0.62, 0.38],
  markers: cities.map((c) => ({ location: c.loc, size: 0.035, id: c.id })),
  arcs: arcs.map(([a, b]) => ({ from: byId[a].loc, to: byId[b].loc })),
});
// labels: plain DOM, positioned by CSS anchor positioning
el.style.positionAnchor = `--cobe-${c.id}`;
el.style.opacity = `var(--cobe-visible-${c.id}, 0)`;
function frame() { globe.update({ phi, theta }); requestAnimationFrame(frame); }

Vanta.jsFive living backdrops

Animated 3D website backgrounds in a few lines

Vanta wraps three.js scenes and shaders (halo, fog, net, waves, flocking birds) into drop-in background effects that track the mouse. You pass an element, a THREE instance and a palette; destroy() tears it down, which is what this switcher does.

import * as THREE from 'three';
import HALO from 'vanta/dist/vanta.halo.min';

const effect = HALO({
  el: document.getElementById('bg'), THREE,
  mouseControls: true, touchControls: true,
  baseColor: 0x1a0b5e, backgroundColor: 0x07060f,
  amplitudeFactor: 1.4, size: 1.6,
});
// later: effect.destroy()

WebGL FluidGPU ink simulation

ESM port of PavelDoGreat's WebGL fluid simulation

This is a real Navier-Stokes solver running on the GPU: advection, pressure and curl passes, then bloom and sunrays post-processing. The webgl-fluid package turns the well-known demo into one function call with options for auto-splats, trigger mode and dissipation.

WebGLFluid(canvas, {
  TRIGGER: 'hover',
  IMMEDIATE: true,
  AUTO: true, INTERVAL: 2600,
  DENSITY_DISSIPATION: 0.9,
  CURL: 38,
  SPLAT_RADIUS: 0.28,
  BACK_COLOR: { r: 4, g: 4, b: 10 },
  BLOOM: true, SUNRAYS: true,
});

ShaderGradientGrainy 3D gradient presets

Animated, grainy 3D mesh gradients as a React component

ShaderGradient displaces a plane, water plane or sphere with noise and shades it with three colors plus film grain, which gives the soft, moving gradients you see on landing pages. Every look is a small set of props, so presets can be swapped and tweened.

const p = presets[key];
const props = { ...p.props, lightType: '3d', control: 'props', enableTransition: true };

<ShaderGradientCanvas style={{ position: 'fixed', inset: 0 }} pixelDensity={1.5} fov={45}>
  <ShaderGradient {...props} />
</ShaderGradientCanvas>

OGLFlowmap poster distortion

Minimal WebGL library with a three.js-like API

OGL is a small, dependency-free WebGL abstraction with renderer, program, mesh and an extras folder. Its Flowmap helper ping-pongs render targets to record cursor velocity, and here that velocity drives a per-channel RGB-split warp of a procedurally drawn poster.

const flowmap = new Flowmap(gl, { falloff: 0.28, dissipation: 0.965 });
const program = new Program(gl, { vertex, fragment,
  uniforms: { tWater: { value: texture }, tFlow: flowmap.uniform, res: { value: [0, 0, 1, 1] } } });
const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });

function update() {
  flowmap.mouse.copy(mouse);
  flowmap.velocity.lerp(velocity, velocity.len() ? 0.5 : 0.1);
  flowmap.update();
  renderer.render({ scene: mesh });
}

ZdogFlat 3D planet scene

Round, flat pseudo-3D engine for canvas and SVG

Zdog renders 3D models as flat 2D strokes, so everything gets round caps and solid fills, like vector illustration that can rotate. Shapes are composed from anchors, hemispheres, cones and paths, and dragRotate gives you an interactive scene in a few lines.

const illo = new Zdog.Illustration({
  element: '.zdog', resize: true, dragRotate: true,
  onResize(w, h) { this.zoom = Math.min(w, h) / 420; },
});
const planet = new Zdog.Anchor({ addTo: illo, rotate: { z: -0.35 } });
new Zdog.Hemisphere({ addTo: planet, diameter: 150, stroke: false, color: '#ff6b57' });
new Zdog.Hemisphere({ addTo: planet, diameter: 150, stroke: false, color: '#d9443a',
  rotate: { y: TAU / 2 } });
const ring = new Zdog.Anchor({ addTo: planet, rotate: { x: TAU / 4 + 0.15 } });
new Zdog.Ellipse({ addTo: ring, diameter: 240, stroke: 10, color: '#fbeee0' });

threejs-toysNeon tube cursor

Ready-made three.js cursor and background effects

Kevin Levron's threejs-toys packages shader-heavy effects as single functions: an SDF-bezier neon tube that follows the cursor, a GPGPU particle cursor, and an instanced swarm. Each takes an element and a config object and creates its own renderer.

import { neonCursor } from 'threejs-toys';

neonCursor({
  el: document.getElementById('app'),
  shaderPoints: 16, curvePoints: 80, curveLerp: 0.5,
  radius1: 5, radius2: 30, velocityTreshold: 10,
  sleepRadiusX: 160, sleepRadiusY: 110,
  sleepTimeCoefX: 0.0025, sleepTimeCoefY: 0.0035,
});

tsParticlesLow-poly constellations

Modular, configurable particle engine, successor to particles.js

tsParticles is a plugin-based rewrite of particles.js. Shapes, links, interactions and updaters are separate packages, and the whole scene is one options object. With link triangles enabled, neighbouring particles fill in as translucent faces, which gives a moving low-poly mesh.

await loadSlim(tsParticles);
await tsParticles.load({ id: 'tsparticles', options: {
  particles: {
    paint: { fill: { enable: true, color: { value: ['#ff5d73', '#ffb547', '#7c6cff', '#36d6c3'] } } },
    links: { enable: true, distance: 150, color: { value: 'random' },
      triangles: { enable: true, opacity: 0.07 } },
    move: { enable: true, speed: 0.9, outModes: { default: 'bounce' } },
  },
  interactivity: { events: { onHover: { enable: true, mode: ['grab', 'bubble'] },
    onClick: { enable: true, mode: 'push' } } },
} });

liquid-glass-reactRefracting glass lock screen

Apple-style liquid glass React component with real refraction

Instead of a frosted backdrop-filter blur, it bends the content behind each panel with an SVG displacement map, adds chromatic aberration at the rim and stretches the glass elastically toward the pointer. The four refraction modes (standard, polar, prominent, shader) change how the edge lenses light. Full displacement renders in Chromium; Safari and Firefox fall back to a partial effect.

<LiquidGlass
  mouseContainer={scene}
  cornerRadius={36}
  displacementScale={90}
  blurAmount={0.04}
  saturation={150}
  aberrationIntensity={3}
  elasticity={0.35}
  mode={mode}  // 'standard' | 'polar' | 'prominent' | 'shader'
>
  <div className="clock">…</div>
</LiquidGlass>

Shader ParkMorphing SDF sculpture

Write raymarched SDF shaders as plain JavaScript

You describe a 3D form with JS calls like sphere(), boxFrame(), noise() and mixGeo(), and Shader Park compiles them to a raymarched GLSL signed-distance field rendered on a three.js mesh. Shapes blend smoothly with no polygons, and uniforms like time, mouse and a click input drive them live.

const spCode = `
  let click = input();
  let s = getSpace();
  let n = noise(s * 2.4 + vec3(0, 0, time * 0.35));
  metal(0.8);
  shine(0.9);
  rotateY(time * 0.25 + mouse.x * 2.2);
  boxFrame(vec3(0.5), 0.045 + abs(n) * 0.05);
  mixGeo(click);
  sphere(0.5 + n * 0.14);
`;
const mesh = createSculpture(spCode, () => ({ time: state.time, click: state.click, mouse: state.mouse }), { radius: 1.15, segments: 48 });

PowerGlitchVHS signal-lost glitch

Tiny library that glitches any DOM element with pure CSS

PowerGlitch clones an element into layers and animates clip-path slices, shake and hue-rotate with CSS keyframes, so images, text and buttons glitch without canvas or WebGL. Effects play always, on hover, on click or manually, and the whole configuration is one options object.

imgGlitch = PowerGlitch.glitch(img, {
  playMode: 'always',
  timing: { duration: 2600, iterations: Infinity },
  glitchTimeSpan: { start: 0.45, end: 0.7 },
  shake: { velocity: 12, amplitudeX: 0.04, amplitudeY: 0.02 },
  slice: { count: 6, velocity: 14, minHeight: 0.02, maxHeight: 0.12, hueRotate: true },
});
// Title: only glitches while hovered
PowerGlitch.glitch(title, { playMode: 'hover', timing: { duration: 900, iterations: Infinity } /* … */ });
document.getElementById('frame').addEventListener('click', () => burst.startGlitch());

Mesh GradientSilk-fold colour field

Stripe-style animated WebGL mesh gradients from four colours

Four hex colours go in and a noise-displaced WebGL plane comes out, folding like fabric. Seed, frequency and speed are plain options, colour and seed changes tween smoothly, and a wireframe flag exposes the underlying mesh. It is framework-free and pauses itself when scrolled out of view.

const gradient = new MeshGradient();
gradient.init('#gradient', {
  colors: ['#ff4e00', '#ec9f05', '#8a2be2', '#ff006e'],
  seed: 7,
  animationSpeed: 1.2,
  frequency: { x: 0.00012, y: 0.0003, delta: 0.0001 },
  pauseOnOutsideViewport: true,
});
gradient.update({ colors: PALETTES[i], transition: true, transitionDuration: 600 });
gradient.update({ wireframe, transition: false });

GL TransitionsGLSL transition slideshow

Open collection of 100+ GLSL image transitions

Every transition is one small GLSL function, transition(uv), that mixes two textures by a progress value, so the same file runs in a browser, a video editor or ffmpeg. The npm package ships the whole community collection with author and license metadata, and gl-transition renders any entry onto a WebGL canvas.

const usable = GLTransitions.filter((t) => !Object.values(t.paramsTypes).includes('sampler2D'));
const list = PICKS.map((n) => usable.find((t) => t.name === n)).filter(Boolean);

const getTransition = (t) => {
  if (!compiled.has(t.name)) compiled.set(t.name, createTransition(gl, t, { resizeMode: 'cover' }));
  return compiled.get(t.name);
};
textures = imgs.map((img) => createTexture(gl, img));

function drawFrame(p) {
  getTransition(list[tIndex]).draw(p, textures[from], textures[to], canvas.width, canvas.height);
}

curtains.jsRipple hover gallery

Turns DOM images into WebGL planes you can shade

curtains.js keeps your layout in HTML and CSS: each element with an <img> becomes a WebGL plane sized and positioned to match it, with the image bound as a texture uniform. You add vertex and fragment shaders for ripples, RGB splits and depth while the page stays accessible and responsive.

document.querySelectorAll('.plane').forEach((el, index) => {
  const plane = new Plane(curtains, el, {
    vertexShader, fragmentShader, widthSegments: 40, heightSegments: 40,
    uniforms: {
      hover: { name: 'uHover', type: '1f', value: 0 },
      mouse: { name: 'uMouse', type: '2f', value: new Vec2(0, 0) },
    },
  });
  el.addEventListener('pointermove', (e) => {
    const p = plane.mouseToPlaneCoords(new Vec2(e.clientX, e.clientY));
    state.targetMouse.set(p.x, p.y);
  });

css-doodleGenerative CSS patterns

Web component that draws generative patterns with CSS grids

A <css-doodle> element turns its contents into a grid of cells, and a small grammar (@grid, @i, @x, @r, @p, @shape) lets one CSS rule vary per cell. The result is Truchet tiles, vortices and shape fields made entirely of DOM and CSS, and update() re-rolls every random value.

<css-doodle>
  :doodle { @grid: 16 / 100vmax; background: #120c24; }
  --c: hsl(calc(290 + @x * 5) 92% 66%);
  background:
    radial-gradient(circle at 0 0, transparent 30.6%, var(--c) 31.4% 38.6%, transparent 39.4%),
    radial-gradient(circle at 100% 100%, transparent 30.6%, var(--c) 31.4% 38.6%, transparent 39.4%);
  transform: rotate(@p(0deg, 90deg));
  animation-delay: @r(-7s, 0s);
</css-doodle>

blobsLayered morphing blobs

Seeded random blob shapes that morph smoothly

blobs generates organic closed shapes from a seed, point count and randomness value, then interpolates between any two of them, even with different point counts, without kinks. Output is an SVG path or a Path2D for canvas, and its keyframe API with easing callbacks makes looping morphs a few lines.

const opts = (layer, seed) => ({ seed, extraPoints: layer.extraPoints, randomness: layer.randomness, size: SIZE });

const animation = blobs2Animate.canvasPath();
const loop = () => {
  seeds[i] = Math.floor(Math.random() * 10000);
  animation.transition({ duration: layer.duration, timingFunction: 'ease', callback: loop, blobOptions: opts(layer, seeds[i]) });
};
animation.transition({ duration: 0, callback: loop, blobOptions: opts(layer, seeds[i]) });

// every frame, per layer
ctx.fill(animation.renderFrame());

Rough.jsBoiling sketchbook landscape

Draw shapes that look hand-sketched, on canvas or SVG

Rough.js turns any rectangle, ellipse, polygon or SVG path into wobbly, hand-drawn strokes with hachure, cross-hatch, zigzag or dot fills. A seed makes each sketch reproducible, so cycling through three seeds gives the 'line boil' of hand-drawn animation. At under 9 kB gzipped, it powers Excalidraw-style UIs and wired-elements.

const rc = rough.canvas(canvas);
const o = (i, extra = {}) => ({
  roughness: state.roughness, bowing: state.bowing, seed: seedBase * 97 + i,
  stroke: C.ink, fillStyle: state.fillStyle, hachureGap: 7, ...extra,
});
rc.rectangle(360, 300, 230, 145, o(i++, { fill: C.coral }));
rc.polygon([[340, 305], [475, 205], [610, 305]], o(i++, { fill: C.violet }));
rc.circle(702, 285, 130, o(i++, { fill: C.green }));
rc.curve(tail, o(i++, { stroke: C.amber }));

chart.xkcdSix xkcd-style chart types

xkcd-style sketchy charts: line, XY, bar, pie, radar

chart.xkcd draws charts the way Randall Munroe does: jittery axes, the xkcd handwriting font (embedded in the bundle) and boxed tooltips that follow the cursor. It has six chart types behind a Chart.js-like config with no dependencies, and supports custom stroke and background colours for dark themes.

new chartXkcd.Line(svg, {
  title: 'Focus during a 60-minute meeting',
  xLabel: 'minutes', yLabel: 'attention',
  data: {
    labels: ['0', '5', '10', '15', '20', '25', '30'],
    datasets: [{ label: 'me', data: [9, 8.5, 6, 3, 2.2, 2, 1.4] }],
  },
  options: { backgroundColor: '#111216', strokeColor: '#ece6d6',
    yTickCount: 4, legendPosition: chartXkcd.config.positionType.downLeft },
});

roughVizSketchy café dashboard

D3 charts rendered with Rough.js hand-drawn strokes

roughViz is a set of D3 charts (bar, donut, line, scatter, stacked) rendered with Rough.js, so fills come out as hachure, zigzag or dot patterns and outlines wobble. Fill style and roughness are plain options, and redrawing the chart re-sketches it, which this demo uses for an idle shimmer. Good for data that should feel informal or approximate.

const bar = new Bar({
  element: '#bar',
  data: { labels: ['espresso', 'flat white', 'oat latte'], values: [182, 241, 300] },
  color: '#f2b84b', highlight: '#ff6f59', stroke: ink,
  fillStyle, roughness, font: 'Patrick Hand',
});
// controls just re-render with new options
bar.redraw({ ...opts, fillStyle: 'cross-hatch', roughness: 3 });

perfect-freehandPressure-sensitive ink pad

Turns pointer points into smooth, pressure-sensitive ink outlines

perfect-freehand takes raw pointer samples and returns the outline polygon of a variable-width stroke, simulating pressure from speed when there is no stylus. Thinning, smoothing, streamline and taper are numbers you can tune live. It powers the ink in tldraw and Excalidraw-style apps, and you render the output yourself as SVG or canvas paths.

const outline = getStroke(points, {
  size: 16, thinning: 0.6, smoothing: 0.5, streamline: 0.5,
  simulatePressure: !stroke.pen,
  start: { taper: size * 4, cap: true },
  end: { taper: size * 5, cap: true },
});
path.setAttribute('d', getSvgPathFromStroke(outline));

ExcalidrawEmbedded hand-drawn whiteboard

The hand-drawn whiteboard, as an embeddable React component

@excalidraw/excalidraw is the full Excalidraw editor packaged as one React component, including its tools, Rough.js shapes and Excalifont handwriting. You can preload a scene from a compact skeleton format, drive it through an imperative API, and serve its fonts yourself instead of from a CDN. Useful for diagrams people should be able to edit in place.

window.EXCALIDRAW_ASSET_PATH = new URL('../../excalidraw-assets/', location.href).href;

<Excalidraw
  theme="dark"
  initialData={{
    elements: convertToExcalidrawElements([
      { id: 'npm', type: 'rectangle', x: 40, y: 90, width: 200, height: 90,
        backgroundColor: '#a5d8ff', fillStyle: 'hachure', label: { text: 'npm i roughjs' } },
      { type: 'arrow', x: 240, y: 135, start: { id: 'npm' }, end: { id: 'vite' } },
    ]),
  }}
/>

VivusLighthouse that draws itself

Animates SVG strokes so illustrations appear to draw themselves

Vivus animates stroke-dashoffset on every path of an inline SVG, so line art appears to be drawn by hand. It has three timing modes (delayed, sync, oneByOne), separate easing per path and for the whole timeline, and setFrameProgress() for scrubbing or scroll-linking. It has no dependencies and works on any SVG you already have.

viv = new Vivus(svg, {
  type: 'oneByOne', start: 'manual', duration: 260,
  animTimingFunction: Vivus.EASE,
  pathTimingFunction: Vivus.EASE_OUT_BOUNCE,
});
viv.play(1, () => svg.classList.add('done'));   // draw
viv.play(-4, () => setTimeout(draw, 500));        // rewind
scrub.oninput = () => viv.stop().setFrameProgress(+scrub.value);