Skip to content

Arcade › Capsule Collector

Capsule Collector

  • 3d
  • collection
  • casual
  • simulator
  • ui-focused
0
Remix it Discord

7 plays

How to play

Click the game above and it runs right here in your browser. No download, no installer, no account needed. Teresa built it with Cinevva, so it works on a phone or a tablet too.

Discussion

Nobody has said anything about Capsule Collector yet. Play it, then tell Teresa what you would add next.

Make your own game

Capsule Collector was built by Teresa with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.

Remix Capsule Collector opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.

Read the build brief for Capsule Collector

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a desktop-first collection-tracker game called “Capsule Collector” (the visible implementation may use the subtitle “Mini Capsule Collector”) with a dark, polished sci-fi UI and a simple interactive Three.js 3D scene.

Layout: Use a full-height app with a translucent dark top bar. On the left of the header show a small glowing mint circular icon, the title “Mini Capsule Collector,” and the subtitle “Open capsules. Track your collection. Export your save.” On the right provide buttons: a mint-accented “Open Capsule (O)” primary button, “Checklist (L)” secondary button, “Export,” “Import,” and a pink/red “Reset (R)” danger button. The main content is a two-column layout on wide screens, collapsing to one column on narrower screens. Use rounded panels, subtle borders, glassy translucent backgrounds, soft shadows, pale blue-white text, and mint/blue gradient accents. The page background is nearly black/navy with large faint radial blue and green glows.

Left column: show a large rounded 3D stage containing a WebGL canvas. The camera is a perspective view aimed at a floating capsule above a flat dark circular platform. The scene has a dark navy foggy background, sparse distant white star particles, a low cylindrical ground disk, and a glowing mint/teal torus ring around the capsule. The capsule is a glossy opaque-white spherical capsule made from a top and bottom hemisphere, separated by a thin blue horizontal torus seam. It floats slightly and can be click-dragged/orbit-rotated with mouse or touch; disable panning and allow zoom within reasonable limits. Use ambient light, a bright white directional key light, and a cool blue rim light to create visible highlights and shading. Overlay a small dark pill at the lower-left of the stage reading “Drag to rotate • Click Open Capsule.”

Below the stage, add a “Last Pull” panel. Initially show a large em dash, a neutral rarity pill containing an em dash, “Owned: 0,” and the text “Open a capsule to reveal a collectible.” After opening, show the item’s name, rarity-colored pill, current owned count, and its description.

Core loop: Clicking “Open Capsule,” or pressing the O key, chooses one item randomly and increments the total pull count and that item’s owned count. Prevent opening again while the animation is running. Animate the capsule for roughly one second: spin it rapidly, tilt it slightly, move the top hemisphere upward and the bottom hemisphere downward, and reveal a small rotating inner collectible mesh that pops into view partway through. Tint the revealed inner mesh by rarity near the end of the animation: Common white, Uncommon mint, Rare light blue, or Ultra gold. Then close/reset the capsule after a short hold. Include lightweight optional synthesized tones: an opening sound and a rarity-dependent reveal sound, with higher notes for rarer items.

Use this fictional starter checklist of 14 items, with no real brands or logos:
- Common: Crunch Bites (“A tiny bag of crunchy snack bites.”), Fizz Pop (“A miniature soda can with a bold label.”), Sunflakes Cereal (“Bright box art — guaranteed to look cute on a shelf.”), BubbleClean Soap (“A pocket-size soap bottle with a flip cap.”), Redcap Ketchup (“Classic squeeze bottle in miniature form.”), Saltwave Chips (“Wavy chips in a shiny bag.”)
- Uncommon: Moon Scoop (“A tiny tub of ice cream with a cosmic vibe.”), Dragon Heat Sauce (“Warning label included — for display only.”), SilkSwish Shampoo (“Smooth gradients and a satisfying bottle shape.”), Midnight Bar (“Dark wrapper, shiny highlights.”)
- Rare: Rocket Roast (“A premium mini coffee pack for the serious collector.”), Neon Bolt Energy (“Bright neon label — looks great in a display case.”), Holo Sticker Sheet (“A flashy rare pull with holographic shine.”)
- Ultra: Golden Mystery Mug (“Ultra-rare gold finish — the brag pull.”)
Use weighted rarity drops: Common 72, Uncommon 22, Rare 5, Ultra 1. The inner object can be represented by a simple small faceted/dodecahedron placeholder rather than a detailed branded model.

Right column: show a “Collection” panel with a header, progress text such as “0 / 14 owned,” and a horizontal progress bar whose fill is a mint-to-blue gradient based on unique items owned. Add controls for a text search box (“Search…”), a filter select with All, Missing, Owned, and Duplicates, and a sort select with Sort: Name, Sort: Rarity, and Sort: Owned Count. Below, display a scrollable three-column grid of rounded collectible cards. Each card shows the item name, a rarity badge, and either “Missing” or “Owned: N.” Missing cards are dimmed. Add a small “Edit” button per card that opens a modal allowing the player to set that item’s owned count to a nonnegative integer; saving updates progress and persistence. Use rarity border/badge accents: neutral white for Common, mint for Uncommon, blue for Rare, and gold/orange for Ultra.

Below the collection, add a “Tips” panel with these visible tips: “Use Export to download your collection JSON,” “Use Import to paste a save and restore your progress,” and “Want your real checklist? I can add a ‘Load item list’ button.” Add a small disclaimer that this is a fan-made collection tracker template using fictional item names and no real brand assets.

Persistence and dialogs: Save collection counts, total pulls, and last pulled item in localStorage under “miniCapsuleCollectorSave_v1,” restoring them on reload. Export a downloadable JSON save file named “mini-capsule-collector-save.json.” Import should open a dark modal with a textarea for pasted JSON and restore a valid save, showing an error modal if parsing fails. Reset should open a confirmation modal requiring the player to type RESET before clearing local progress. Use native dialog-style modals with Cancel and primary action buttons. Keep the checklist itself in localStorage under “miniCapsuleCollectorChecklist_v1” and support normalized item records with id, name, rarity, and description, while retaining the listed default checklist when none exists. The visible Checklist button can be present as part of the header UI, but the core working interactions are opening, collection filtering/search/sorting/editing, export/import, and reset.

More free browser games

Browse the whole Arcade →