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.

An open-source WebGL shader library for creating customizable animated visual effects and branded digital assets.

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.

React is a JavaScript library for building web and native user interfaces. It uses declarative views that update the appropriate components when application data changes, and lets developers compose encapsulated, state-managing components into larger interfaces. React code can use JSX, an HTML-like syntax for defining interface elements, although JSX is optional. The library is designed for gradual adoption, can render on the server with Node, and supports mobile applications through React Native. Its core repository is developed openly on GitHub under the MIT license.