Paper Shaders

OpenShaders is an open-source platform and registry for discovering, creating, publishing, and using shader code in websites. It is being built around a collection of WebGL and WebGPU shaders, a live editor for creating and collaborating on shaders, and ready-to-use React components and JavaScript modules, including a shadcn registry for installing shaders from a terminal. The platform is hosted at openshaders.com and is released under the MIT license; its full experience is still under development, while users can claim usernames, generate shaders, explore existing work, and copy shader code.

Canvas UI is an open-source, framework-agnostic library of creative UI components that render canvas and WebGL effects over live, interactive HTML. Its components use the experimental HTML-in-canvas API to read and redraw the DOM as a texture while preserving selectable text and clickable links; where that API is unavailable, they fall back to WebGL overlays. The library includes fluid simulations, shader effects, 3D scenes, distortion, particles, glass, fire, retro, and glitch effects, including Liquid, Ripple, Blaze, Glass, VHS, Shatter, and Decrypt Reveal. Each component is implemented as a plain TypeScript and WebGL engine with thin wrappers for React, Solid, Preact, Vue, Svelte, and vanilla JavaScript. Components are copied into an application through a shadcn-compatible registry rather than installed as a conventional dependency, and provide typed props with default configuration. The registry is MCP-ready for AI-assisted component discovery and installation. HTML-in-canvas effects require Chrome with the relevant flag or an origin-trial token; other environments use the WebGL-overlay fallback, while the library’s 3D effect components work without that flag. The project includes the component source, documentation site, demos, and registry builder, and is distributed under the MIT license with the Commons Clause, which restricts selling the library itself.

Viscose is a portfolio carousel rendered as a single full-screen WebGL fragment shader rather than a grid of DOM elements. Project cards travel around a mostly off-screen ring that can be turned by scrolling, dragging, swiping, or clicking; momentum carries the ring and it snaps the nearest card to the front. Signed distance fields make neighboring cards melt together as they approach and form thin, sagging threads as they separate, while pointer interaction softens the field, shifts nearby cards, and creates connecting effects. The same shader pass renders the threads, the refracting glass-like edges at the top and bottom of the viewport, and the cursor tag. On touch devices, swiping turns the ring and press-and-hold triggers the hover effects. The project includes a development-only lil-gui panel with roughly 136 live parameters and is built with Next.js, React, Three.js, GSAP, and Tailwind CSS; it requires Node.js 20 or newer to run locally.

A framework-free WebGL2 package for rendering Apple-inspired translucent glass surfaces for folders, rectangles, pills, and circles. Its renderer models screen-space refraction using a squircle signed-distance-field thickness field, Snell refraction with a meniscus rim, variable-blur scattering, Fresnel reflection, chromatic dispersion, edge highlights, contact shadows, hit testing, and live backdrops. It provides the original frosted V1 renderer and a separate clear optical V2 renderer, each with its own material contract; both can be used together. The package is distributed through npm, requires WebGL2, accepts CSS-pixel element coordinates, and can load image backdrops.

An interactive skillshot visual-effects sandbox built with Three.js, Vite, and hand-written GLSL. It provides seven abilities and five aiming modes, with keyboard-armed targeting indicators that follow the mouse before the user clicks to fire. The documented abilities use procedural animated effects such as molten ground and burning blades, a ring of tentacles emerging from a rift, an electrical sphere rising from a containment platform, stone formations along a cast line, and constructed gates or rings. The video describes it as a workbench for designing game abilities while they are animated, using procedural geometry, GLSL, and GPU particles with live adjustment against a paused frame.