{"id":50348853,"title":"Show HN: Vectoys – 3D devices for landing pages, drawn as plain SVG","points":2,"user":"mertduzgun","time":1793688426,"time_ago":"8 hours ago","type":"link","content":"

Hi HN, I'm Mert.

Vectoys is a free, MIT-licensed set of interactive "toys" for landing pages: a MacBook that opens and kickflips on scroll, a keyboard you can actually type on, an iPhone running a small to-do app, keycaps, an envelope, and more.

I built many Mac and iOS apps over the last two months and found myself explaining products with the device frames is working and looking better than plain text.

I got Opus 5.5 draw me realistic devices but on each website it created the 3d rendering engine from scratch so I extracted that into an open source library.

Agents are good at drawing with SVG but not that good. I had to do 15+ iterations for the laptop devices to make them look good. I'm sharing all of them so you don't have to do the same.

Everything is plain SVG and HTML. No WebGL, no canvas, no images. The devices are drawn with real perspective math, so you can grab any toy and turn it around, or open it full screen. The screens are live, selectable HTML that turns with the device.

Some facts about the library:\n- Server rendering is checked: every toy renders twice on the server and the markup must match exactly.\n- Each toy stays under 96 KB.\n- Animations respect prefers-reduced-motion.

You copy a toy into your project with `npx @vinena/vectoys-cli add laptop` (or `npx shadcn add https://vectoys.com/r/laptop.json`), or use the React package. There's also a one-line prompt you can give a coding agent, and it picks and places toys on your landing page for you.

Even though I used this for device drawing, possibilities are endless. You can get your agent draw whatever you want.

I use it on my own sites (snug.so is the first). If you think something like that would be cool or helpful to you, I'd love you to try the prompt share the result with me.

Thanks for reading!","url":"https://vectoys.com/","domain":"vectoys.com","comments":[],"comments_count":0}