Mac scrolling performance issue + fix

Scrolling is noticeably choppy and delayed on my M1 Macbook Air

GPU acceleration does not appear to be the issue, as other websites scroll smoothly in the same browser.

The issue is occasional on the landing page and constant in Downloads as well as About. I have noticed this issue for at least a few months.

The issue is easily reproducible on my system, literally just open the site and pay attention to how scrolling feels. On my system it is impossible to ignore.

Device: M1 Macbook Air A2337
Kernel Version: 25.6.0
MacOS Version: 26.6.2
Browser: FireFox 155.0.1 (aarch64)
Input device: Trackpad, also seen with mouse

Solution:

The choppy scrolling was caused by the large fixed background gradient using a live 64px CSS blur. Firefox on macOS repeatedly renders the filtered layer while scrolling, which caused the performance issues.

The fix replaces the default live-blurred SVG with an equivalent pre-rendered WebP. This preserves the design, position, rotation, and behavior while allowing the browser to use an ordinary image instead of rendering the blur during every scroll frame.

Custom gradient colors retain the original SVG/CSS implementation as a fallback.

Tested successfully with Firefox 155.0.1 on an M1 MacBook Air. Scrolling is now smooth on the landing, Download, and About pages.

Changed files:

- src/components/common/BackgroundGradient.astro
- Uses the pre-rendered WebP for the website’s default gradient.
- Removes the live CSS blur from the default rendering path.
- Loads and decodes the image eagerly to prevent a white flash.
- Preserves the existing SVG and CSS blur as a fallback for custom colors.
- Includes a comment explaining the Firefox/macOS performance issue.

- src/assets/images/background-gradient.webp
- New transparent, pre-rendered version of the original gradient.
- Preserves the original path, colors, 30% opacity, and 64px blur.

- scripts/generate-background-gradient.ts
- New reproducible asset-generation script using the existing `sharp` dependency.
- Contains the original SVG definition and generates the pre-blurred WebP.
- Produces deterministic output.

- package.json
- Adds `bun run generate:background-gradient` for regenerating the asset.

- README.md
- Documents the new generation command.
- Explains why the gradient is pre-rendered.
- Explains when and how the asset should be regenerated.

Validation:

- Production build succeeds with all 59 pages.
- Changed source files pass Prettier.
- `git diff --check` passes.
- WebP regeneration is deterministic.
- No intentional design or functionality changes were introduced.

I'm not a professional dev but I try lol. Fixed files are included.

[generate-background-gradient.ts](https://github.com/user-attachments/files/32174396/generate-background-gradient.ts)

[package.json](https://github.com/user-attachments/files/32174399/package.json)

Start with src/components/common/BackgroundGradient.astro and compare its default gradient path with the supplied background-gradient.webp and scripts/generate-background-gradient.ts. Run bun run generate:background-gradient, verify deterministic output, then run the production build and check scrolling on the landing, Downloads, and About pages in Firefox on macOS. Done means smooth scrolling without changing the design or custom-color fallback.

Written by the indexing model from the issue text.