JARVIS

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 responsive, portrait-oriented interactive voice assistant experience titled “JARVIS,” presented as a polished local browser prototype rather than a conventional score-based game. Use a nearly black/navy background with a subtle radial gradient that is brighter teal-blue behind the upper center and fades to deep black at the edges. Center the interface in a narrow mobile-friendly column, capped around 560px wide, filling the viewport height with safe-area padding.

At the top, show a horizontal header with the cyan, widely letter-spaced “JARVIS” brand on the left and a thin outlined pill on the right reading “LOCAL PROTOTYPE” in small uppercase muted blue-gray text. Below it, center a hero area with the uppercase eyebrow “VOICE INTERFACE ONLINE,” a large bold futuristic/technical “JARVIS” heading, and a live status line initially reading “Tap the microphone to begin” in bright cyan.

The primary interaction is a large circular microphone button centered below the status. Make it roughly 48vw wide up to about 210px, perfectly round, with a dark teal radial-gradient interior, a thin glowing cyan outline, multiple soft blue/cyan outer glow rings, and an inset glow. Draw a simple white microphone glyph in the center using a rounded vertical capsule, a stem, and a U-shaped lower support. The button must be touch-friendly and visually depress/brighten briefly when tapped. Its accessible label starts as “Start listening.”

When the user taps the microphone, use the browser’s native SpeechRecognition or webkitSpeechRecognition API if available. Configure it for the browser language, one utterance at a time, interim results enabled, and one alternative. While recognition is active, change the status to “Listening...”, add a “listening” visual state to the microphone (white outline and stronger pink/red glow), and change its accessible label to “Stop listening.” Tapping the microphone again while listening stops recognition. Show interim recognized speech immediately and replace it with final speech when available. On recognition end, remove the listening style and restore the accessible label; if the status was still “Listening...”, change it to “Ready — tap the microphone.”

Below the microphone, create a large rounded transcript panel with a translucent dark blue-black background, subtle cyan border, shadow, and generous padding. It should flex to use available vertical space, have a minimum height around 150px, and allow transcript overflow to scroll. Label it “RECOGNIZED SPEECH” in small uppercase, widely tracked muted text. Initially display “Your words will appear here.” in larger light text. Beneath it, show a muted hint exactly along the lines of: Try: “Hello Jarvis”, “What is your name”, “What time is it”, “What is today’s date”, or “Stop”.

Implement the command behavior exactly: normalize recognized text by lowercasing, removing periods, commas, exclamation marks, question marks, and apostrophes, then trimming whitespace. If the text contains “stop”, cancel browser speech synthesis and set the status to “Speech stopped.” If it contains “hello jarvis” or is exactly “hello”, respond with “Hello. JARVIS is online and ready.” If it contains “what is your name” or “whats your name”, respond with “My name is JARVIS. I am your local browser voice assistant.” If it contains “what time is it” or “tell me the time”, respond with the current device time formatted according to the user’s locale with hour and two-digit minute. If it contains “what is today’s date”, “what is todays date”, or “what date is it”, respond with the current local date formatted as weekday, full year, full month, and day. For any other recognized phrase, respond with “I heard: [the original recognized text]. Try one of the sample commands on screen.”

For every non-stop command, first set the status to “Thinking...”, wait briefly (about 160ms), then use browser speechSynthesis to speak the response with rate 0.95, pitch 1.0, and full volume. Cancel any prior speech before speaking. While speaking, show “Speaking...”; when speech ends, show “Ready — tap the microphone”; on speech error, show “Speech output stopped” in a danger pink color. If speech synthesis is unavailable, show “Speech output is not supported” as an error instead.

Under the transcript panel, place two equal-width outlined rounded buttons: “Stop speaking” and “Clear text.” Stop speaking cancels current speech and sets status to “Speech stopped.” Clear text restores the transcript placeholder and sets status to “Ready — tap the microphone.” Include a centered, small muted footer: “Uses your browser’s built-in speech features — no account or paid API.”

Handle unsupported or failed recognition visibly: if speech recognition is unavailable, set an error status reading “Speech recognition is unavailable in this browser” and replace the transcript with “Try Chrome on Android for built-in speech recognition.” Map microphone permission denial to “Microphone permission was denied,” no speech to “No speech detected,” and missing microphone to “No microphone was found”; show other recognition errors as “Recognition error: [error].” Use a pink/red color for error statuses. Preserve the restrained visual language throughout: Orbitron-like futuristic font for the branding/headings, clean sans-serif body font, light cyan text, muted blue-gray secondary text, thin translucent cyan borders, dark glass panels, and soft neon blue lighting. Keep the layout responsive; on shorter screens reduce the hero top padding and shrink the microphone while keeping the transcript and controls usable.