Canvas UI

ThreeUI is a free, open-source, login-free catalog and React component library for interactive Three.js, WebGL, shader, and UI components. Its Community edition provides browsing, search, themes, responsive layouts, live renderers, controls, variant pickers, source-code tabs, and complete Community component source code, while excluding Pro and Beta components and authentication, checkout, and Pro implementation source. The public library can be installed from npm as @designcodeio/threeui and imported as React components with shared styles through the package root or component subpaths, or run locally with Vite from the repository. Components that render full HTML documents require runtime assets to be copied into the host application's public directory. Application code and Community component code are MIT licensed; bundled fonts use the SIL Open Font License 1.1 and bundled Three.js runtime files use the MIT license.

loadersz is a framework-agnostic, dependency-free browser library of Canvas loading animations, distributed as a native Web Component with an imperative TypeScript API. It provides 150 motion states, including working, searching, connecting, solving, and racing, and supports configurable size, speed, density, color, theme, pausing, and reduced-motion behavior. The root import registers a switchable <loadersz-loader> element, while individual state entry points such as loadersz/racing include the Canvas core and one geometry builder for smaller fixed-state bundles. The API can also attach a fixed or switchable loader controller to an application-owned canvas and supports lifecycle methods such as setOptions and destroy. Typed integration adapters are provided for React, Vue, Svelte, and Angular; plain HTML, Lit, Solid, and Qwik can use the native element directly. The library pauses in hidden tabs, respects prefers-reduced-motion by default, and caps Canvas device-pixel ratio at two. The package has no regular runtime dependencies, and its repository is licensed under the MIT License.

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.

Quickdraw is an MIT-licensed, open-source infinite-canvas whiteboard SDK for React, React Native/Expo, and plain JavaScript applications. It provides freehand pressure ink, highlighters, shapes, arrows, lines, text, sticky notes, images, selection and transformation tools, laser presentation pointers, themes, grids, palm rejection, and PNG export. Its data model emits JSON-safe diffs for real-time synchronization over an application-chosen transport, with support for persistence, undo/redo, and stroke-by-stroke replay. The project provides separate core, React, and React Native packages; the core is plain ESM with zero runtime dependencies and can run in modern browsers without a build step. The repository states that it is free for commercial use and has no license fee.