lucasmarkes/hairline ? reverse-engineered prompt

Reverse engineered prompt

Build me a small library of animated isometric line figures that react to the pointer, with a clean React wrapper and a plain DOM version too.

I want around nineteen playful UI scenes like cards, pillars, a phone, laptop, terminal, vault, padlock, router, and so on, all drawn with SVG style line art and designed to sit in a 5:4 box. Each one should respond smoothly to hover and movement, and have an intensity setting so the effect can be subtle or stronger. Make it easy to use in React with components, but also expose a simple function for non React usage that mounts into any element and can be updated or destroyed.

Please include theme support for light, dark, and auto, plus accessible labels and a callback that can report the current caption text. Keep it dependency free, modern TypeScript, and make it work nicely with server rendered apps without layout shift. If you can, also make it easy to install into a shadcn style project.

Are you gonna build this?

make sure you review the code using coderabbit

Try freeSponsored — opens CodeRabbit in a new tab