Echo

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 polished single-page browser-based conversational companion app titled “Echo,” not a combat or movement game. Use a dark navy/indigo interface with a subtle radial glow near the top center, pale white text, muted blue-gray secondary text, cyan and purple accents, rounded cards, thin translucent borders, and soft shadows. Keep the whole app within the viewport with a centered maximum width of about 900px and small outer padding.

Layout: a header at the top with a rounded square logo containing a four-point sparkle/star symbol, a brand block reading “Echo” and a small live status beneath it initially reading “Ready to talk,” plus a pill on the right labeled “Browser AI demo.” Below, use a two-column layout: a narrower left profile card and a larger right chat card. On smaller screens, stack them vertically, with a compact horizontal profile area above the chat.

The left profile card should have a dark blue gradient background, large rounded corners, a subtle cyan radial glow behind the character, and a friendly floating abstract avatar: a 150px approximately circular, slightly organic blob with a cyan/light-blue to violet gradient, inset purple shading, and a cyan glow. Give it two narrow vertical dark oval eyes with a faint light glow and a simple curved smiling mouth. Animate the avatar gently floating up and down and rotating by a couple degrees. Beneath it show the name “Echo” in bold, the description “A friendly talkable companion. Ask a question, tell a story, or say hello.”, and three small outlined tags: “voice input,” “speaks back,” and “memory.” When the character is speaking, animate the mouth opening and closing rapidly and update the status to “Echo is speaking.”

The right card is a chat panel with a scrollable message area and a composer fixed along the bottom, separated by a thin border. Start the conversation with one left-aligned Echo message: “Hi! I’m Echo. Tap the mic or type something, and I’ll talk back.” Each message is a rounded bubble with a small sender label below: Echo messages are left aligned with a translucent cyan background and subtle cyan border; user messages are right aligned with a blue-purple gradient. Limit bubbles to roughly 82% width, preserve line breaks, and automatically scroll to the newest message.

At the bottom composer, place a rounded secondary microphone button showing a microphone emoji/icon, a dark rounded text field with placeholder “Type or tap the mic…”, and a bright cyan rounded send button showing a right-pointing arrow/play-style glyph. The send button submits typed text; ignore blank input. On send, immediately append the user’s text, clear the field, set the status to “Echo is thinking,” then after approximately 320ms append and speak the local reply.

Implement local built-in response logic with no server: match case-insensitively and trim input. If the user says hi/hello/hey/yo, answer “Hey! I’m Echo. What should we talk about?” If they ask about the name, answer “I’m Echo — a little browser-based AI companion with a voice.” If they ask how Echo is, answer “I’m running smoothly and ready to listen.” If they mention a joke, answer “Why did the computer get cold? It left its Windows open.” If they mention time, answer with the user’s local time formatted as hour and minute with AM/PM. If they mention remember, report how many earlier messages are in the conversation, or say “I’ll keep track of this conversation while the page is open.” when there are none. If they mention help, answer “Try asking me my name, asking for a joke, or just tell me what’s on your mind.” If the input ends in a question mark, answer “That’s a thoughtful question. In this local demo I can chat with simple built-in replies, and I can speak my answer aloud.” For other text, randomly choose among: “That sounds interesting. Tell me one more detail.”, “I’m listening. What happened next?”, “Nice — I like where this is going.”, and “Thanks for telling me. How does that make you feel?”

Use the browser Speech Synthesis API to speak every Echo reply, cancelling any prior speech, with a slightly lively rate around 1.02 and pitch around 1.08. While speaking, animate the avatar mouth and show “Echo is speaking”; when finished return to “Ready to talk.” Use browser Speech Recognition when available: clicking the mic starts one-shot recognition in the browser language, changes the mic control to a stop icon and status to “Listening…”, then puts the transcript into the input and sends it automatically. Stopping or ending recognition restores the microphone icon and ready status. On recognition failure show “Mic unavailable — type instead.” If speech recognition is unavailable, disable the mic and show “Ready to type.” Keep conversation history in memory for the current page session, with each entry storing sender and text, and expose only the current conversation behavior—not persistence or a remote AI backend.

Add a small centered footer beneath the panels reading: “Voice features use your browser's speech tools. This demo responds locally without a server.” Make controls visibly interactive with focus styling, pressed-state feedback, and cyan focus borders. Use responsive CSS so the desktop profile card is approximately 270px wide, while mobile uses a stacked layout and a smaller horizontal avatar/profile presentation. Keep the visual result faithful to a calm, friendly, futuristic browser AI demo: no score, health, enemies, levels, or gameplay HUD.