Hairline is a library of nineteen isometric line figures designed for product interfaces that respond dynamically to pointer interaction. Created by design engineer Lucas Marques, the library aims to provide subtle, live-feeling animations that enhance UI interaction without relying on heavy illustrations. Unlike static assets, these figures function as interactive instruments, responding to cursor movement, speed, and hover positions in real-time. The project was developed through a rigorous design process, using a live coding bench to refine motion curves, stagger effects, and radial falloffs, ensuring that each movement feels intentional, calm, and responsive.

Functionality is centered around providing a cohesive, lightweight set of SVG-based figures that can be implemented in React applications or standard vanilla JavaScript environments. Each figure exposes a unified API to control interaction depth and theme, making them suitable for diverse product interface requirements. The library is dependency-free, ensuring minimal footprint for production web applications. By abstracting complex interactive logic into simple components, Hairline allows developers to integrate sophisticated, responsive UI elements that feel like part of the core interface rather than external embellishments.

Some of the key features are:

• Nineteen Isometric Figures: A curated collection including UI components like terminal windows, keyboard layouts, routers, and connectivity devices.
• Pointer-Responsive Motion: Every figure reacts to the user's cursor, with motion parameters calibrated for professional, quiet aesthetic quality.
• Zero Dependency: Built with pure SVG and minimal logic, ensuring high performance and ease of integration without bloated node_modules.
• Unified API: All figures utilize a consistent set of configuration options, including intensity, theme, and accessibility labels.
• Customizable Intensity: A dedicated intensity parameter allows developers to modulate how strongly the figure responds to interactions, ranging from subtle gestures to pronounced movements.
• React and Vanilla Support: Offers native React components for modern stacks and a straightforward imperative API for vanilla JavaScript or CDN usage.
• Extensible Architecture: Includes a specialized skill, hairline-create, for AI coding agents to generate new, custom figures that adhere to the library’s specific design rules.

Operationally, the library is accessed either through npm or via CDN for vanilla implementations. In React, figures are imported as components and function as standard HTML elements that forward props and refs. Developers can adjust the behavior of each figure using the intensity property to control physics-like responses, such as spring tension, coasting time, or radial spread. The library automatically handles dark and light themes based on document-level CSS classes or system color schemes, and provides accessible naming through labels for screen readers.

Some common use cases include:

• Interactive UI Feedback: Enhancing dashboards or configuration panels with responsive elements that react to user focus and movement.
• Dynamic Data Visualization: Using figures like the commit graph or terminal window to represent complex system states in a visually engaging and informative way.
• Product Identity: Adding subtle, branded motion elements to landing pages or internal tools to create a premium, polished user experience.
• Prototyping Interactive Concepts: Utilizing the hairline-create skill within AI-assisted development environments to rapidly iterate on new UI metaphors and interactive components.