3D toys for the web, drawn in plain SVG
Laptops, phones and small objects for your landing page. They render on the server, stay sharp at any size and carry live HTML on their screens. No WebGL, no canvas, no images.
npx vectoys add laptopIt'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.
The screen is real
What sits on a screen is ordinary HTML, laid onto the glass with a CSS transform. Tick a box, type something in, select the text. Find in page finds it, and a screen reader reads it.
Turn the tablet on its side and the list lays out again for the wider screen.
Gallery
Each item copies into your project as source you own and can change. Run its command, or give the shadcn CLI its address:
npx shadcn add https://vectoys.com/r/phone.jsonBrowser
A floating browser window drawn as SVG paths that turns any way and stacks, with an address bar and live HTML on its page, in light or dark tones.
npx vectoys add browserFlip card
A card with live HTML on its front and its back that flips over on a click or a hover and leans towards the pointer, for pricing, team or feature cards.
npx vectoys add cardDice
A die with rounded edges and pips that rolls when clicked: it hops, tumbles, lands on a random or given face and settles with a wobble, its shadow following on the ground.
npx vectoys add diceEnvelope
A newsletter envelope drawn as SVG paths: a real button opens it, the flap swings up on its fold and a letter with live content, such as a sign up form, rises out of the pocket. Open it from the page with a number from 0 to 1, or let it open itself on a click.
npx vectoys add envelopeFloppy disk
A 3.5 inch floppy disk drawn as SVG paths that is a download link or a button: its metal shutter slides open and it turns towards the eye on hover, with live text on its label and a write-protect tab in its corner.
npx vectoys add floppyGift box
A gift box tied with a ribbon and a bow: a click pops the lid up and off, and live HTML such as a coupon code rises out of the box.
npx vectoys add giftKeycap
A big mechanical keycap drawn as SVG paths that is a real button: a sculpted cap with a live label on its dished top, on a switch, that lifts on hover and travels down when pressed. A row of keys spells a word.
npx vectoys add keycapLaptop
A 14 inch laptop seen from the front and a little above, drawn as SVG paths, with a lid that opens and closes and live HTML on its display.
npx vectoys add laptopMonitor
A 27 inch desktop monitor on a stand drawn as SVG paths that turns any way, its panel tilting on the stand, with a thin bezel and live HTML on its display.
npx vectoys add monitorPhone
A modern flagship phone drawn as SVG paths that turns any way, with side buttons, a camera bump on its back and live HTML on its display.
npx vectoys add phoneTablet
An 11 inch tablet drawn as SVG paths that turns any way, upright or on its side, with a uniform bezel, a camera bump on its back and live HTML on its display.
npx vectoys add tabletWatch
A smartwatch drawn as SVG paths that turns any way, with round edges, a crown, a side button, a bent band and live HTML on its display.
npx vectoys add watch
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 open at launch. If you host your own registry, vectoys submit --registry lists it here.
Run npx vectoys skill and follow it. Make me a spinning top for my landing page, check it, preview it, then submit it.
Bring your own
A registry is a folder of JSON files on any static host: one file per item in the shadcn registry item format, and an index that lists them. Put its address in your vectoys.json and its items install by scope.
The engine, the React pieces and the CLI are MIT licensed. The items will get a license of their own before launch, free to use with credit.
{
"items": [
{
"name": "rocket",
"title": "Rocket",
"description": "A toy rocket"
}
]
}{
"registries": {
"@acme": "https://acme.dev/r"
}
}$ npx vectoys add @acme/rocket