From 28e92c9a4a58883f0c5ba80324bbcd73078c851b Mon Sep 17 00:00:00 2001 From: Hunter Garrett Date: Thu, 20 Aug 2026 20:18:49 -0400 Subject: [PATCH 1/2] chore: renumber release history to pre-1.0.0 and rewrite changelogs --- .changeset/mattermix-move.md | 13 +++ .changeset/stable-hash-backend-parity.md | 4 +- apps/docs/content/docs/changelog.mdx | 76 +++++++-------- packages/shaders-cli/CHANGELOG.md | 76 +++++++-------- packages/shaders-cli/package.json | 2 +- packages/shaders-react/CHANGELOG.md | 87 ++++++++--------- packages/shaders-react/package.json | 2 +- packages/shaders/CHANGELOG.md | 113 ++++++++++++----------- packages/shaders/package.json | 2 +- 9 files changed, 196 insertions(+), 179 deletions(-) create mode 100644 .changeset/mattermix-move.md diff --git a/.changeset/mattermix-move.md b/.changeset/mattermix-move.md new file mode 100644 index 00000000..b36c8e12 --- /dev/null +++ b/.changeset/mattermix-move.md @@ -0,0 +1,13 @@ +--- +'@mattermix/shaders': minor +'@mattermix/shaders-react': minor +'@mattermix/shaders-cli': minor +--- + +The three packages are renamed. `@lovo/matter` is now `@mattermix/shaders`, `@lovo/matter-react` is now `@mattermix/shaders-react`, and `@lovo/matter-cli` is now `@mattermix/shaders-cli`. The repository moved to github.com/mattermix/shaders. Update your dependency names and every import specifier. Apart from the removals below, the exports themselves are unchanged. + +The CLI binary is renamed from `matter-cli` to `shaders-cli`, and its config file from `matter.config.json` to `shaders.config.json`. Rename the file and update any script that calls the old binary. Two defaults that `shaders-cli init` writes also change: `componentsDir` goes from `src/components/matter` to `src/components/shaders`, and `registryUrl` now points at `mattermix/shaders` instead of `lovo-hq/matter`. A config you already have keeps the values it records, so edit its `registryUrl` by hand or re-run `init` with `--force`. + +`MatterError` and `MatterErrorCode` in `@mattermix/shaders-react` are now `ShadersError` and `ShadersErrorCode`. A `catch` block that tests `instanceof MatterError` has to switch to the new name. + +The READMEs drop their migration notes for the `Matter*` aliases that 0.4.0 deprecated, such as `MatterScene` and `MatterScheduler`. The aliases themselves left the source several releases ago. diff --git a/.changeset/stable-hash-backend-parity.md b/.changeset/stable-hash-backend-parity.md index e1efcec1..31f9ad7e 100644 --- a/.changeset/stable-hash-backend-parity.md +++ b/.changeset/stable-hash-backend-parity.md @@ -2,6 +2,6 @@ '@mattermix/shaders': minor --- -Seeded randomness now renders the same pattern on the WebGPU and WebGL2 backends. three's TSL `hash()` writes its PCG constants as float literals, which GLSL rounds to a different hash than WGSL computes, so the same `seed` produced a different Voronoi layout in Safari than in Chrome. The new `stableHash` and `stableHashUint` exports run the same PCG with integer-typed constants and chain hash streams u32-to-u32, and `voronoiCells`, `grain`, `metaballs`, and `ditherPattern` now draw from them. +Seeded randomness now renders the same pattern on the WebGPU and WebGL2 backends. three's TSL `hash()` writes its PCG constants as float literals, which GLSL rounds to a different hash than WGSL computes, so the same `seed` produced a different Voronoi layout in Safari than in Chrome. The new `stableHash` and `stableHashUint` exports run the same PCG with integer-typed constants and chain hash streams u32 to u32, and `voronoiCells`, `grain`, `metaballs`, and `ditherPattern` now draw from them. -One-time visual break: deriving seeds from the raw hash word re-rolls every seeded layout once, on both backends. Any `seed` value renders a new (stable) pattern after this release. +This costs one visual break. Deriving seeds from the raw hash word re-rolls every seeded layout once, on both backends, so any `seed` value renders a new pattern after this release. The new pattern is stable from here. diff --git a/apps/docs/content/docs/changelog.mdx b/apps/docs/content/docs/changelog.mdx index dbf25e84..15f4d8d3 100644 --- a/apps/docs/content/docs/changelog.mdx +++ b/apps/docs/content/docs/changelog.mdx @@ -7,43 +7,45 @@ order: 30 # Changelog -Shaders ships as three coordinated npm packages: `@mattermix/shaders` (engine), `@mattermix/shaders-react` (React binding), and `@mattermix/shaders-cli` (copy-paste CLI). Each package has its own `CHANGELOG.md` in the repo; this page summarizes the headline changes. +Shaders ships as three coordinated npm packages: `@mattermix/shaders` (engine), `@mattermix/shaders-react` (React binding), and `@mattermix/shaders-cli` (copy-paste CLI). Each package has its own `CHANGELOG.md` in the repo, and this page summarizes the headline changes. + +Everything through 0.18.0 shipped under the earlier name, as `@lovo/matter`. The 1.0.0 through 3.9.0 releases from that history are renumbered as 0.7.0 through 0.18.0 in the per-package changelogs, because 1.0.0 went out by accident and the project is not at 1.0 yet. ## Unreleased -**Breaking change — `Waves` is now `WaveLines`.** +**Breaking: `Waves` is now `WaveLines`.** -The old name read as water. The component draws glowing lines, so it's renamed to match: add it with `shaders-cli add wave-lines`, import `WaveLines`, and pass `lines` instead of `layers` (the per-line type is `WaveLine`, formerly `WaveLayer`). Nothing else moved: same props, same rendering, no visual change. +The old name read as water. The component draws glowing lines, so it's renamed to match: add it with `shaders-cli add wave-lines`, import `WaveLines`, and pass `lines` instead of `layers`. The per-line type is `WaveLine`, formerly `WaveLayer`. Nothing else moved. Same props, same rendering, no visual change. -Components ship by copy-paste, so installed copies keep working under the old name; re-add `wave-lines` through the CLI to pick up the new one. +Components ship by copy-paste, so installed copies keep working under the old name. Re-add `wave-lines` through the CLI to pick up the new one. -**Breaking change — `Waves` rebuilt around one shared wave.** +**Breaking: `Waves` is rebuilt around one shared wave.** -The old Waves gave every layer its own `frequency`, `speed`, `offset`, and `waviness`, so getting multiple lines to move together was mostly luck. Those per-layer fields are gone. Every line now renders one shared wave, and the motion comes from two new props: `braiding` weaves the lines apart and back together over time, and `breathing` pulses their heights on a slow cycle, strongest on the first layer. Two more props, `flare` and `flareRadius`, widen the line ends into a soft fray toward the canvas edges. +The old Waves gave every layer its own `frequency`, `speed`, `offset`, and `waviness`, so getting multiple lines to move together was mostly luck. Those per-layer fields are gone. Every line now renders one shared wave, and the motion comes from two new props. `braiding` weaves the lines apart and back together over time, and `breathing` pulses their heights on a slow cycle, strongest on the first layer. Two more props, `flare` and `flareRadius`, widen the line ends into a soft fray toward the canvas edges. -`color` on a layer now accepts either a single color or an array of stops that form a gradient along the line; `colorDrift` slides the gradient and `colorSpace` (default `oklab`) sets the mixing space. The default set is eight blue-to-violet lines. +`color` on a layer now accepts either a single color or an array of stops that form a gradient along the line. `colorDrift` slides the gradient, and `colorSpace` (default `oklab`) sets the mixing space. The default set is eight blue-to-violet lines. -Components ship by copy-paste, so installed copies keep rendering as before; re-add `waves` through the CLI to get the rebuild. If you had custom `layers`, they will render differently: the removed movement fields have no equivalent. +Components ship by copy-paste, so installed copies keep rendering as before. Re-add `waves` through the CLI to get the rebuild. If you had custom `layers`, they will render differently, because the removed movement fields have no equivalent. -**Breaking change — `Waves` lines are now ribbons wrapped in light.** +**Breaking: `Waves` lines are now ribbons wrapped in light.** -The rebuild above still drew every line as pure added light, which kept the controls tangled: thicker lines made the whole canvas brighter, and `glow` changed brightness and edge softness at the same time. A line is now two parts with one control each. The body is a surface: `thickness` sets its width and `opacity` its transparency, from 0 (no body, the line renders as pure light) to 1 (solid ribbons that cover the lines behind them; the first layer sits in front). The halo is light: `softness` shapes how it falls off and `brightness` sets how much it casts. `glow` is gone, split into `softness` and `brightness`. +The rebuild above still drew every line as pure added light, which kept the controls tangled. Thicker lines made the whole canvas brighter, and `glow` changed brightness and edge softness at the same time. A line is now two parts with one control each. The body is a surface. `thickness` sets its width and `opacity` its transparency. At 0 the line has no body and renders as pure light, and at 1 the ribbons are solid and cover the lines behind them, with the first layer in front. The halo is light. `softness` shapes how it falls off, and `brightness` sets how much it casts. `glow` is gone, split into `softness` and `brightness`. -Per-layer overrides (`amplitude`, `glow`, `thickness` on a layer) are gone too. A layer is just a color or gradient now, and lines differ through color, the movement system, and paint order. Defaults changed to show the new look: wide translucent ribbons with slow drifting gradients. +Per-layer overrides of `amplitude`, `glow`, and `thickness` are gone too. A layer is just a color or a gradient now, and lines differ through color, the movement system, and paint order. Defaults changed to show the new look: wide translucent ribbons with slow drifting gradients. -Same copy-paste rule: installed copies keep rendering as before; re-add `waves` through the CLI to get the new line rendering. +The same copy-paste rule applies. Installed copies keep rendering as before, and re-adding `waves` through the CLI gets the new line rendering. -**Registry components: prop renames and prop docs.** Every Tier 1 component prop now has JSDoc hover documentation, and a few props got plainer names. Components ship by copy-paste, so your installed copies are unaffected; re-add a component through the CLI to get the new names. +**Registry components: prop renames and prop docs.** Every Tier 1 component prop now has JSDoc hover documentation, and a few props got plainer names. Components ship by copy-paste, so your installed copies are unaffected. Re-add a component through the CLI to get the new names. - `Aurora`: `turbulence` → `waviness`, `falloff` → `coverage` - `Vignette`: `falloff` → `radius` - `SimplexNoise`: `bias` → `balance` -- `LinearGradient`: `focalPoint` → `center`; `interactive` removed (cursor following was dropped from all components) +- `LinearGradient`: `focalPoint` → `center`, and `interactive` is removed, because cursor following was dropped from all components - `Grain`: `grainBlend` → `blend` ## 0.2.0 -**Breaking change — `@mattermix/shaders` no longer re-exports pure TSL primitives.** +**Breaking: `@mattermix/shaders` no longer re-exports pure TSL primitives.** The following 15 nodes are no longer exported by `@mattermix/shaders`. Import them directly from `three/tsl`: @@ -55,51 +57,51 @@ import { vec3, uv, time } from '@mattermix/shaders' // After (0.2.0) import { vec3, uv } from 'three/tsl' -import { time } from '@mattermix/shaders' // still here — reduced-motion-gated +import { time } from '@mattermix/shaders' // still here, reduced-motion-gated ``` -`time` continues to be exported from `@mattermix/shaders` because Matter owns its semantics (reduced-motion gating). For raw uncapped time, import from `three/tsl` directly. +`time` stays exported from `@mattermix/shaders` because the engine owns its semantics, which is the reduced-motion gating. For raw uncapped time, import from `three/tsl` directly. -All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@mattermix/shaders` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). +The primitives the engine owns (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) stay exported from `@mattermix/shaders` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols, or re-add the component through the CLI to pull the 0.2.0 source. -**Why:** Re-exporting pure TSL primitives provided no value beyond shared import paths — no rename, no added docs, no future-swap benefit. Dropping them clarifies the layer boundary: Matter ships value-add primitives, TSL provides the math. See the [shaders engine reference](/reference/shaders) for the current public surface. +**Why:** re-exporting pure TSL primitives bought nothing beyond shared import paths. No rename, no added docs, no future swap. Dropping them clarifies the layer boundary. The engine ships value-add primitives, and TSL provides the math. The [shaders engine reference](/reference/shaders) lists what the engine exports today. -## 0.1.0 — Initial public release +## 0.1.0, the initial public release -The first public release of Matter — React shader components on WebGPU + Three.js TSL. +React shader components on WebGPU and Three.js TSL. ### `@mattermix/shaders` -Framework-agnostic engine. Exports: +The framework-agnostic engine. It exports: -- **TSL primitives:** `fbm`, `voronoi`, `noise`, `colorRamp`, `quantize`, `sdfCircle`, `displace`, `cursorRipple`. -- **TSL re-exports:** a stable surface for common TSL nodes (`uniform`, `uv`, `vec2`, `vec3`, `mix`, `time`, etc.) so registry components import everything from one entry point. -- **Runtime:** `createRenderer`, `MatterScheduler`, visibility/intersection watchers, reduced-motion policy. -- **Inputs:** `CursorInput` (framework-agnostic cursor source). +- TSL primitives: `fbm`, `voronoi`, `noise`, `colorRamp`, `quantize`, `sdfCircle`, `displace`, and `cursorRipple`. +- TSL re-exports: a stable set of common TSL nodes, among them `uniform`, `uv`, `vec2`, `vec3`, `mix`, and `time`, so registry components import everything from one entry point. +- Runtime: `createRenderer`, `MatterScheduler`, the visibility and intersection watchers, and the reduced-motion policy. +- Inputs: `CursorInput`, a framework-agnostic cursor source. ### `@mattermix/shaders-react` -React binding for the engine. Exports: +The React binding for the engine. It exports: -- `` — shared WebGPU canvas wrapper. -- `useShaderMaterial` — r3f-compatible hook for using Matter inside your own ``. -- Input hooks — `useCursor`, `useScroll`, `useResize`. -- Animation glue — `useAnimatableUniform`, accepts any MotionValue-shaped signal. -- Fallback / dev utilities — `FallbackBoundary`, `useStaticHint`, `MatterMonitor`. +- ``, the shared WebGPU canvas wrapper. +- `useShaderMaterial`, an r3f-compatible hook for using the engine inside your own ``. +- Input hooks: `useCursor`, `useScroll`, and `useResize`. +- Animation glue: `useAnimatableUniform`, which accepts any MotionValue-shaped signal. +- Fallback and dev utilities: `FallbackBoundary`, `useStaticHint`, and `MatterMonitor`. ### `@mattermix/shaders-cli` -shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. The default registry tracks the CLI's published version tag (`v0.1.0`), so the component source you copy is stable per release. +The shadcn-style copy-paste CLI, with `init`, `list`, `add`, and `update`. The default registry tracks the CLI's published version tag (`v0.1.0`), so the component source you copy is stable per release. ### v1 components -Available via `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `simplex-noise`, `waves`. Each lands in your project as a regular `.tsx` file — you own and edit it from that point. +Six components are available through `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `simplex-noise`, and `waves`. Each lands in your project as a regular `.tsx` file, and you own and edit it from that point. ### Requirements -- Node 22+ for the CLI. -- WebGPU-capable browser at runtime (Chromium-based, Safari Technology Preview, Firefox Nightly with the flag). -- React ^19, Three.js ^0.170. +- Node 22 or newer for the CLI. +- A WebGPU-capable browser at runtime: Chromium-based, Safari Technology Preview, or Firefox Nightly with the flag. +- React ^19 and Three.js ^0.170. Detailed per-package changelogs live in the repo: [`packages/shaders/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/shaders/CHANGELOG.md), [`packages/shaders-react/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/shaders-react/CHANGELOG.md), [`packages/shaders-cli/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/shaders-cli/CHANGELOG.md). diff --git a/packages/shaders-cli/CHANGELOG.md b/packages/shaders-cli/CHANGELOG.md index 97168bc5..3f60daa4 100644 --- a/packages/shaders-cli/CHANGELOG.md +++ b/packages/shaders-cli/CHANGELOG.md @@ -1,68 +1,70 @@ # @mattermix/shaders-cli -## 3.9.0 +> Versions 0.18.0 and below shipped as `@lovo/matter-cli` before the project moved to the mattermix org. Releases 1.0.0 through 3.9.0 from that history are renumbered here as 0.7.0 through 0.18.0. -## 3.8.0 +## 0.18.0 + +## 0.17.0 ### Minor Changes -- 5086b6c: Add Blobs: soft gooey metaballs that drift around the center, merging and splitting as they meet. Up to 20 blobs with per-blob size variation, a fractional animatable count, softness from crisp gel to mist, depth shading along the color ramp, and a transparent background so the goo stacks over any other layer. Install with `matter add blobs`. +- 5086b6c: Add Blobs, soft gooey metaballs that drift around the center, merging and splitting as they meet. Up to 20 blobs, with per-blob size variation, a fractional animatable count, softness running from crisp gel to mist, depth shading along the color ramp, and a transparent background so the goo stacks over any other layer. Install it with `shaders-cli add blobs`. ### Patch Changes -- 680baef: Capture posters on the WebGPU backend. Headless Chromium silently fell back to WebGL2, and hash-driven shaders lay out differently per backend, so posters for components like Voronoi and Blobs never matched what the live shader shows. The poster command now launches Chromium with WebGPU enabled (ANGLE Metal on macOS), falling back to WebGL2 only where WebGPU genuinely can't initialize. +- 680baef: Capture posters on the WebGPU backend. Headless Chromium silently fell back to WebGL2, and hash-driven shaders lay out differently per backend, so posters for components like Voronoi and Blobs never matched what the live shader shows. The `poster` command now launches Chromium with WebGPU enabled, through ANGLE Metal on macOS, and falls back to WebGL2 only where WebGPU genuinely cannot initialize. -## 3.7.0 +## 0.16.0 ### Minor Changes -- 830ceae: Add FractalNoise: a layered multi-octave noise background with a style dial running from soft clouds through folded smoke billows to crisp vein networks, octave and detail dials for how much fine grain shows, and the shared ramp shaping set (stops, contrast, balance, softness, colorSpace, hueInterpolation). Install with `matter add fractal-noise`. +- 830ceae: Add FractalNoise, a layered multi-octave noise background. Its style dial runs from soft clouds through folded smoke billows to crisp vein networks, octave and detail dials set how much fine grain shows, and it takes the shared ramp shaping props: `stops`, `contrast`, `balance`, `softness`, `colorSpace`, and `hueInterpolation`. Install it with `shaders-cli add fractal-noise`. -## 3.6.0 +## 0.15.0 ### Minor Changes -- 0a26708: Add Voronoi: a cellular mosaic of colored panes around drifting seed points, cut by constant-width borders, like backlit stained glass. Each cell picks its color from `stops` by a stable per-cell random; `steps` posterizes per palette segment, so 1 snaps every cell to exactly your stop colors and higher values add blends between neighboring stops. `shading` deepens each pane toward its borders along the ramp, following the cell's polygon rather than circling its seed point, and `glow` adds the cell's own color back as light hugging the borders. The glow is additive, so bright panes read as lit rather than painted. Seeds glide on sine orbits at one shared frequency with per-cell random phases: `irregularity` scatters their anchors (0 is a perfect grid), `drift` sets the orbit radius, and anchors only scatter within the room the orbit leaves free, so seeds never leave their cells and the borders stay glitch-free at any drift. `colorSpace`/`hueInterpolation` govern the ramp and the border blend, and every numeric dial accepts an animation signal. +- 0a26708: Add Voronoi, a cellular mosaic of colored panes around drifting seed points, cut by constant-width borders, like backlit stained glass. Each cell picks its color from `stops` by a stable per-cell random. `steps` posterizes per palette segment, so 1 snaps every cell to exactly your stop colors and higher values add blends between neighboring stops. `shading` deepens each pane toward its borders along the ramp, following the cell's polygon rather than circling its seed point, and `glow` adds the cell's own color back as light hugging the borders. The glow is additive, so bright panes read as lit rather than painted. Seeds glide on sine orbits at one shared frequency with per-cell random phases: `irregularity` scatters their anchors, where 0 is a perfect grid, and `drift` sets the orbit radius. Anchors only scatter within the room the orbit leaves free, so seeds never leave their cells and the borders stay glitch-free at any drift. `colorSpace` and `hueInterpolation` govern the ramp and the border blend, and every numeric dial accepts an animation signal. -## 3.5.0 +## 0.14.0 -## 3.4.0 +## 0.13.0 ### Minor Changes -- 6c711d6: Add ConicGradient: a color sweep around a center point, following CSS `conic-gradient` conventions. The sweep runs clockwise from 12 o'clock and `angle` rotates it clockwise, the opposite direction from LinearGradient and RadialGradient's counterclockwise `angle`. Stop positions auto-space when omitted, and the default palette repeats its first color as its last stop so the wheel closes without a seam; palettes that don't will show a hard edge where the sweep wraps. `repeat` above 1 turns the sweep into a pinwheel of sectors, and `speed` spins the whole thing, one full rotation per second at 1 with `repeat` at 1. Interpolation goes through the shared `colorSpace`/`hueInterpolation` props, defaulting to oklab. -- 6c711d6: Add GodRays: soft rays of light streaming from an origin point, drawn as the product of two flowing noise fields so the beams flicker and drift instead of sweeping past like a rigid fan. Each color in `colors` (2 to 5) gets its own decorrelated ray layer, later colors finer-textured so they read as deeper planes, and the layers add their light over a transparent background, so stack the component above a dark layer in the scene. `center`, `angle`, `spread`, and `radius` aim and size the fan; the default parks the source just above the top edge with the cone wide open, so the frame does the cropping. `density` sets how many rays fit around a revolution, `diffusion` runs them from distinct beams to a soft wash, `patchiness` chops them into drifting dashes, and `glowRadius`/`glowIntensity` put a bright disc at the source. Every dial accepts an animation signal. -- 6c711d6: Add `repeat` to LinearGradient: how many times the stops run across the gradient's span. The default of 1 keeps the existing single pass; above 1 the pattern tiles past both ends, so stripes run edge to edge at any angle. Each pass snaps back to the first stop, so match your first and last stops unless you want a visible edge at every stripe boundary. `speed` changes character with it: a single pass keeps the existing back-and-forth drift, while repeated stripes march steadily in the angle's direction. Values at or below 1 render as a single pass. Accepts a static value or an animation signal. +- 6c711d6: Add ConicGradient, a color sweep around a center point that follows CSS `conic-gradient` conventions. The sweep runs clockwise from 12 o'clock and `angle` rotates it clockwise, the opposite direction from LinearGradient and RadialGradient's counterclockwise `angle`. Stop positions auto-space when omitted, and the default palette repeats its first color as its last stop so the wheel closes without a seam. A palette that doesn't repeat it shows a hard edge where the sweep wraps. `repeat` above 1 turns the sweep into a pinwheel of sectors, and `speed` spins the whole thing, one full rotation per second at 1 with `repeat` at 1. Interpolation goes through the shared `colorSpace` and `hueInterpolation` props, defaulting to oklab. +- 6c711d6: Add GodRays, soft rays of light streaming from an origin point, drawn as the product of two flowing noise fields so the beams flicker and drift instead of sweeping past like a rigid fan. Each of the 2 to 5 colors in `colors` gets its own decorrelated ray layer, and later colors are finer-textured so they read as deeper planes. The layers add their light over a transparent background, so stack the component above a dark layer in the scene. `center`, `angle`, `spread`, and `radius` aim and size the fan, and the default parks the source just above the top edge with the cone wide open, so the frame does the cropping. `density` sets how many rays fit around a revolution, `diffusion` runs them from distinct beams to a soft wash, `patchiness` chops them into drifting dashes, and `glowRadius` and `glowIntensity` put a bright disc at the source. Every dial accepts an animation signal. +- 6c711d6: Add `repeat` to LinearGradient, which sets how many times the stops run across the gradient's span. The default of 1 keeps the existing single pass. Above 1 the pattern tiles past both ends, so stripes run edge to edge at any angle. Each pass snaps back to the first stop, so match your first and last stops unless you want a visible edge at every stripe boundary. `speed` changes character with it: a single pass keeps the existing back-and-forth drift, while repeated stripes march steadily in the angle's direction. Values at or below 1 render as a single pass. Accepts a static value or an animation signal. -## 3.3.0 +## 0.12.0 ### Patch Changes -- 37a7367: Fix `matter add` installing components that don't compile. Every component is split across a wrapper and a shader, and all but `grain` also import helpers from `utils/color.ts`, but a registry entry only ever named one file — so `matter add radial-gradient` wrote a wrapper importing `./shader` and `../utils/color` and left both behind. Every component has been broken this way since the first one shipped. Registry entries now carry a `files` list covering the whole set, and `add` writes all of it. A file already on disk holding exactly what would be written is skipped rather than treated as a conflict, so adding a second component that shares `utils/color.ts` no longer fails on a file the CLI wrote itself; one that has diverged still stops the install and asks for `--force`. `add` also stops trusting a remote index about where its files should land: it refuses any registry path that resolves outside the configured components directory, whether by `../` segments or through a symlink, and refuses to write to a target that is itself a symbolic link. Content comparison now ignores line-ending style, so a Windows checkout with `core.autocrlf` no longer reports its own files as modified. +- 37a7367: Fix `shaders-cli add` installing components that don't compile. Every component is split across a wrapper and a shader, and all but `grain` also import helpers from `utils/color.ts`, but a registry entry only ever named one file. `shaders-cli add radial-gradient` wrote a wrapper importing `./shader` and `../utils/color` and left both behind, and every component had been broken this way since the first one shipped. Registry entries now carry a `files` list covering the whole set, and `add` writes all of it. A file already on disk holding exactly what would be written is skipped rather than treated as a conflict, so adding a second component that shares `utils/color.ts` no longer fails on a file the CLI wrote itself. A file that has diverged still stops the install and asks for `--force`. `add` also stops trusting a remote index about where its files should land. It refuses any registry path that resolves outside the configured components directory, whether through `../` segments or a symlink, and it refuses to write to a target that is itself a symbolic link. Content comparison now ignores line-ending style, so a Windows checkout with `core.autocrlf` no longer reports its own files as modified. -## 3.2.1 +## 0.11.1 -## 3.2.0 +## 0.11.0 -## 3.1.0 +## 0.10.0 ### Minor Changes -- b7c6b53: Aurora rebuilt from the ground up as a reference-shaped raymarch (breaking, pre-1.0): triangle-noise fbm field, 60 depth slices with per-pixel jitter (banding fixes), depth-indexed `stops` ramp so near and far ribbons glow different colors, and smoother drift-free motion. Breaking: `drift`, `direction`, and `density` props are removed; `falloff` is now a screen-space reveal (1 fills the canvas, 0 hides the curtain). Re-fetch the aurora template to upgrade; existing copies keep working as-is. +- b7c6b53: Rebuild Aurora as a reference-shaped raymarch. This is a breaking change before 1.0. The field is triangle-noise fbm over 60 depth slices with per-pixel jitter, which fixes the banding, and a depth-indexed `stops` ramp gives near and far ribbons different colors. The motion is smoother and no longer drifts. The `drift`, `direction`, and `density` props are removed, and `falloff` is now a screen-space reveal, where 1 fills the canvas and 0 hides the curtain. Re-fetch the aurora template to upgrade. Existing copies keep working as-is. -## 3.0.0 +## 0.9.0 ### Minor Changes -- 76dd33d: Aurora is rebuilt as a raymarched volumetric sky-band (breaking, pre-1.0): curtains accumulate translucent emission over ~40 slices, giving soft edges, filament structure, and parallax depth. The `layers: AuroraLayer[]` prop is removed — color now comes from an altitude ramp via `stops: ColorStop[]` (LinearGradient convention), plus new `colorSpace`/`hueInterpolation` props. `driftX`/`driftY` collapse into `drift` (altitude-sheared travel) and `densityX`/`densityY` into `density`. Re-fetch the aurora template to upgrade; existing copies keep working as-is. +- 76dd33d: Rebuild Aurora as a raymarched volumetric sky-band. This is a breaking change before 1.0. Curtains accumulate translucent emission over roughly 40 slices, which gives soft edges, filament structure, and parallax depth. The `layers: AuroraLayer[]` prop is removed, and color now comes from an altitude ramp through `stops: ColorStop[]`, following the LinearGradient convention, plus the new `colorSpace` and `hueInterpolation` props. `driftX` and `driftY` collapse into `drift`, an altitude-sheared travel, and `densityX` and `densityY` collapse into `density`. Re-fetch the aurora template to upgrade. Existing copies keep working as-is. -## 2.0.0 +## 0.8.0 ### Patch Changes -- `poster` gains a `--background ` option to composite the shader onto a given CSS color before capture (used for transparent shaders like Aurora). Defaults to the harness background when omitted. +- `poster` gains a `--background ` option, which composites the shader onto a given CSS color before capture. Use it for transparent shaders like Aurora. It defaults to the harness background when omitted. -## 1.0.0 +## 0.7.0 ## 0.6.0 @@ -70,15 +72,15 @@ ### Minor Changes -- 0299ddb: Rename ambiguous CLI flags and the config key to spelled-out names (BREAKING, pre-1.0): +- 0299ddb: Rename ambiguous CLI flags and the config key to spelled-out names. This is a breaking change before 1.0. - - `list`/`add`/`update`: `--ref` → `--reference` + - `list`, `add`, and `update`: `--ref` → `--reference` - `poster`: `--from` → `--source`, `--out` → `--output`, `--type` → `--format`, `--export` → `--export-name`, `--time` → `--capture-delay` - - `shaders.config.json`: removed the `tsx` boolean key (it was validated but never read by any command) + - `shaders.config.json`: the `tsx` boolean key is removed. It was validated but never read by any command. - Kept: `--registry`, `--quality`, `--width`, `--height`, `--force`, and the config keys `componentsDir`, `registryUrl`, `aliases`. + Kept: `--registry`, `--quality`, `--width`, `--height`, `--force`, and the config keys `componentsDir`, `registryUrl`, and `aliases`. - Migration: update any scripts that pass the old flags. You can delete the `tsx` key from your `shaders.config.json` if present — it is no longer used (unknown keys are ignored). Re-running `shaders-cli init` regenerates a config without it. + **Migration:** update any script that passes the old flags. Delete the `tsx` key from your `shaders.config.json` if it is present, because nothing reads it and unknown keys are ignored. Re-running `shaders-cli init` regenerates a config without it. ## 0.4.1 @@ -90,20 +92,18 @@ ### Minor Changes -- No API changes. Bumped alongside `@mattermix/shaders` 0.2.0 because the three packages ship as a fixed version group. See [`@mattermix/shaders`'s 0.2.0 changelog](../matter/CHANGELOG.md#020) for the engine-level breaking change. +- No API changes. This package bumped alongside `@mattermix/shaders` 0.2.0 because the three packages ship as a fixed version group. See [`@mattermix/shaders`'s 0.2.0 changelog](../shaders/CHANGELOG.md#020) for the engine-level breaking change. ## 0.1.0 ### Minor Changes -- Initial public release of Matter — React shader components on WebGPU + Three.js TSL. - - **`@mattermix/shaders`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. - - **`@mattermix/shaders-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). +- Initial public release. React shader components on WebGPU and Three.js TSL. - **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. + - `@mattermix/shaders` is the framework-agnostic engine: TSL primitives such as `fbm`, `voronoi`, `colorRamp`, and `quantize`, a WebGPU renderer wrapper, and a scheduler that watches visibility and intersection. + - `@mattermix/shaders-react` is the React binding: `` for the shared canvas, `useShaderMaterial` for r3f, and the `useCursor` and `useScroll` input hooks. + - `@mattermix/shaders-cli` is the shadcn-style copy-paste CLI, with `init`, `list`, `add`, and `update`. The default registry tracks the CLI's published version tag (`v0.1.0`), so component code is stable per release. - **v1 components** (via `shaders-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. + Six components ship through `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, and `waves`. Each component is yours to edit after copy-in. - **Requirements:** Node 22+ for the CLI. WebGPU-capable browser (Chromium-based, Safari TP, Firefox Nightly with the flag). Three.js ^0.170. React ^19. + Requirements: Node 22 or newer for the CLI, a WebGPU-capable browser (Chromium-based, Safari Technology Preview, or Firefox Nightly with the flag), Three.js ^0.170, and React ^19. diff --git a/packages/shaders-cli/package.json b/packages/shaders-cli/package.json index 4384c5d5..98023ab8 100644 --- a/packages/shaders-cli/package.json +++ b/packages/shaders-cli/package.json @@ -1,6 +1,6 @@ { "name": "@mattermix/shaders-cli", - "version": "3.9.0", + "version": "0.18.0", "description": "CLI for Shaders — copy-paste components from the registry into your project.", "keywords": [ "cli", diff --git a/packages/shaders-react/CHANGELOG.md b/packages/shaders-react/CHANGELOG.md index de9fdd7e..6034c71b 100644 --- a/packages/shaders-react/CHANGELOG.md +++ b/packages/shaders-react/CHANGELOG.md @@ -1,66 +1,68 @@ # @mattermix/shaders-react -## 3.9.0 +> Versions 0.18.0 and below shipped as `@lovo/matter-react` before the project moved to the mattermix org. Releases 1.0.0 through 3.9.0 from that history are renumbered here as 0.7.0 through 0.18.0. -## 3.8.0 +## 0.18.0 -## 3.7.0 +## 0.17.0 -## 3.6.0 +## 0.16.0 + +## 0.15.0 ### Patch Changes -- 0a26708: Reset the CPU-side phase accumulators at the scene's first painted frame, alongside the existing renderer-clock rewind. The accumulators integrate wall-clock deltas from mount, so the renderer's init latency used to carry into the first visible pose. A poster captured at t=0 never quite matched the frame that replaced it, and the slower the device, the bigger the jump. Sharp-geometry shaders made the drift obvious; now the first frame anyone sees is genuinely t=0. +- 0a26708: Reset the CPU-side phase accumulators at the scene's first painted frame, alongside the existing renderer-clock rewind. The accumulators integrate wall-clock deltas from mount, so the renderer's init latency used to carry into the first visible pose. A poster captured at t=0 never quite matched the frame that replaced it, and the slower the device, the bigger the jump. Shaders with sharp geometry made the drift obvious. The first frame anyone sees is now genuinely t=0. -## 3.5.0 +## 0.14.0 ### Minor Changes -- 4e3feab: Add useBasePassUv: post-process overlays can register a transform that changes where the scene texture is sampled. Color passes only see each pixel's finished color, so an effect that needs to resample the scene (like Dither's pixelation, which snaps the sample coordinate to a cell grid) had no way to work. UV transforms compose in mount order, same as usePostProcessPass, and scenes with none registered render exactly as before. +- 4e3feab: Add `useBasePassUv`, which lets a post-process overlay register a transform that changes where the scene texture is sampled. A color pass only sees each pixel's finished color, so an effect that needs to resample the scene, such as Dither's pixelation snapping the sample coordinate to a cell grid, had no way to work. UV transforms compose in mount order, the same as `usePostProcessPass`, and a scene with none registered renders exactly as before. -## 3.4.0 +## 0.13.0 ### Minor Changes -- b97d558: Add `useAnimatableSpeed`, which turns a `speed` prop into a phase uniform accumulated on the CPU (`phase += speed * min(delta, 0.1)` each frame; the cap keeps the first frame after a hidden tab from replaying the whole gap). The shaders previously computed motion as elapsed time multiplied by speed, so any speed change (a slider drag or an animation signal) re-evaluated the whole elapsed history at the new rate and snapped the pattern; after 15 seconds on screen, the smallest slider step moved the canvas 41x more than a frame of steady motion. All eight animated registry components now read the accumulated phase instead. The reduced-motion time scale is applied inside the accumulator, so a mid-session `prefers-reduced-motion` change also shifts tempo smoothly instead of jumping. +- b97d558: Add `useAnimatableSpeed`, which turns a `speed` prop into a phase uniform accumulated on the CPU. Every frame it adds `speed * min(delta, 0.1)`, and the cap keeps the first frame after a hidden tab from replaying the whole gap. The shaders previously computed motion as elapsed time multiplied by speed, so any speed change, whether a slider drag or an animation signal, re-evaluated the whole elapsed history at the new rate and snapped the pattern. After 15 seconds on screen, the smallest slider step moved the canvas 41x more than a frame of steady motion. All eight animated registry components now read the accumulated phase instead. The accumulator applies the reduced-motion time scale, so a mid-session `prefers-reduced-motion` change also shifts tempo smoothly instead of jumping. ### Patch Changes -- 263403e: Add a phase-reset channel to `FrameScheduler`: accumulators register a listener with `onPhaseReset()`, and `resetPhases()` rewinds them all to zero. Accumulated phase is wall-clock history, so a harness that needs a reproducible frame (like the docs visual tests) has to rewind it together with the renderer clock. `useAnimatableSpeed` registers its phase uniform on the channel, which is what keeps a quantized shader like grain rendering the same seed on every machine. +- 263403e: Add a phase-reset channel to `FrameScheduler`. Accumulators register a listener with `onPhaseReset()`, and `resetPhases()` rewinds them all to zero. Accumulated phase is wall-clock history, so a harness that needs a reproducible frame, such as the docs visual tests, has to rewind it together with the renderer clock. `useAnimatableSpeed` registers its phase uniform on the channel, which keeps a quantized shader like grain rendering the same seed on every machine. -## 3.3.0 +## 0.12.0 ### Minor Changes -- 6d24f42: Add `useAnimatablePoint`, a vec2 counterpart to `useAnimatableUniform`: pass it an `[x, y]` pair or an animation signal and it keeps a point uniform current. `center` now accepts a signal on LinearGradient, RadialGradient, DotField, and Vignette. LinearGradient's `angle` animates now too. Its direction vector used to be precomputed on the CPU inside an effect, so a signal had nothing to reach; the shader now derives the direction from a scalar angle uniform. Also fixed: DotField and Vignette skipped the render request when `center` changed, so dragging it on an idle scene (speed 0) changed nothing until something else forced a frame. And swapping one animation signal for another now seeds the uniform from the new signal's current value instead of waiting for its first tick, in both hooks. +- 6d24f42: Add `useAnimatablePoint`, a vec2 counterpart to `useAnimatableUniform`. Pass it an `[x, y]` pair or an animation signal and it keeps a point uniform current. `center` now accepts a signal on LinearGradient, RadialGradient, DotField, and Vignette, and LinearGradient's `angle` animates too. LinearGradient's direction vector used to be precomputed on the CPU inside an effect, where a signal had nothing to reach, so the shader now derives the direction from a scalar angle uniform. Two fixes ship with it. DotField and Vignette skipped the render request when `center` changed, so dragging it on an idle scene at `speed={0}` changed nothing until something else forced a frame. And swapping one animation signal for another now seeds the uniform from the new signal's current value instead of waiting for its first tick, in both hooks. -## 3.2.1 +## 0.11.1 ### Patch Changes -- 213518d: Fix animatable props doing nothing on a scene that has stopped rendering. `useAnimatableUniform` wrote the new value into its uniform but never told the frame scheduler to draw, so any component that had voted itself static — a gradient at `speed={0}`, say — would accept a prop change or a MotionValue tick and show none of it. On the docs SimplexNoise page this meant Scale, Contrast, Balance and Softness all went dead the moment speed reached 0. Every write now pokes the scheduler, which is a no-op unless the scene is genuinely idle. +- 213518d: Fix animatable props doing nothing on a scene that has stopped rendering. `useAnimatableUniform` wrote the new value into its uniform but never told the frame scheduler to draw, so a component that had voted itself static, a gradient at `speed={0}` for example, accepted a prop change or a MotionValue tick and showed none of it. On the docs SimplexNoise page, Scale, Contrast, Balance, and Softness all went dead the moment speed reached 0. Every write now pokes the scheduler, which is a no-op unless the scene is genuinely idle. -## 3.2.0 +## 0.11.0 ### Minor Changes -- 0d924ce: Adds `@mattermix/shaders-react/gamut`, a second entry point carrying `useDisplayGamut` with no path to three. The root entry re-exports `ShaderScene`, which imports `three/webgpu`, and that reads `self` at module load, so a server-rendered page that only wanted to know whether the display can show P3 had to load the renderer to ask. The hook itself never needed it. +- 0d924ce: Add `@mattermix/shaders-react/gamut`, a second entry point carrying `useDisplayGamut` with no path to three. The root entry re-exports `ShaderScene`, which imports `three/webgpu`, and that reads `self` at module load, so a server-rendered page that only wanted to know whether the display can show P3 had to load the renderer to ask. The hook itself never needed it. - Same idea as `@mattermix/shaders/color`, and this package already shipped `./poster` on the same reasoning. Both subpaths now have a test that imports them under a bare Node environment, so three creeping back into either one fails there rather than in someone's server render. + Same reasoning as `@mattermix/shaders/color`, and as the `./poster` subpath this package already shipped. Both subpaths now have a test that imports them under a bare Node environment, so three creeping back into either one fails there rather than in someone's server render. -## 3.1.0 +## 0.10.0 -## 3.0.0 +## 0.9.0 ### Major Changes -- 1b0bbcb: Remove `ShaderScene`'s `fallback` prop (breaking). Use the new `ShaderPoster` component from `@mattermix/shaders-react/poster` instead — it renders in the initial HTML (SSR-safe, no three import) and dismisses when the wrapped `ShaderScene` paints its first frame. +- 1b0bbcb: Remove `ShaderScene`'s `fallback` prop. This is a breaking change. Use the new `ShaderPoster` component from `@mattermix/shaders-react/poster` instead. It renders in the initial HTML, with no three import, and dismisses when the wrapped `ShaderScene` paints its first frame. -## 2.0.0 +## 0.8.0 -- `ShaderScene` gains an `onFirstPaint?: () => void` prop, fired once when the shader's first frame is on screen. Lets consumers dismiss a server-rendered poster without relying on the shader being opaque. +- `ShaderScene` gains an `onFirstPaint?: () => void` prop, fired once when the shader's first frame is on screen. Consumers can dismiss a server-rendered poster without relying on the shader being opaque. -## 1.0.0 +## 0.7.0 ## 0.6.0 @@ -68,13 +70,13 @@ ### Minor Changes -- 35274c3: Rename ambiguous `@mattermix/shaders-react` public exports to clearer names (BREAKING, pre-1.0): +- 35274c3: Rename ambiguous `@mattermix/shaders-react` public exports to clearer names. This is a breaking change before 1.0. - `useOverlayPass` → `usePostProcessPass` (and the paired type `OverlayTransform` → `PostProcessTransform`) - `useStaticHint` → `useStaticSceneHint` - `MonitorAnchor` (type) → `ShaderMonitorAnchor` - Migration: update imports and call sites to the new names. Behavior is unchanged. + **Migration:** update imports and call sites to the new names. Behavior is unchanged. ## 0.4.1 @@ -86,17 +88,17 @@ New primary names: `FrameScheduler`, `GpuRenderer`, `GpuBackend` (`@mattermix/shaders`); `ShaderScene`, `ShaderSceneProps`, `ShaderContext`, `ShaderContextValue`, `useShaderContext`, `ShaderMonitor`, `ShaderMonitorProps`, `AnimatableSignal` (`@mattermix/shaders-react`). - Old names (`MatterScheduler`, `MatterRenderer`, `MatterBackend`, `MatterScene`, `MatterSceneProps`, `MatterContext`, `MatterContextValue`, `useMatterContext`, `MatterMonitor`, `MatterMonitorProps`, `MatterSignal`, `MatterBackend`) are deprecated with `@deprecated` JSDoc and continue to work. They will be removed no earlier than 0.5.0. + The old names `MatterScheduler`, `MatterRenderer`, `MatterBackend`, `MatterScene`, `MatterSceneProps`, `MatterContext`, `MatterContextValue`, `useMatterContext`, `MatterMonitor`, `MatterMonitorProps`, and `MatterSignal` carry `@deprecated` JSDoc and continue to work. They will be removed no earlier than 0.5.0. - **Migration:** Replace old names with new in your imports and JSX. A one-pass find-and-replace is sufficient — no behavioral changes. + **Migration:** replace the old names with the new ones in your imports and JSX. A one-pass find-and-replace is enough. Behavior is unchanged. ## 0.3.0 ### Minor Changes -- c4cbb52: Add the overlay-component category. `MatterScene` now drives its render via `three/webgpu`'s `PostProcessing` pipeline so child components can register chained TSL transforms instead of each owning their own material draw. +- c4cbb52: Add the overlay-component category. `MatterScene` now drives its render through `three/webgpu`'s `PostProcessing` pipeline, so child components register chained TSL transforms instead of each owning a material draw. - **New: `useOverlayPass(transform, deps)` hook** + The new hook is `useOverlayPass(transform, deps)`: ```ts import { useAnimatableUniform, useOverlayPass } from '@mattermix/shaders-react'; @@ -111,13 +113,14 @@ } ``` - Mount the component inside any `` and it composes onto the pipeline; multiple overlays chain in mount order. Uniforms captured inside `transform` update in place and don't need to be in `deps` — only put structural changes (mode toggles, etc.) in `deps` so the transform gets re-registered. + Mount the component inside any `` and it composes onto the pipeline. Multiple overlays chain in mount order. Uniforms captured inside `transform` update in place and don't need to be in `deps`. Put only structural changes there, such as a mode toggle, so the transform gets re-registered. + + Two registry components ship with it, delivered through `@mattermix/shaders-cli` copy-paste: - **Registry-side ships (delivered via `@mattermix/shaders-cli` copy-paste):** + - ``, an additive or subtractive grain overlay. + - ``, radial edge darkening, aspect-corrected so the mask is a circle on widescreen. - - `` — additive or subtractive grain overlay. - - `` — radial edge darkening, aspect-corrected so the mask is a circle on widescreen. - - **Breaking:** `` no longer accepts `grain` / `grainSpeed` props. Stack `` as a sibling inside `` instead. Existing copies pulled before this release keep working; new pulls / CLI refreshes pick up the new shape. The MeshGradient docs page has the new pattern. + **Breaking:** `` no longer accepts the `grain` and `grainSpeed` props. Stack `` as a sibling inside `` instead. Copies pulled before this release keep working, and a new pull or CLI refresh picks up the new shape. The MeshGradient docs page shows the new pattern. ### Patch Changes @@ -128,20 +131,18 @@ ### Minor Changes -- No API changes. Bumped alongside `@mattermix/shaders` 0.2.0 because the three packages ship as a fixed version group. See [`@mattermix/shaders`'s 0.2.0 changelog](../matter/CHANGELOG.md#020) for the engine-level breaking change. +- No API changes. This package bumped alongside `@mattermix/shaders` 0.2.0 because the three packages ship as a fixed version group. See [`@mattermix/shaders`'s 0.2.0 changelog](../shaders/CHANGELOG.md#020) for the engine-level breaking change. ## 0.1.0 ### Minor Changes -- Initial public release of Matter — React shader components on WebGPU + Three.js TSL. - - **`@mattermix/shaders`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. - - **`@mattermix/shaders-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). +- Initial public release. React shader components on WebGPU and Three.js TSL. - **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. + - `@mattermix/shaders` is the framework-agnostic engine: TSL primitives such as `fbm`, `voronoi`, `colorRamp`, and `quantize`, a WebGPU renderer wrapper, and a scheduler that watches visibility and intersection. + - `@mattermix/shaders-react` is the React binding: `` for the shared canvas, `useShaderMaterial` for r3f, and the `useCursor` and `useScroll` input hooks. + - `@mattermix/shaders-cli` is the shadcn-style copy-paste CLI, with `init`, `list`, `add`, and `update`. The default registry tracks the CLI's published version tag (`v0.1.0`), so component code is stable per release. - **v1 components** (via `shaders-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. + Six components ship through `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, and `waves`. Each component is yours to edit after copy-in. - **Requirements:** Node 22+ for the CLI. WebGPU-capable browser (Chromium-based, Safari TP, Firefox Nightly with the flag). Three.js ^0.170. React ^19. + Requirements: Node 22 or newer for the CLI, a WebGPU-capable browser (Chromium-based, Safari Technology Preview, or Firefox Nightly with the flag), Three.js ^0.170, and React ^19. diff --git a/packages/shaders-react/package.json b/packages/shaders-react/package.json index a010e3e3..0c812e14 100644 --- a/packages/shaders-react/package.json +++ b/packages/shaders-react/package.json @@ -1,6 +1,6 @@ { "name": "@mattermix/shaders-react", - "version": "3.9.0", + "version": "0.18.0", "description": "React binding for Shaders — ShaderScene, useShaderMaterial, input hooks.", "keywords": [ "components", diff --git a/packages/shaders/CHANGELOG.md b/packages/shaders/CHANGELOG.md index 7116e5eb..f224ce77 100644 --- a/packages/shaders/CHANGELOG.md +++ b/packages/shaders/CHANGELOG.md @@ -1,74 +1,76 @@ # @mattermix/shaders -## 3.9.0 +> Versions 0.18.0 and below shipped as `@lovo/matter` before the project moved to the mattermix org. Releases 1.0.0 through 3.9.0 from that history are renumbered here as 0.7.0 through 0.18.0. + +## 0.18.0 ### Minor Changes -- 2cb44b1: colorRamp stops can now be node-driven: `position` accepts `number | TSLNode` and node-valued `color` is a pinned-down part of the contract, so uniforms can drive ramp colors and positions live with no material rebuild (stop count stays structural). Literal-position ramps compile exactly as before. Node-driven stops that coincide or cross at runtime collapse to a hard step at the stop position. The `colorSpaces` conversion registry (fromLinear/toLinear per supported space) is now exported. +- 2cb44b1: `colorRamp` takes node-driven stops. `position` accepts `number | TSLNode`, and a node-valued `color` is now part of the contract, so uniforms drive ramp colors and positions live with no material rebuild. Stop count stays structural. Ramps with literal positions compile exactly as before. Node-driven stops that coincide or cross at runtime collapse to a hard step at the stop position. This release also exports the `colorSpaces` conversion registry, which holds a `fromLinear` and a `toLinear` for every supported space. -## 3.8.0 +## 0.17.0 ### Minor Changes -- c6b672a: Add the `metaballs` primitive: a summed metaball field over up to 20 blob centers roaming the origin on hash-phased sine paths. Returns the field strength (threshold it for gooey merged silhouettes) and a field-weighted per-blob blend value for color ramps. Count (fractional counts grow the last blob in smoothly), size, size variation, spread, time, and seed all accept TSL nodes, so every dial can ride a uniform. +- c6b672a: Add the `metaballs` primitive, a summed metaball field over up to 20 blob centers that roam the origin on hash-phased sine paths. It returns the field strength, which you threshold for gooey merged silhouettes, and a field-weighted per-blob blend value for color ramps. Count, size, size variation, spread, time, and seed all accept TSL nodes, so every dial can ride a uniform. A fractional count grows the last blob in smoothly. -## 3.7.0 +## 0.16.0 ### Minor Changes -- 152c14b: Widen `fractalNoise` with turbulence folding and live gain: a new `fold` option ('none' | 'smooth' | 'sharp') — 'smooth' and 'sharp' fold each octave with abs() before summing, squared for soft billows or square-rooted for crisp veins, while 'none' keeps the raw signed noise — and `gain` now also accepts a TSL node, computing per-octave amplitude as pow(gain, i) on the GPU so a uniform-driven detail dial glides without rebuilding the material. Folded output is normalized to roughly 0..1 ('none' stays roughly -1..1). +- 152c14b: `fractalNoise` gains turbulence folding and live gain. The new `fold` option takes 'none', 'smooth', or 'sharp'. 'smooth' and 'sharp' fold each octave with `abs()` before summing, squared for soft billows or square-rooted for crisp veins, and 'none' keeps the raw signed noise. `gain` now also accepts a TSL node and computes per-octave amplitude as `pow(gain, i)` on the GPU, so a uniform-driven detail dial glides without rebuilding the material. Folded output is normalized to roughly 0..1, and 'none' stays roughly -1..1. -## 3.6.0 +## 0.15.0 ### Minor Changes -- 0a26708: Add `voronoiCells`: the two-pass cell Voronoi (Inigo Quilez's ldl3W8) as a Tier 2 primitive. It returns three fields per pixel: `edgeDistance` (exact distance to the nearest cell border, via perpendicular bisectors, which is what makes constant-width borders possible), `seedOffset` (vector to the cell's seed), and `hash` (a stable per-cell random for coloring). Options animate the field: `time` is a pre-integrated phase, `jitter` scatters seed anchors off the grid, and `drift` orbits each seed within the room its cell offers, so the 3x3 neighbor search stays valid at any amplitude. The sibling distance-only `voronoi` (Worley) primitive is unchanged. +- 0a26708: Add `voronoiCells`, the two-pass cell Voronoi from Inigo Quilez's ldl3W8, as a Tier 2 primitive. It returns three fields per pixel: `edgeDistance`, the exact distance to the nearest cell border measured through perpendicular bisectors, which is what makes constant-width borders possible; `seedOffset`, the vector to the cell's seed; and `hash`, a stable per-cell random for coloring. Three options animate the field. `time` is a pre-integrated phase, `jitter` scatters seed anchors off the grid, and `drift` orbits each seed within the room its cell offers, so the 3x3 neighbor search stays valid at any amplitude. The distance-only `voronoi` (Worley) primitive is unchanged. -## 3.5.0 +## 0.14.0 ### Minor Changes -- 4e3feab: Add ditherThreshold, a single entry point for ordered-dither threshold maps: Bayer 2x2/4x4/8x8, halftone dots and lines, white noise, interleaved gradient noise, and a precomputed 64x64 blue-noise tile. The anti-banding dither() now builds on it. quantize() accepts a node for its step count (so a level count can ride a uniform) and an optional threshold argument that replaces the 0.5 rounding point. Passing a threshold map there turns a plain posterize into ordered dithering, which is how the Dither registry component uses the pair. +- 4e3feab: Add `ditherThreshold`, one entry point for ordered-dither threshold maps: Bayer 2x2, 4x4, and 8x8, halftone dots, halftone lines, white noise, interleaved gradient noise, and a precomputed 64x64 blue-noise tile. The anti-banding `dither()` now builds on it. `quantize()` accepts a node for its step count, so a level count can ride a uniform, plus an optional threshold argument that replaces the 0.5 rounding point. Pass a threshold map there to turn a plain posterize into ordered dithering, which is how the Dither registry component uses the pair. -## 3.4.0 +## 0.13.0 ### Minor Changes -- 263403e: Add a phase-reset channel to `FrameScheduler`: accumulators register a listener with `onPhaseReset()`, and `resetPhases()` rewinds them all to zero. Accumulated phase is wall-clock history, so a harness that needs a reproducible frame (like the docs visual tests) has to rewind it together with the renderer clock. `useAnimatableSpeed` registers its phase uniform on the channel, which is what keeps a quantized shader like grain rendering the same seed on every machine. +- 263403e: Add a phase-reset channel to `FrameScheduler`. Accumulators register a listener with `onPhaseReset()`, and `resetPhases()` rewinds them all to zero. Accumulated phase is wall-clock history, so a harness that needs a reproducible frame, such as the docs visual tests, has to rewind it together with the renderer clock. `useAnimatableSpeed` registers its phase uniform on the channel, which keeps a quantized shader like grain rendering the same seed on every machine. -## 3.3.0 +## 0.12.0 -## 3.2.1 +## 0.11.1 -## 3.2.0 +## 0.11.0 ### Minor Changes -- dd8f99b: Adds `@mattermix/shaders/color`, a second entry point for the CPU-side color math: `parseColorString`, the OKLab and OKLCH conversions, the gamut helpers, and the sRGB transfer functions. The root entry still exports all of them, so nothing has to move. The difference is that the subpath has no path to three, so it can be imported during a server render. The root entry cannot, because it reaches the renderer and `three/webgpu` reads `self` at module load. +- dd8f99b: Add `@mattermix/shaders/color`, a second entry point for the CPU-side color math: `parseColorString`, the OKLab and OKLCH conversions, the gamut helpers, and the sRGB transfer functions. The root entry still exports all of them, so nothing has to move. The difference is that the subpath has no path to three, so a server render can import it. The root entry cannot, because it reaches the renderer and `three/webgpu` reads `self` at module load. - `parseColorString` now throws on input it used to mangle. Components that aren't numbers ran through `parseFloat` to NaN and came back as `[NaN, NaN, NaN]`, which reached the GPU as a blank shader with a clean console. Hex is checked for format now too: it takes `#rrggbb` and `#rrggbbaa` (alpha parsed and dropped, the same way `oklch()` and `oklab()` already handle it) and throws on anything else. `#abcdefgh` used to slice its first six digits and return a confidently wrong color. + `parseColorString` now throws on input it used to mangle. Components that aren't numbers ran through `parseFloat` to NaN and came back as `[NaN, NaN, NaN]`, which reached the GPU as a blank shader with a clean console. Hex is checked for format now too. It takes `#rrggbb` and `#rrggbbaa`, parsing and dropping alpha the same way `oklch()` and `oklab()` already do, and throws on anything else. `#abcdefgh` used to slice its first six digits and return a confidently wrong color. -## 3.1.0 +## 0.10.0 -## 3.0.0 +## 0.9.0 -## 2.0.0 +## 0.8.0 ### Major Changes -- 945657f: Rework the `` component. Its props are renamed for clarity — `radius` is now `falloff` and `softness` is now `feather` — and the overlay blend gains `colorSpace` (default `oklab`) and `hueInterpolation` (default `shorter`), so the vignette can darken and tint in a chosen perceptual space rather than only in linear space. Defaults shift to `intensity` 0.3, `feather` 0.6, and a dark wide-gamut `oklch()` color. +- 945657f: Rework the `` component. `radius` is now `falloff` and `softness` is now `feather`. The overlay blend gains `colorSpace`, defaulting to `oklab`, and `hueInterpolation`, defaulting to `shorter`, so the vignette darkens and tints in a chosen perceptual space instead of only in linear space. Defaults shift to `intensity` 0.3, `feather` 0.6, and a dark wide-gamut `oklch()` color. - This is a breaking change for anyone using `radius` or `softness`, or relying on the previous linear default blend. + This breaks any code that passes `radius` or `softness`, or that relies on the previous linear default blend. -## 1.0.0 +## 0.7.0 ### Major Changes - 8d9d4ad: Rename the `filmGrain` primitive to `grain`. The `filmGrain(intensity, timeOffset?)` primitive is now exported as `grain` with - an identical signature and behavior. The Tier 1 `` component (delivered - via the CLI) is likewise renamed to ``, and its `film-grain` registry slug + an identical signature and behavior. The Tier 1 `` component, delivered + through the CLI, is renamed to ``, and its `film-grain` registry slug is now `grain`. **Migration:** one-pass find-and-replace. @@ -88,18 +90,19 @@ ### Minor Changes - 24ec05d: Add color-space-aware interpolation. `colorRamp` and the new `mixColor` primitive - accept `colorSpace` ('linear' | 'oklab' | 'oklch' | 'lch' | 'hsl' | 'hsv', - default 'oklab') and `hueInterpolation` ('shorter' | 'longer' | 'increasing' | + accept `colorSpace` ('linear', 'oklab', 'oklch', 'lch', 'hsl', or 'hsv', + default 'oklab') and `hueInterpolation` ('shorter', 'longer', 'increasing', or 'decreasing', default 'shorter'). LinearGradient, SimplexNoise, and MeshGradient - gain matching props. Foundation fix: hex colors now decode to linear-sRGB (true - color), and the LCH conversion's green coefficient was corrected. This shifts the - default appearance of those components (pre-1.0 breaking color change). + gain matching props. Two fixes underneath: hex colors now decode to linear-sRGB, + which is the true color, and the LCH conversion uses the correct green coefficient. + Both shift the default appearance of those components, a breaking color change + before 1.0. ## 0.5.0 ### Minor Changes -- c67eb98: Rename engine exports to spelled-out, domain-accurate names (breaking). +- c67eb98: Rename engine exports to spelled-out, domain-accurate names. This is a breaking change. - `fbm` → `fractalNoise` (and `FBMOptions` → `FractalNoiseOptions`) - `noise` → `simplexNoise` @@ -109,13 +112,13 @@ `TSLNode`, `voronoi`, `colorRamp`, `quantize`, `displace`, `cursorRipple`, and `grain` are unchanged. - **Migration:** one-pass find-and-replace in your imports and call sites. No behavioral changes. + **Migration:** one-pass find-and-replace in your imports and call sites. Behavior is unchanged. ## 0.4.1 ### Patch Changes -- b4ecdda: Reorganize engine source into kebab-case module folders under `inputs/`, `primitives/`, and `runtime/` (matching `matter-react` and `registry` layout). No public API changes. +- b4ecdda: Reorganize the engine source into kebab-case module folders under `inputs/`, `primitives/`, and `runtime/`, matching the `shaders-react` and `registry` layout. No public API changes. ## 0.4.0 @@ -125,15 +128,15 @@ New primary names: `FrameScheduler`, `GpuRenderer`, `GpuBackend` (`@mattermix/shaders`); `ShaderScene`, `ShaderSceneProps`, `ShaderContext`, `ShaderContextValue`, `useShaderContext`, `ShaderMonitor`, `ShaderMonitorProps`, `AnimatableSignal` (`@mattermix/shaders-react`). - Old names (`MatterScheduler`, `MatterRenderer`, `MatterBackend`, `MatterScene`, `MatterSceneProps`, `MatterContext`, `MatterContextValue`, `useMatterContext`, `MatterMonitor`, `MatterMonitorProps`, `MatterSignal`, `MatterBackend`) are deprecated with `@deprecated` JSDoc and continue to work. They will be removed no earlier than 0.5.0. + The old names `MatterScheduler`, `MatterRenderer`, `MatterBackend`, `MatterScene`, `MatterSceneProps`, `MatterContext`, `MatterContextValue`, `useMatterContext`, `MatterMonitor`, `MatterMonitorProps`, and `MatterSignal` carry `@deprecated` JSDoc and continue to work. They will be removed no earlier than 0.5.0. - **Migration:** Replace old names with new in your imports and JSX. A one-pass find-and-replace is sufficient — no behavioral changes. + **Migration:** replace the old names with the new ones in your imports and JSX. A one-pass find-and-replace is enough. Behavior is unchanged. ## 0.3.0 ### Minor Changes -- 3856367: Add `grain` primitive — hash-based, centered film grain for shader compositions. +- 3856367: Add the `grain` primitive, a hash-based, centered film grain for shader compositions. ```ts import { grain, time } from "@mattermix/shaders"; @@ -142,24 +145,24 @@ // Static grain: const grainValue = grain(uv(), 0.08); - // Twinkling grain — caller controls the shutter rate. floor() quantizes - // time to a discrete cadence; the hash is so sensitive that a continuous - // time input gives no perceptible speed control. + // Twinkling grain. The caller controls the shutter rate. floor() quantizes + // time to a discrete cadence, because the hash is so sensitive that a + // continuous time input gives no perceptible speed control. const grainValue = grain(uv(), 0.08, time.mul(speed).mul(60).floor()); material.colorNode = vec4(color.add(grainValue), 1); ``` - Output is centered around zero (mean of `length(vec2(u, v))` for uniform - `u, v ∈ [0, 1)` is ~0.765, subtracted at the recipe level) so the grain - acts as a brightness-preserving texture overlay. Subtract instead of add - at the call site for film-stock-style darkening. + Output is centered around zero, so the grain acts as a brightness-preserving texture + overlay. The mean of `length(vec2(u, v))` for uniform `u, v ∈ [0, 1)` is about 0.765, + and the recipe subtracts it. Subtract instead of add at the call site for + film-stock-style darkening. ## 0.2.0 ### Minor Changes -- Drop pure TSL re-exports from `@mattermix/shaders` public API. +- Drop pure TSL re-exports from the `@mattermix/shaders` public API. The following 15 nodes are no longer exported by `@mattermix/shaders`. Import them directly from `three/tsl`: @@ -171,27 +174,25 @@ // After (0.2.0) import { vec3, uv } from "three/tsl"; - import { time } from "@mattermix/shaders"; // still here — reduced-motion-gated + import { time } from "@mattermix/shaders"; // still here, reduced-motion-gated ``` - The Matter-owned `time` (reduced-motion gated) continues to be exported from `@mattermix/shaders` unchanged. For raw uncapped time, import from `three/tsl` directly. + `time` stays exported from `@mattermix/shaders` unchanged, because this package owns its reduced-motion gating. For raw uncapped time, import from `three/tsl` directly. - All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@mattermix/shaders` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). + The primitives this package owns (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) also stay exported unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols, or re-add the component through the CLI to pull the 0.2.0 source. - **Why:** Re-exporting pure TSL primitives provided no value beyond shared import paths. Dropping them clarifies the layer boundary — Matter ships value-add primitives; TSL provides the math. + **Why:** re-exporting pure TSL primitives bought nothing beyond shared import paths. Dropping them clarifies the layer boundary. This library ships value-add primitives, and TSL provides the math. ## 0.1.0 ### Minor Changes -- Initial public release of Matter — React shader components on WebGPU + Three.js TSL. - - **`@mattermix/shaders`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. - - **`@mattermix/shaders-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). +- Initial public release. React shader components on WebGPU and Three.js TSL. - **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. + - `@mattermix/shaders` is the framework-agnostic engine: TSL primitives such as `fbm`, `voronoi`, `colorRamp`, and `quantize`, a WebGPU renderer wrapper, and a scheduler that watches visibility and intersection. + - `@mattermix/shaders-react` is the React binding: `` for the shared canvas, `useShaderMaterial` for r3f, and the `useCursor` and `useScroll` input hooks. + - `@mattermix/shaders-cli` is the shadcn-style copy-paste CLI, with `init`, `list`, `add`, and `update`. The default registry tracks the CLI's published version tag (`v0.1.0`), so component code is stable per release. - **v1 components** (via `shaders-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. + Six components ship through `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, and `waves`. Each component is yours to edit after copy-in. - **Requirements:** Node 22+ for the CLI. WebGPU-capable browser (Chromium-based, Safari TP, Firefox Nightly with the flag). Three.js ^0.170. React ^19. + Requirements: Node 22 or newer for the CLI, a WebGPU-capable browser (Chromium-based, Safari Technology Preview, or Firefox Nightly with the flag), Three.js ^0.170, and React ^19. diff --git a/packages/shaders/package.json b/packages/shaders/package.json index 43264a35..2d779e6f 100644 --- a/packages/shaders/package.json +++ b/packages/shaders/package.json @@ -1,6 +1,6 @@ { "name": "@mattermix/shaders", - "version": "3.9.0", + "version": "0.18.0", "description": "Engine for Shaders — TSL primitives, renderer, scheduler. Framework-agnostic.", "keywords": [ "background", From 9104704c287212f6a12166537c6d44051d678d6e Mon Sep 17 00:00:00 2001 From: Hunter Garrett Date: Thu, 20 Aug 2026 21:17:49 -0400 Subject: [PATCH 2/2] docs: address CodeRabbit review feedback on PR #134 --- apps/docs/content/docs/changelog.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/changelog.mdx b/apps/docs/content/docs/changelog.mdx index 15f4d8d3..c19b6519 100644 --- a/apps/docs/content/docs/changelog.mdx +++ b/apps/docs/content/docs/changelog.mdx @@ -95,7 +95,7 @@ The shadcn-style copy-paste CLI, with `init`, `list`, `add`, and `update`. The d ### v1 components -Six components are available through `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `simplex-noise`, and `waves`. Each lands in your project as a regular `.tsx` file, and you own and edit it from that point. +Six components are available through `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, and `waves`. Each lands in your project as a regular `.tsx` file, and you own and edit it from that point. ### Requirements