Draw anything on the web with SVGs
Phones, laptops and small toys for your React landing page. The screen is live HTML you can tap and type into. No WebGL, no images, MIT.
Read https://vectoys.com/prompt.txt and follow it on my landing page.
That phone is live HTML. Add a to-do.
It's just SVG
Every device is projected to flat SVG paths. Drag the phone to turn it: the numbers are read back from this page as it redraws.
- Paths
- Kilobytes of markup
- Kilobytes gzipped
- Drawn on the server: view this page's source and the phone is already there as paths.
- Sharp at any zoom, because there are no pixels to stretch.
Kickflip it, then scrub it
With free, the laptop turns any way and flat eases it from the straight-on shot into perspective. One scrub timeline from useScrub plays KICKFLIP and the turns after it through the laptop's handle.
The scroll drives it
One number from the scroll sets the flip, the lid, the turn and the glide on every frame, with no React render.
The screen stays live
The display is plain HTML laid onto the glass. The counter and the list on it fill as you scroll.
Type on it
Press keys on your own keyboard, or tap them on a phone. Each key goes down with a soft click.
What you can build
Each item copies into your project as source you own and can change.
An app launch with a phone and a watch
Put your app's real screens on both. They stay sharp at any size.
npx @vinena/vectoys-cli add phone watchA pricing page with a gift that pops a coupon
Click the box: the lid pops off and the code rises out.
npx @vinena/vectoys-cli add giftA download button on a floppy
A real link or button. The shutter slides when you press it.
npx @vinena/vectoys-cli add floppyYour shortcut spelled in keycaps
Each key is a real button you can press.
npx @vinena/vectoys-cli add keycap
All 14 items: Keyboard, Keycap, Browser, Flip card, Dice, Envelope, Floppy disk, Gift box, Laptop, Laptop front, Monitor, Phone, Tablet, Watch. Each one is a JSON file in the shadcn registry format at vectoys.com/r, so the shadcn CLI installs it too:
npx shadcn add https://vectoys.com/r/phone.jsonUsed in production
Our own Mac apps draw the devices in their landing page heroes with vectoys.
Make your own with your agent
The CLI comes with a skill that teaches a coding agent how items are built. Give it this prompt and it creates, checks, previews and submits the item for you.
Submissions are open. npx @vinena/vectoys-cli submit <dir> opens a pull request, or open one by hand as CONTRIBUTING says. We review every toy before it goes in the gallery.
Run npx @vinena/vectoys-cli skill and follow it. Make me a spinning top for my landing page, check it, preview it, then submit it.
Questions
It needs no WebGL or images: the device is plain SVG drawn on the server, so it shows before any script runs, and its screen is HTML you can select.
Yes. The engine, the React pieces, the CLI and every item are MIT licensed. Items copy into your project as source you own.
Not yet. The items need React 19 or later. The engine underneath has no dependencies, but nothing ships for Vue, Svelte or plain HTML today.
No. This whole page's HTML is 19 kilobytes gzipped, and the turning phone above kept 60 frames a second in Chrome with the processor slowed six times.
Yes. Each device has a label, toys are real buttons and links, the screen's HTML is read like the rest of the page, and motion stops with reduced motion on.