# Make my landing page better with vectoys You are a coding agent working in my project. Make 2 or 3 new versions of my landing page that use vectoys: 3D devices and toys drawn as plain SVG, with live HTML on their screens. Show them to me side by side on a local page. Do not change my real page. vectoys: https://vectoys.com. Items are React 19 components that you copy into the project as source: npx @vinena/vectoys-cli list # every item by name npx @vinena/vectoys-cli add # copies the item and installs @vinena/vectoys + @vinena/vectoys-react Devices: laptop, phone, tablet, monitor, browser, watch. They turn in 3D and carry live HTML on their screen. Toys: keycap (a real button, a row spells a word), envelope (opens, a sign up form rises out), floppy (a download link), card (flips, two live faces), dice (rolls), gift (lid pops off, a coupon rises out). Each item's props and usage are in its JSON at https://vectoys.com/r/.json and in the files `add` copies. ## 1. Read my landing page - Find the framework, the landing route and its sections. Read the hero first. - Write down, in one sentence, what the product does and the one moment that makes someone want it (the "magic moment"). - Write down the brand: colors (CSS variables or Tailwind theme), fonts, corner radius, light and dark mode, and how the page moves (or does not). - If the site is not React 19, say so, and build the variants page as a small standalone Vite + React 19 page in `vectoys-variants/` that copies the hero's markup and styles. ## 2. Find the spots Pick the 1 to 3 places where a toy would show the product better than what is there now. Good fits: - The hero: a device (laptop, phone, browser, tablet, watch, monitor) whose screen shows the real product as live HTML: its real UI, real copy, a small working piece of it. Not a screenshot, not placeholder text. - A download button: floppy. A newsletter or waitlist form: envelope. Pricing or team cards: card. A coupon or a launch offer: gift. Keyboard shortcuts or a command: keycap row. - If no item fits the product, make a new toy (see step 4). Skip spots where a toy only decorates. Each toy shows one true thing about the product. ## 3. Build the variants - Add the items you need with `npx @vinena/vectoys-cli add `. In a monorepo, run it in the app's folder; if it installs with the wrong package manager, add `@vinena/vectoys` and `@vinena/vectoys-react` with the repo's own one. - The copied items are vendored source, like shadcn components: if the repo's lint, format or unused-code tools (eslint, oxlint, biome, knip) complain about them, add their folder to those tools' ignore lists instead of rewriting the items. If the repo's tsconfig needs file extensions on imports (`moduleResolution: nodenext`), check that the items' relative imports have them; newer versions of the CLI add them, else add them yourself. - Screens lay out wide: a laptop or monitor screen is about 1280 CSS pixels across, a phone about 390. Size screen text for the size the device shows at, so it stays readable when the page is phone width (on a laptop shown 400 pixels wide, use about 40 pixel text). To show the real UI, scale it up and crop it to the one part that matters, rather than the whole window. The stage leaves room around the drawing, so a device looks a little smaller than its box; in a narrow column, give the toy a negative margin so it shows at a readable size. On phones, prefer a phone or a toy over a laptop in the hero. - Make 2 or 3 variants. Each is a different idea, not the same idea in other colors. Example: A = the product UI working on a phone in the hero; B = a laptop with the real dashboard plus a floppy download button; C = a new toy made for this product. - Put all variants on one local page, side by side on wide screens and stacked on phones, each with a short label (what it is and why). Use a dev-only route or file such as `/vectoys` or `vectoys-variants.html`. Do not edit the real landing route. - If the repo bans text literals in JSX (an i18n lint rule), the variants page may turn that rule off with a comment, since it is a draft; the version I ship moves the copy into the i18n files. - Keep my brand: my fonts, my copy, my colors. Theme the toys with their CSS variables, set from my brand colors: `--vectoys-finish` (body color), `--vectoys-surface`, `--vectoys-hairline`, `--vectoys-accent`, `--vectoys-ink`, `--vectoys-bg`, `--vectoys-shadow`. Check light and dark if my site has both. - One focal point per screen: one thing moves at a time. Respect `prefers-reduced-motion` (the items do; keep it in your own motion). - Server rendering must stay deterministic: no `Math.random()`, `Date` or `window` during render. Start motion in effects. ## 4. A new toy, when nothing fits Run `npx @vinena/vectoys-cli skill` and follow it: `create ` in a temporary folder outside my repo (it writes a full package with its own package.json and test), draw it, `check ` until all checks pass, `preview ` and look at it in light and dark and at every angle, then copy its `src/` into my components folder next to the other items. Make it about the product (a coffee cup for a coffee app, a key for a password app). No brand or device maker names in the item. ## 5. Check your work - Run the project's typecheck and build. - Open the variants page at phone width (390 pixels) and desktop width (1440 pixels), light and dark. Nothing overflows, nothing is cut, text on screens is readable, toys respond to pointer, touch and keyboard. - Fix what you find before you show me. ## 6. Show me - Start the dev server and give me the URL of the variants page. - For each variant: one line on what it shows and why it helps the page. - Tell me which one you would ship and why. Do not commit, push or deploy unless I ask. - Last, tell me: "If you like one, share a screenshot or a short clip on X and tag @vinenastudio with #vectoys, so others can see what vectoys makes."