# webgl-scroll: Composable WebGL Scroll Effects

Adapted from the project README

A composable WebGL scroll-effects toolkit for React, Next.js, and agentic frontend workflows. It combines a layered core runtime, built-in effects, React triggers, viewport-distance lifecycle scheduling, and hooks for host-managed asset prefetching.

[Website source](https://zzzxc.com/projects/gh-1265195464)

## Problem and Approach

The project aims to reduce repeated integration work in scroll-driven WebGL pages. Applications can compose effects through declarative triggers, while the lower-level runtime provides effect registration, state, shared pointer input, and GPU helpers.

## Packages and Built-in Effects

The project is divided into a core engine, built-in effects, and React bindings. Its effects cover image, video, and GLB asset layers; fading WebGL titles; pointer-responsive particles sampled from GLB surfaces; and pixelated fullscreen transitions. React components emit trigger metadata.

## Lifecycle and Asset Loading

Effects can preload, suspend, and unload according to their distance from the viewport, with a limit on concurrent preload work. Settings may be overridden globally, per trigger, or per effect. Hosts can also supply an asset resolver and derive a preload manifest from built-in effect declarations.

## Responsibilities and Status

The host application remains responsible for canvas setup, the render loop, and teardown, and may manage downloads centrally. The README identifies 0.1.0 as the first public release line; the described lifecycle scheduling and host-prefetch changes remain on a development branch pending a later merge and package release.

## Explore further

- [Project source](https://github.com/agenticnoob/webgl-scroll)

[Contents](https://zzzxc.com/agent/en/index.md)