Pilih ratusan kaahlian nu geus siap pikeun Claude, Cursor, jeung sajabana.
Ship a 3D Game on Vercel by Sunday Night: The 48-Hour Deploy Playbook
You can go from blank Friday evening to your-game.vercel.app link by Sunday dinner. The stack is Three.js, Cursor, an AI skill from Vibe Skills, and the Vercel free tier. Total cost for the weekend: $0. Total infra you have to babysit: also zero.
This is not "build a prototype on your laptop and call it done". This is a public URL anyone in the world can open in a browser, with HTTPS, edge caching, and a custom domain if you want one. The AI skill ships the Three.js scaffolding and a working vercel.json. Cursor handles the iteration loop. Vercel handles the deploy. You handle the design.
This guide is for indie devs, vibe coders, hackathon participants, and anyone who is tired of half-finished localhost:5173 tabs. We cover why this stack works, the 48-hour deploy anatomy, five 3D game skills built for the workflow, and the Friday-to-Sunday step-by-step.
Pilih ratusan kaahlian nu geus siap pikeun Claude, Cursor, jeung sajabana.
Why Vercel + Three.js + AI Skills Is the Solo Dev Stack
Vercel is the laziest possible deploy target for a Three.js game. Push to GitHub, Vercel notices, builds the project, and gives you back a URL within 60 seconds. No server to provision, no Docker file, no NGINX config, no SSL setup. The Three.js bundle is just static HTML, JS, and WebGL assets, which is exactly what Vercel's edge network was built to serve.
The free tier covers a weekend launch comfortably:
- 100 GB bandwidth per month. A 5 MB Three.js build at 10,000 plays is 50 GB. You will run out of weekend before you run out of bandwidth.
- Unlimited static deploys with HTTPS and a
*.vercel.appsubdomain. - Custom domain support on the free tier - bring your own
name-game.comif you have one, otherwise the freevercel.appURL is shareable on every social platform. - Preview deploys for every commit - every push gets its own URL, so you can share a build with a friend and keep iterating without breaking it.
Add an AI skill from Vibe Skills and the boilerplate disappears too. Three.js scene setup, player controller, build pipeline, and a Vercel-ready vercel.json are generated in one command. Then Cursor turns the rest of the weekend into a chat where you describe the gameplay you want and tune the output. That is the full stack: a marketplace skill for the foundation, an AI editor for iteration, and Vercel for the deploy. Solo, free, and fast.
Pilih ratusan kaahlian nu geus siap pikeun Claude, Cursor, jeung sajabana.
The 48-Hour Anatomy: Friday Concept to Sunday Deploy
Every weekend ship that actually goes live follows the same beats. The trick is to plan the deploy on Friday, not Sunday afternoon, so the last six hours go to polish instead of fighting a build error.
| Phase | Time block | What you do | What is shipped by end of phase |
|---|---|---|---|
| Phase 1: Concept | Friday 6pm - 10pm | Pick genre, write 1-page design doc, install Vibe Skills 3D game skill, push starter to GitHub, connect to Vercel | Live name-game.vercel.app URL with the boilerplate scene |
| Phase 2: Build | Saturday 9am - 8pm | Replace placeholder with your core mechanic, add 1 level, get win/lose state working | Playable build at the same Vercel URL, auto-deployed on every push |
| Phase 3: Polish | Sunday 10am - 4pm | Sound, juice, tutorial popup, bug pass, performance check on mobile | A build that doesn't break in the first 60 seconds on any device |
| Phase 4: Launch | Sunday 4pm - 8pm | Set custom domain (optional), record GIF, write itch.io page, post the link | Public URL + itch.io page + a launch post on socials |
The reason this works is the Friday push to Vercel. Once the URL exists, every Saturday and Sunday commit deploys automatically. There is no "Sunday night deploy panic" because the deploy already happened on Friday and has been running on autopilot the whole weekend.
What "Vibe Coding" a 3D Game on Vercel Looks Like
Vibe coding means describing what you want in plain English and letting an AI editor write the code, then iterating on the output. For a Three.js game on Vercel, the loop is unusually clean: every change in Cursor is a pnpm dev away from local feedback, then a git push away from a live preview URL, then auto-deployed to production on main.
A vibe-coded Vercel game weekend looks like this:
- Open the skill's starter folder in Cursor.
- Describe a feature in chat: "double jump if space is pressed twice within 200ms".
- Cursor edits the controller file. Save.
pnpm devreloads. You feel the jump in the browser. - If it feels right,
git push. Vercel builds a preview URL. Send it to a friend. - Merge to
mainwhen the feel is locked. Production URL updates within 60 seconds.
The AI does the typing. Vercel does the deploy. You do the feel and the design.
5 AI 3D Game Skills That Make This Possible on Vibe Skills
These skills are built for the Vercel + Three.js + Cursor weekend workflow. Each one ships with a Vite-based Three.js project, a working vercel.json, a pnpm build that produces a static bundle Vercel can serve from the edge, and a tested deploy path. All are in the 3D Games category on Vibe Skills.
1. Three.js + Vercel Game Starter
The default pick. Generates a Three.js scene with a player controller, third-person camera, lighting rig, skybox, and a ground plane with collisions. Ships with a vercel.json that sets the right caching headers for Three.js asset bundles. pnpm dev runs locally; one click in the Vercel dashboard connects the GitHub repo and you have a live URL.
Best for: any genre except pure 2D. Use this if you don't know yet what you're building.
2. First-Person Vercel Walker
A polished first-person controller (WASD + mouse pointer lock + gravity + sprint + jump) with footstep hooks, head-bob, and a vercel.json that handles the pointer-lock CSP headers correctly. This one trips up a lot of solo devs in production. The skill solves it for you.
Best for: walking sims, horror prototypes, narrative games, museum exhibits.
3. Browser Arena Shooter Kit
A top-down arena (twin-stick controller, wave spawner, basic enemy AI, projectile system, score HUD) with a Vercel-tuned build that gzips assets, code-splits the AI, and lazy-loads music. Multiplayer hooks included; the weekend ships single-player.
Best for: arcade shooters, bullet hell, jam entries that need to load fast on mobile.
4. Vercel Puzzle Platformer
A third-person platformer (variable jump, coyote time, ledge detection), checkpoints, three stub levels you can edit in Blender or in code, and a respawn loop. The vercel.json is configured for instant edge-cached level reloads, so playtesting feels snappy on a phone.
Best for: puzzle platformers, parkour prototypes, level-design experiments.
5. Vercel Driving Sandbox
Arcade driving feel (acceleration curve, drift physics, camera lag, basic terrain) with a low-poly car, a track template, and a deploy tuned for large terrain meshes. Preset HTTP headers make the WebGL context start faster on Safari, historically the slowest browser for Three.js.
Best for: arcade racing, off-road driving, car-feel demos for a portfolio.
Browse all 3D game skills on Vibe Skills →
Friday-to-Sunday Step-by-Step
This is the exact schedule. Adjust the start time, but keep the order. The key milestone is the Friday-night Vercel deploy. Everything after that is iteration.
Friday 6pm - 8pm: Pick Skill, Push to GitHub, Connect Vercel
Step 1: Pick a 3D game skill on Vibe Skills. Browse the 3D Games category, pick the one that matches your genre, and install the starter into a fresh folder. Open it in Cursor. You should see a Three.js scene with a moving player by 7pm.
Step 2: Create a GitHub repo and push. git init, git remote add, git push. Use the slug of your game as the repo name (crystal-runner, lunar-fishing, whatever). The repo name often becomes your URL.
Step 3: Connect the repo to Vercel. Sign in to Vercel with GitHub (free), click "Add New Project", pick the repo. Vercel auto-detects Vite and configures the build. Click Deploy. Within 60 seconds you have a crystal-runner.vercel.app URL. Open it on your phone. Share with one friend. The deploy bar is now zero for the rest of the weekend.
Friday 8pm - 10pm: Write the Design Doc
Step 4: Answer five questions in plain English. Open a Notion page or a markdown file inside the repo and answer:
- What is the player doing every 5 seconds? (the core loop)
- What is the win condition and the lose condition?
- How long is one run or one level?
- What is the visual hook? (palette, lighting, style reference)
- What is the one feature that makes this memorable in 30 seconds?
Step 5: Commit the design doc. Push it to the repo. Vercel will redeploy. The discipline of pushing every meaningful change keeps the live URL honest.
Saturday 9am - 1pm: Build the Core Mechanic
Step 6: Replace the placeholder mechanic with your one feature. This is the only feature that matters. Use Cursor chat to describe it ("when the player picks up a crystal, freeze nearby enemies for 2 seconds and play a chime"). Iterate locally with pnpm dev. When it feels right, push.
Step 7: Wire the win/lose state. A 60-second build with a real ending feels like a game. A 60-minute build with no ending feels like a tech demo. Always wire the win screen first, then everything else.
Saturday 1pm - 8pm: Add One Level
Step 8: Build one polished level. Not three half-baked ones. Use placeholder cubes for geometry. Use the skill's stock character. Tune feel - jump height, camera lag, particle intensity.
Step 9: Add a tutorial overlay. A two-sentence "WASD to move, click to fire" popup on first launch saves your launch from confused players who give up in 8 seconds. Cursor can generate the React (or vanilla DOM) overlay in 30 seconds.
Step 10: Push every hour. Each push gets a Vercel preview URL. Send each one to a friend. The feedback loop is the secret weapon of this stack.
Sunday 10am - 4pm: Polish
Step 11: Add three sounds. Footstep loop, ambient pad, win sting. Even three sounds lift a weekend prototype dramatically. Free sources: freesound.org, opengameart.org.
Step 12: Add juice. Particles on hit, screen shake on impact, number popups on score. Juice is what makes a 48-hour build look like a 6-month one in a GIF. Ask Cursor to add a "screen shake of intensity 0.3 for 150ms when the player takes damage" - it will write the camera-shake hook in five seconds.
Step 13: Run a Lighthouse pass. Open the Vercel URL on a phone and run Chrome DevTools Lighthouse. Three.js bundles are usually around 400 KB to 1.5 MB. If you are over 3 MB, ask Cursor to enable code splitting on the heavy modules. Vercel's gzip and brotli will handle the rest.
Step 14: Bug pass. Play your live URL five times in a row. Fix anything that breaks twice. Ignore anything that breaks once.
Sunday 4pm - 8pm: Launch
Step 15: (Optional) Set a custom domain. If you bought a name-game.com ahead of time, add it in Vercel's project settings. SSL is automatic. Otherwise the *.vercel.app URL is fine - it has HTTPS, it is shareable, and it loads everywhere.
Step 16: Record a 15-second GIF of the best moment. Use the live URL, not localhost. The GIF is what gets clicked on Twitter, Bluesky, and Reddit.
Step 17: Create an itch.io page (optional but high-leverage). Title, one-line tagline, three screenshots, the GIF, controls, credits, and an embed of your *.vercel.app iframe (itch.io supports iframe embeds for HTML5 games). Now you have two URLs - one for casual sharing and one for the gamer audience.
Step 18: Post the link. Twitter, Bluesky, your dev community Discord, r/IndieDev, r/threejs, r/WebGames. Always lead with the GIF. Always include the URL. If you used a Vibe Skills skill, mention it in the devlog post - other devs reading along will want the same starter.
How to Avoid the Three Most Common Vercel Deploy Failures
Three things break almost every solo Three.js + Vercel weekend. All three are 5-minute fixes if you catch them on Friday night, and 5-hour rabbit holes if you discover them on Sunday at 7pm.
- Wrong build output directory. Vite defaults to
dist/. Vercel auto-detects Vite and usesdist/. If you customized the output, setoutputDirectoryinvercel.jsonor the project settings or your deploy will be a 404. - Asset paths that work locally but 404 in production. Use relative paths or the Vite
import.meta.env.BASE_URLhelper for any runtime-loaded GLB, texture, or audio file. Hardcoded/assets/...paths usually work, but copy-pasted absolute Windows paths absolutely will not. - CSP headers that block pointer lock or audio context. First-person games need pointer lock. Audio needs user-gesture activation. Any skill from the 3D Games category ships with the right
headersblock invercel.jsonto handle this. If you wrote your own from scratch, copy the config from the skill's repo.
The deploy works on Friday, so when these break on Sunday it is always because of a recent change. git bisect is your friend. Even better: keep pushing every 30 minutes so the broken commit is small.
Frequently Asked Questions
Will the Vercel free tier really hold up if my game gets traffic?
Yes for a weekend launch and the first few weeks. Free tier gives you 100 GB bandwidth per month, which is roughly 20,000 plays of a 5 MB Three.js build. If you hit that ceiling, the Pro plan is $20/month and bumps you to 1 TB. For a weekend ship, free is more than enough. Skills on Vibe Skills ship with build configs that minimize bundle size, which stretches the free tier further.
Can I use a custom domain on the free Vercel tier?
Yes. The free tier supports custom domains with automatic HTTPS. Buy a domain (Namecheap, Cloudflare Registrar, Porkbun), point it at Vercel, and Vercel handles the SSL certificate. The setup takes about 10 minutes. If you don't have a domain, the name-game.vercel.app URL is short enough to share on any platform.
Is this stack OK for a game jam submission?
Yes, and it is one of the best stacks for jam submissions. Most jams (Ludum Dare, GMTK, js13k, GitHub Game Off) accept any web-playable URL. A *.vercel.app link works exactly like an itch.io URL for judges. Many jam winners ship to both - itch.io for the gamer audience, Vercel as the fast canonical URL.
Do I need to know Three.js before starting?
You need enough JavaScript to read what Cursor writes and tune values. You do not need to write Three.js from scratch. The skills on Vibe Skills generate the engine setup, camera, controller, and build config. Cursor handles the gameplay code from your descriptions.
What happens if my Vercel build fails on Sunday at 7pm?
The most common cause is a TypeScript error or a missing env var. Vercel shows the build log with the failing line highlighted. One click in the dashboard rolls back to the last working deploy and promotes it to production. Because every push is a preview deploy, you are never more than one commit from a working build. This is why pushing every 30 minutes on Saturday and Sunday matters.
Can I sell or modify the code from a Vibe Skills 3D game skill?
Yes. Skills on Vibe Skills ship with a commercial-friendly license that lets you release the code in your own game on Vercel, itch.io, Steam, or anywhere else. Creators keep the IP of the skill, you keep the IP of the game built on top.
What if I don't want to use Cursor?
Any AI editor that can edit project files works. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - any of them can iterate on the Three.js scaffolding from a Vibe Skills skill. The skill itself is editor-agnostic.
Ship It This Weekend
The reason most solo devs never ship a 3D game is not the engine, the genre, or the skill ceiling. It is the Friday night where they "just research a bit more" and never start. The next free weekend you have, follow the four-phase plan: install a Vibe Skills 3D game skill, push to GitHub, connect Vercel, deploy by Friday 8pm, then spend Saturday and Sunday iterating on a live URL.
Your portfolio of ten weekend-shipped games on Vercel is worth more than your hypothetical six-month dream engine project. The shipped one always wins. The free Vercel URL is the proof.
Browse 3D game skills on Vibe Skills →
Skip the Three.js boilerplate marathon. Install a 3D game skill on Vibe Skills, push to Vercel, and have a live URL by Sunday night.