robot-heads

Thinking Orbs is an open-source React component library of animated orb status indicators for AI applications. It provides states such as reasoning, searching, working, retrying, compacting, and waiting, with configurable shapes, rendering methods, size, speed, density, tilt, pausing, labels, and CSS tinting. The library can be installed from npm or copied with shadcn; it also provides a plain JavaScript version that requires no dependencies. Optional shapes and rendering methods are separately imported so only the selected components are included in the bundle. The project is MIT licensed and is described by the video as being under 4 KB gzipped.

thinking-orbs is a React component package providing dotted animated loading indicators for AI and agent interfaces. It offers nine hand-tuned states— including working, searching, solving, listening, connecting, weaving, composing, breathing, and shaping—rendered with plain 2D canvas rather than WebGL or filters. The indicators have separate 64-pixel chat-avatar and 20-pixel inline-text designs, automatic or pinned light/dark themes, adjustable speed, pause control, and pass-through canvas properties. It includes per-state accessible labels, renders a static frame for prefers-reduced-motion, pauses offscreen instances through IntersectionObserver or when the tab is hidden, and resumes them in phase using a shared clock. The package is distributed through npm under the MIT license.

Hairline is a dependency-free, ESM JavaScript library of interactive isometric line figures for React and other DOM environments. Its figures respond to pointer movement, including pillars that rise around the pointer, layered objects that separate, cards that stand up, and other scenes such as terminals, keyboards, routers, and commit graphs. The package provides React components and DOM functions, supports Svelte-style actions, and lets each figure accept intensity, theme, accessible label, and caption callbacks. Figures draw at a 5:4 aspect ratio; the library includes server-rendering behavior, reduced-motion handling, shared animation scheduling, CSS custom properties for theming, and no runtime dependencies. It is distributed through npm under the MIT license. Hairline also provides hairline-create, a skill for coding agents that generates new figures as standalone HTML files according to the project's rules.

Arc Library is an open-source React component and block library by Elia Kuratli, providing interfaces with calm physical motion, keyboard support, and a reduced-motion path for every animation. Components use CSS modules with shared design and motion tokens, and can be installed through the shadcn CLI or copied into a project as source code; there is no runtime package to keep synchronized. It supports Next.js and Vite with or without Tailwind, and includes controls, inputs, overlays, feedback elements, data visualizations, tables, media components, text effects, and complete interface blocks. The free repository is MIT licensed. Components use Motion for animation and may use lucide-react or Radix UI primitives; theming is controlled through semantic CSS variables with separate light and dark values. Arc also provides an MCP server and machine-readable documentation for AI coding tools, while paid Arc Pro components are distributed separately.

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.