Development · GitHub repo
hairline
Dependency-free isometric SVG line figures that react to cursor movement.
Hairline is a collection of interactive isometric line animations and an accompanying design skill that react to pointer movement. Built with pure SVG and zero dependencies, figures can be imported as React components, used in plain DOM, or generated using Claude Code.
What it's for
- Add interactive isometric illustrations to landing pages and dashboards
- Generate custom pointer-reactive vector animations with Claude Code
- Embed standalone, zero-dependency SVG figures in web projects
Features
- 33 pre-built isometric line figures
- Interactive animations that respond dynamically to pointer movements
- Zero runtime dependencies using native SVG and plain DOM or React
- Dedicated skill integration for Claude Code to generate new figures via CLI
- Self-contained output suitable for copy-pasting directly into projects
Pricing
Open source. Free and open source under the MIT license
Details
- Type
- GitHub repo
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Web, Code library, Command line
- For
- Front-end developers and designers looking for lightweight, interactive vector graphics.
- Alternative to
- Lottie, Rive
- Tags
- svg, react, animation, isometric, claude skill, design system
Why it was saved
- @ricky_sigmaflowai: Generates clean, interactive vector animations adhering to strict design rules directly from a prompt into standalone, dependency-free HTML files.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated library of copy-paste web app micro-interactions and transitions
Curated directory of crafted React, Tailwind, and shadcn UI components.
Updated