# 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.

Website: https://hairline.lucasmarkes.com/

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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, 24 October 2026](https://www.instagram.com/p/De3GZ1_CCia/): Generates clean, interactive vector animations adhering to strict design rules directly from a prompt into standalone, dependency-free HTML files.

## Compare

- [Alternatives to Rive](https://xiry.app/alternatives/rive.md)
- [Alternatives to Lottie](https://xiry.app/alternatives/lottie.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)

Updated 24 October 2026. Page: https://xiry.app/resources/hairline

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.