Shadeline & SHDL Studio

Shadeline is a standalone runtime library for original browser-based animations and visual systems. It is not tied to a single frontend framework: integration only needs a DOM or Canvas host, while rendering, scenes, and parameters remain managed by the library.

At the center of the project is a configurable Three.js / WebGL pipeline. Shadeline composes shader effects, raster textures, procedural backgrounds, signal deformation, glitch treatments, and timed reactions into one flow, so the character of a scene can change without rebuilding the renderer.

The scene layer treats animation as a system rather than a one-off effect. Shadeline supports scene sets, an active scene, per-scene settings, duplication, renaming, effect ordering, and layer visibility. This model works well for animated heroes, product visuals, audio-reactive scenes, interactive configurators, and portfolio work.

The current effect set includes 12 layers: Raster image, Duotone mapping, Signal Displace / Glitch, Chromatic split, Legacy Pixel Bleed, CRT Scanlines, Barcode Stripes, Signal Echo, Procedural Waves, Film Grain, Background Grid, and Negative Pulse. Each layer can be enabled, disabled, parameterized, and moved within the effect order.

Shadeline also includes a performance layer: Auto, Quality, Balanced, and Battery modes, target FPS, maximum DPR, and adaptive render quality. The runtime emits FPS, DPR, and active-mode telemetry, so a host application can react to rendering cost, resolution, and device capability.

Integration does not stop at the Canvas. Shadeline emits typed events for setting changes, scene changes, config replacement, effect-order updates, layer visibility, texture changes, audio state, performance telemetry, and CSS variable updates. HTML outside WebGL can therefore stay visually synchronized with the animated scene.

Shadeline has not been released publicly yet. I treat it as an evolving tooling project: a runtime, scene system, and editor that can support both final production animations and the workflow used to design them. A dedicated demo website may appear in the future.