Skip to content

feat: Migrate gradient primitive to GPU accelerated SVG filters#24

Open
sortedcord wants to merge 1 commit into
Boring-Software-Inc:mainfrom
sortedcord:main
Open

feat: Migrate gradient primitive to GPU accelerated SVG filters#24
sortedcord wants to merge 1 commit into
Boring-Software-Inc:mainfrom
sortedcord:main

Conversation

@sortedcord

@sortedcord sortedcord commented Jul 20, 2026

Copy link
Copy Markdown

This PR rewrites the rendering engine of the <DitherGradient> component, migrating it away from a CPU-bound Canvas API loop to a lightweight, GPU-accelerated procedural SVG filter pipeline.

We offload the threshold math to the browser's native compositing engine, this eliminates main-thread blocking on large gradient washes and removes browser anti-aliasing blur. It also unlocks support for custom gradient angles and adjustable quantization levels.

Arbitrary Angle Rotation Quantization Step Control
animated-rotation quanitzation levels

New Features

  • The direction prop now accepts numbers (0–360 degrees) in addition to cardinal strings ("up", "down", etc.), projecting the gradient vector across the container corners.
  • Added a levels prop (default: 6) to allow consumers to control the granularity of the gradient color banding (for example, levels={2} produces a strict 1-bit retro dither).

Key Changes

  • Constructs an SVG <linearGradient> and feed it through a dynamic <filter> chain.
  • The 4×4 Bayer threshold matrix is now encoded into a tiny Base64 PNG in memory and tiled across the SVG via <feTile>
  • Utilizes <feComposite> and <feComponentTransfer type="discrete"> for the stipple math. To prevent channel-bleeding artifacts during transparency dissolves, the filter quantizes a grayscale base and accurately remaps it to the target colors and alpha using an <feColorMatrix>.

Testing

  • Verified TypeScript definitions and zero compilation errors.
  • Confirmed the component correctly bypasses layout shift hydration mismatches during server-side rendering (SSR).

Closes #19

Summary by Comp AI

No blocking issues found.

Written for commit 5bd036b. New commits will trigger a re-review. Generated by Comp AI.

- Replaces CPU-bound Canvas iteration with GPU-accelerated SVG filter pipelines (`feComposite`,
  `feColorMatrix`).
- Extends the `direction` prop to accept custom rotation angles (0-360°) alongside cardinal strings.
- Implements alpha-channel color matrix remapping to fix channel-wise thresholding artifacts on transparency
  dissolves.
- Introduces a `levels` prop for configurable quantization steps.
@tripwire-sh

tripwire-sh Bot commented Jul 20, 2026

Copy link
Copy Markdown

passed — nothing tripped. good to merge.

View on Tripwire

@comp-ai-code-review

comp-ai-code-review Bot commented Jul 20, 2026

Copy link
Copy Markdown

Comp AI code review complete — no issues found.

Commit 5bd036b · Posted by Comp AI Code Reviews.

@comp-ai-code-review comp-ai-code-review Bot 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.

No blocking issues found across the changed files.

Commit 5bd036b · Posted by Comp AI Code Reviews.

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.

SVG based <DitherGradient> for 360 degree rotation and improved performance

1 participant