Whisperglass

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.

Recreate a single-screen interactive web experience titled “Whisperglass,” an enchanted gossip mirror rather than an action game. Use a full-viewport Three.js 3D scene behind a fixed HTML/CSS interface. The scene should be portrait-like and centered: a floating theatrical face mask inside an ornate gold/brown mirror frame, on a dark plum storybook backdrop and floor. The mask is pale gray-beige with a softly highlighted surface, dark oval eye holes with tiny pale glimmers, angled dark brows, a small protruding nose, and a dark expressive mouth. Give the mask subtle idle motion: gently bob the mirror vertically and slowly sway/rotate it side to side. Use a perspective camera aimed at the mirror, dark purple fog/background, warm cream/gold key lighting, a purple rim light, soft shadows, reflective metallic frame materials, and a cinematic fairy-tale palette of deep violet, plum, gold, cream, and muted silver. The mirror frame may be loaded as an ornate bathroom-mirror-style 3D asset; if it fails, the mask and interface must remain usable and show a status warning.

The primary interaction is conversation with the mirror. At the bottom/right of the desktop layout (and as a bottom panel on narrow screens), show a translucent dark-purple rounded panel with a thin gold border and shadow. It contains the large cream heading “Speak, sweetheart.”, explanatory text saying that the theatrical 3D mask answers questions or speaks exact lines, the uppercase gold label “YOUR WORDS,” and a large dark textarea with the placeholder: “Try: Who is the fairest of them all?\nOr type an exact line for the mirror to say…”. Provide three controls: a gold gradient pill button labeled “Ask the mirror,” a purple secondary pill labeled “Speak exact text,” and a transparent gold-outline pill labeled “🎙 Listen.” Below them add quick prompt buttons labeled “Fairest?”, “Castle gossip,” and “Prophecy.” Include a status line initially reading “Ready when you are.” and a small hint that voice input uses browser speech recognition and spoken replies use the browser’s built-in voice.

At the top left, display the small uppercase gold brand “WHISPERGLASS.” At the top/right on desktop, optionally show the subtitle “A 3D enchanted gossip mirror” and a link labeled “View official Shrek reference” pointing to the official DreamWorks Shrek page. Beside/above the panel, overlay a centered cream/gold caption over the scene, initially “Ask me anything, darling.” with the small uppercase subcaption “THE GLASS IS LISTENING.” When the mirror speaks, replace this caption with the exact spoken line.

Implement these exact behaviors. “Ask the mirror” reads the textarea, generates a theatrical fairy-tale reply, speaks it aloud using SpeechSynthesis, puts it in the caption, animates the mask mouth while speaking, and updates status to “The 3D mirror is speaking…”, then “Finished. Ask for another scandal.” when speech ends. “Speak exact text” speaks the textarea verbatim and refuses an empty field with the status “Type the exact line first, darling.” The browser voice should prefer an English voice, use a slightly theatrical rate around 0.93 and pitch around 1.08, cancel any previous speech, and animate the mouth by pulsing its vertical and horizontal scale; also make the face sway very slightly while speaking. If speech errors or is blocked, show “Speech was blocked — tap a button and try again.”

Use these exact question reply rules for the Ask action: empty input returns “Silence is dramatic, but a question would make this scene much more interesting.”; text containing fairest, beautiful, handsome, or pretty returns “Darling, the fairest one is whoever remembered to moisturize before the royal portrait session.”; text containing gossip, latest, news, rumor, or rumour returns “The castle gossip? The prince is practicing heroic poses in a soup ladle. It is not going well.”; text containing prophecy, future, foresee, or destiny returns “I foresee a glittering destiny, two suspiciously convenient plot twists, and a snack after the third act.”; text containing dragon, monster, or beast returns “Please. The dragon has better manners than half the nobility, and at least it tips the minstrels.”; text containing tired, sleep, nap, or sad returns “Your aura says main character. Your typing says you need a nap. Both can be true, darling.”; otherwise return “Darling, the glass has opinions. ” followed by the user text with trailing question/exclamation/period punctuation removed, then “ sounds like the beginning of a tale with excellent hair and questionable decisions.” Quick buttons should fill their corresponding question and immediately ask the mirror.

The Listen button should use window.SpeechRecognition or webkitSpeechRecognition when available, with en-US, no interim results, and place the recognized transcript in the textarea without speaking automatically. While listening, status reads “Listening… speak into the glass.” and the button changes to “⏹ Stop listening”; after recognition, status reads “I heard you. Press Ask or Speak exact text.” If unavailable, status reads “Speech recognition is not available here. Type your line instead.” On recognition failure use “I missed that. Try again or type it below.” and restore the button to “🎙 Listen.” Keep the design responsive: on screens under roughly 760px hide the top-right tag, stack the mirror/caption above the compact panel, reduce padding and textarea height, and keep all controls touch-friendly. Do not add scores, enemies, levels, inventory, or other gameplay systems; this is a polished interactive talking-mirror vignette.