hairline

Shaders is an open-source WebGPU component library and design platform from Shader Effects, Inc. It provides declarative effects for React, Vue, Svelte, Solid, JavaScript, and Framer, including gradients, noise, glass, metal, lighting, distortions, transitions, blurs, and cursor effects. Components render as GPU-blended layers that can be nested, masked, and composed without writing shader code. Its visual editor at shaders.com lets users arrange components on an infinite canvas, adjust their properties, connect them to cursor or timeline inputs, and export the resulting component tree. The accompanying CLI connects a project to a Shaders account, detects the framework, installs selected effects as component files, and can search, preview, and update them. Custom components can be defined with JavaScript objects and WGSL pixel code. The engine, components, framework bindings, and npm package are MIT-licensed; the hosted editor, presets, and other platform features have separate terms.

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.

Lifeline is a timeline component for presenting stories that unfold over time, such as a career, company, or journey. It lays milestones on a single rail that is horizontally scrubbed by scrolling on desktop and becomes vertical on mobile; milestones can contain years, events, links, people, images, and video, with media shown as hover reveals or floating cards that expand into a lightbox. An introductory animation draws the rail across the years. The project ships as a shadcn registry: installation copies the components and supporting data helpers into an application's codebase, where their styling, breakpoints, and animation behavior can be modified. It provides page, shell, starter-data, component-system, and theme-switcher registry items for Next.js projects.

Sugar High is a lightweight, zero-dependency JavaScript syntax-highlighting library that runs in browsers and JavaScript runtimes and converts source code to HTML without requiring a DOM. It supports JavaScript, TypeScript, CSS, Python, C, Go, Java, Rust, JSON, Markdown, SQL, HTML, YAML, and other built-in languages and formats, with alias normalization for inputs such as filename extensions and Markdown fences. The library exposes a one-step highlight function and a composable core that separates syntax parsing from HTML rendering. Token classes can be customized with class maps or token hooks, while line-level hooks support highlighting or modifying generated lines; CSS custom properties provide theming. Its React package supplies Code and textarea-overlay Editor components, and its Remark plugin highlights fenced code blocks during Markdown processing. Sugar High also provides an opt-in experimental WebGPU entry for asynchronous, language-agnostic highlighting through gpu-lexer. It is distributed as npm packages under the MIT license, with a separate core entry for selective language configurations.

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.