Skip to content

feat: integrate gl-react-blur into the monorepo#514

Merged
gre merged 1 commit into
masterfrom
feat/gl-react-blur
Jun 12, 2026
Merged

feat: integrate gl-react-blur into the monorepo#514
gre merged 1 commit into
masterfrom
feat/gl-react-blur

Conversation

@gre

@gre gre commented Jun 12, 2026

Copy link
Copy Markdown
Owner

Summary

Imports gre/gl-react-blur as packages/gl-react-blur, modernized to the current stack, and refactors the cookbook blur examples to consume it.

Package

  • Rewritten from Flow + Babel 6 to TypeScript on the gl-react v6 API: Blur, Blur1D, BlurV, BlurV1D, directionForPassDefault (+ exported prop types)
  • Components now use connectSize (size inherited from parent) instead of requiring explicit width/height, while keeping the original multi-pass API (factor, passes, directionForPass) — effectively merging the old library API with the proven implementations that lived in the cookbook
  • Version 6.0.0 like the family — published automatically on merge by changeset publish (version absent from npm)

Cookbook

The blur examples carried local copies of these exact components; they now import from gl-react-blur:

  • blurmulti and blurmap use the library directly (and gain a passes control)
  • blurimgtitle, blurmapdyn, blurvideo, blurmapmouse import Blur/Blur1D/BlurV from the package
  • blurxy intentionally keeps its educational inline implementation ("write your own blur")

Tests

  • New pixel test in the shared suite: blurring a constant color is a no-op (gaussian weights sum to 1) — 42/42 pass

⚠️ Before merging

Add gl-react-blur as a trusted publisher on npmjs.com (repo gre/gl-react, workflow publish.yml) — same step as gl-react-image, otherwise the Release workflow will fail to publish.

Verification

  • pnpm build + pnpm test: 42/42 ✅
  • Cookbook vite build ✅, examples reviewed locally on the dev server ✅

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings June 12, 2026 21:11
Imports https://github.com/gre/gl-react-blur as packages/gl-react-blur,
modernized from Flow/babel-6 to TypeScript on the gl-react v6 API:
Blur, Blur1D, BlurV, BlurV1D, directionForPassDefault. Components now
use connectSize (inheriting size from parent) instead of requiring
explicit width/height, while keeping the old multi-pass API
(factor, passes, directionForPass). Version 6.0.0 like the family;
published automatically on merge by changeset publish.

The cookbook blur examples consumed local copies of these components:
blurmulti, blurmap, blurimgtitle, blurmapdyn, blurvideo, blurmapmouse
now import from gl-react-blur (blurxy keeps its educational inline
implementation). blurmulti/blurmap gain a "passes" control.

Adds a Blur pixel test to the shared suite (blur of a constant color
is a no-op). Also gitignore packages/cookbook/dist (vite build output)
which was accidentally committed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@gre gre force-pushed the feat/gl-react-blur branch from 64b8207 to e19bade Compare June 12, 2026 21:12

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR integrates gl-react-blur as a first-class package in the gl-react monorepo and refactors cookbook blur examples and the shared test suite to consume it.

Changes:

  • Added new workspace package packages/gl-react-blur (TypeScript) implementing multi-pass gaussian blur (Blur, Blur1D, BlurV, BlurV1D) plus directionForPassDefault.
  • Updated cookbook examples/config and the shared Jest suite to depend on and validate gl-react-blur.
  • Updated workspace TS references / path aliases and CI build loop to include the new package.

Reviewed changes

Copilot reviewed 23 out of 26 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
tsconfig.json Adds TS path alias + project reference for gl-react-blur.
pnpm-lock.yaml Adds workspace links and dependency entries for gl-react-blur.
packages/tests/package.json Adds gl-react-blur dependency for the shared test suite.
packages/tests/tests/all.js Adds a pixel test validating blur is a no-op on constant color.
packages/gl-react-blur/tsconfig.json New package TS project config (composite + declarations).
packages/gl-react-blur/src/index.ts Barrel exports for blur components + prop types.
packages/gl-react-blur/src/directionForPassDefault.ts Default pass-direction strategy for multi-pass blur.
packages/gl-react-blur/src/BlurV1D.tsx Variable-per-pixel (map-driven) single-pass blur shader node.
packages/gl-react-blur/src/BlurV.tsx Multi-pass variable blur composition over BlurV1D.
packages/gl-react-blur/src/Blur1D.tsx Single-pass blur shader node.
packages/gl-react-blur/src/Blur.tsx Multi-pass blur composition over Blur1D.
packages/gl-react-blur/README.md New package documentation and usage examples.
packages/gl-react-blur/package.json New publishable package metadata (v6.0.0, peers).
packages/gl-react-blur/LICENSE New package license file.
packages/cookbook/vite.config.ts Adds Vite alias for gl-react-blur source imports.
packages/cookbook/src/examples/index.ts Updates blur example descriptions and adds passes controls.
packages/cookbook/src/examples/blurvideo.tsx Switches to importing BlurV from gl-react-blur.
packages/cookbook/src/examples/blurmulti.tsx Refactors example to use gl-react-blur’s Blur.
packages/cookbook/src/examples/blurmapmouse.tsx Switches to importing BlurV from gl-react-blur.
packages/cookbook/src/examples/blurmapdyn.tsx Switches to importing BlurV from gl-react-blur.
packages/cookbook/src/examples/blurmap.tsx Removes inline implementation; imports BlurV from gl-react-blur.
packages/cookbook/src/examples/blurimgtitle.tsx Switches to importing blur components from gl-react-blur.
packages/cookbook/package.json Adds gl-react-blur dependency to the cookbook app.
packages/cookbook/dist/index.html Adds cookbook build output (generated).
packages/cookbook/dist/assets/webcampersistence-DTKA1VxG.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/webcampersistence-DTKA1VxG.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/webcam-BFHsfm3m.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/webcam-BFHsfm3m.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/video-DnVzELhf.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/video-DnVzELhf.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/transitions-CV95zkud.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/transitions-CV95zkud.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/textfunky-BaMJSZYx.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/textfunky-BaMJSZYx.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/textanimated-CQYi2T57.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/textanimated-CQYi2T57.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/sdf1-C43j1rFH.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/sdf1-C43j1rFH.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/saturation-s7btQp3v.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/saturation-s7btQp3v.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/reactmotion-CdWaQaoG.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/reactmotion-CdWaQaoG.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/pixeleditor-Bs02ibrG.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/paint-AtMLcNaE.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/paint-AtMLcNaE.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/NearestCopy-UkPh1q2L.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/NearestCopy-UkPh1q2L.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/mergechannelsfun-CIJqQgW6.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/mergechannelsfun-CIJqQgW6.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/mergechannels-DUluNz7h.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/mergechannels-DUluNz7h.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/index-gWmnG88S.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/index-gWmnG88S.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/imageresizemodes-CTOppAkB.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/imageresizemodes-CTOppAkB.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/imageeffects-BUTO8im4.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/imageeffects-BUTO8im4.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/hellogl-CXReOxmA.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/hellogl-CXReOxmA.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/helloblueanim-BWpuhNhv.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/helloblueanim-BWpuhNhv.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/helloblue-CpT6RYME.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/helloblue-CpT6RYME.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/heart-DK5WI53N.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/heart-DK5WI53N.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/gradients-BsMFsQRE.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/gradients-BsMFsQRE.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/golwebcam-CHK4Qolk.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/golwebcam-CHK4Qolk.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/golrotscu-CfeE_pnW.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/golrotscu-CfeE_pnW.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/golrot-DU5oHQf9.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/golrot-DU5oHQf9.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/golglider-CGun9ae4.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/golglider-CGun9ae4.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/gol-BUI8CiQw.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/gol-BUI8CiQw.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/glsledit-D-CP-XCP.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/glsledit-D-CP-XCP.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/distortion-B0XsU5Pn.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/distortion-B0XsU5Pn.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/diamondhello-CD4iwERY.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/diamondhello-CD4iwERY.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/diamondcrop-NLB1upqt.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/diamondcrop-NLB1upqt.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/diamondanim-C4O-4MOm.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/diamondanim-C4O-4MOm.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/demotunnel-vzIw_2kj.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/demotunnel-vzIw_2kj.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/connectSize-DzSerJBo.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/connectSize-DzSerJBo.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/colorscale-1aPJI18d.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/colorscale-1aPJI18d.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/colordisc-1aki_5rw.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/colordisc-1aki_5rw.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurxydownscale-B5GIWfAa.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurxydownscale-B5GIWfAa.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurxy-DKElCu_X.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurxy-DKElCu_X.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurvideo-BKo1TDph.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurvideo-BKo1TDph.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/BlurV-c2r3qIHH.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmulti-DBMcNBQ9.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmulti-DBMcNBQ9.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmapmouse-B2RIip3y.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmapmouse-B2RIip3y.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmapdyn-CSpzxMtF.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmapdyn-CSpzxMtF.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmap-pxKMWvZg.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurmap-pxKMWvZg.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurimgtitle-CUAFJ9NY.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurimgtitle-CUAFJ9NY.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurfeedback-CrxVqKre.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/blurfeedback-CrxVqKre.js Cookbook build output (generated asset).
packages/cookbook/dist/assets/animated-Cy1RkPJC.js.map Cookbook build output (generated asset).
packages/cookbook/dist/assets/animated-Cy1RkPJC.js Cookbook build output (generated asset).
CLAUDE.md Documents the new gl-react-blur package in repo overview.
.github/workflows/ci-tests.yml Includes gl-react-blur in the CI build step.
Files not reviewed (1)
  • pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +23 to +38
({
children,
factor,
passes = 2,
directionForPass = directionForPassDefault,
}: any) => {
const rec = (pass: number): any =>
pass <= 0 ? (
children
) : (
<Blur1D direction={directionForPass(pass, factor, passes)}>
{rec(pass - 1)}
</Blur1D>
);
return rec(passes);
}
Comment on lines +25 to +41
({
children,
factor,
map,
passes = 2,
directionForPass = directionForPassDefault,
}: any) => {
const rec = (pass: number): any =>
pass <= 0 ? (
children
) : (
<BlurV1D map={map} direction={directionForPass(pass, factor, passes)}>
{rec(pass - 1)}
</BlurV1D>
);
return rec(passes);
}
@gre gre merged commit c9d99e5 into master Jun 12, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants