npm install @caustics/plotburn <script> import { Plotburn } from '@caustics/plotburn'; </script> <Plotburn preset="editorial" />
npm install @caustics/plotburn import { Plotburn } from '@caustics/plotburn/react'; return <Plotburn preset="editorial" />;
npm install @caustics/plotburn import { mount } from '@caustics/plotburn'; mount(document.querySelector('#hero'), { preset: 'editorial' });
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "editorial" | 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. |
caustics-plotburn/ ├── svelte/ Plotburn.svelte · index.ts · types.ts ├── react/ Plotburn.tsx · index.ts · types.ts ├── vanilla/ plotburn.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
Plotburn is the data line’s flagship — a chart engine that refuses the usual trade-off. Chart.js and ECharts are easy but top out around a few thousand marks and fight you on theming; D3 and visx are powerful but a parts bin, weeks of axis math and hit-testing glue per project. Plotburn gives you beauty, 100× scale, and reusable typed ergonomics at once: line, area, scatter, and bar marks on instanced WebGL, art-directable by default, with the chart chrome you’d otherwise rebuild every project.
The architecture is the reason it scales. The data→pixel transform lives in the vertex shader, driven by per-axis scale uniforms, so the instance buffers upload once and panning or zooming is a uniform update — never a re-tessellation. A million-point scatter draws in roughly a sub-millisecond GPU call, and the engine is render-on-demand: no animation frame runs while the chart is idle, paused, scrolled off-screen, or in a hidden tab. GL draws the marks; the axes, crosshair, tooltip, legend, and data table are crisp DOM/SVG.
The look is real, not a skin. Strokes and fills carry the same material vocabulary as shader-gradient — solid, gradient (interpolated in OKLab so multi-stop ramps step perceptually evenly), or glow — plus film / digital / halftone grain, so a chart and a hero on the same site speak one palette and one grain signature. Five curated presets — editorial, neon, minimal, terminal, aurora — bundle a complete look you apply with a single prop; any explicit option overrides the preset.
It carries the full Caustics lifecycle and the chart ergonomics you actually need: linear / log / time scales with nice-number ticks, per-decade log ticks, and calendar-aware UTC time ticks; snap-to-nearest crosshair (hit-testing is O(log n + k) per pointer move, so it stays responsive at a million points); an auto-positioned HTML tooltip with a format hook; an x- or y-range brush; wheel-zoom about the cursor with drag-pan and configurable zoom limits; a static legend; and animated domain transitions that honor reduced motion. Every chart renders an accessible <table> of its data — visually hidden by default, and the visible fallback when WebGL is unavailable. Zero runtime dependencies; ships for Svelte 5, React 18+, and vanilla JS, all through one mount() factory.
Caustics Commercial License · lifetime updates within v1