Meme Soundboard

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 browser game titled “Meme Soundboard,” a playful no-score soundboard rather than a traditional win/lose game. Use a dark full-screen background with subtle blue/purple radial glows. The main layout is a vertically arranged app with generous responsive padding: a header, an expanding grid of sound pads, and a footer/status bar.

Header: show the large bold white title “Meme Soundboard” with tight letter spacing. Beneath it, show the muted subtitle “Tap a pad. Make a noise. Be a little annoying.” On the right on wide screens, show a rounded translucent badge reading “ORIGINAL MINI SOUNDS · NO UPLOADS”; on narrow screens stack the header and badge vertically.

Main interaction: create eight large rounded rectangular buttons in a grid. Use four columns on desktop and two columns on screens around 640px wide or narrower. The grid should fill the available vertical space, with even gaps, and each card should have a colorful diagonal gradient, white text, a subtle inset highlight, soft dark shadow, and a translucent circular highlight shape overlapping its lower-right corner. Cards should slightly scale down, rotate by about -1 degree, and brighten when pressed or activated. Each card contains a small numbered label, a large bold sound name, and a small hint followed by its keyboard shortcut:
1. “67” — hint “six… seven!” — shortcut [1] — pink/magenta gradient.
2. “BRUH” — hint “deep drop” — shortcut [2] — orange/coral-to-pink gradient.
3. “VINE BOOM” — hint “dramatic impact” — shortcut [3] — green/teal-to-blue gradient.
4. “WOW” — hint “sparkly surprise” — shortcut [4] — blue/purple-to-violet gradient.
5. “BONK” — hint “cartoon hit” — shortcut [5] — yellow/orange gradient.
6. “RIZZ” — hint “confidence blip” — shortcut [6] — teal-to-cobalt gradient.
7. “HAHA” — hint “tiny laugh loop” — shortcut [7] — pink/red-to-purple gradient.
8. “NOPE” — hint “wrong answer” — shortcut [8] — turquoise-to-blue gradient.

Audio behavior: clicking/tapping a pad or pressing its corresponding number key (1 through 8) plays an original synthesized mini sound using the Web Audio API; do not require uploaded audio files. The first interaction initializes/resumes the audio context. Allow sounds to overlap, tracking currently active oscillators/buffers. Implement these recognizable synthesized effects: “67” is a short descending sawtooth followed by a lower square tone and a brief high triangle tone; “BRUH” is a deep descending sawtooth and sine drop; “VINE BOOM” combines a short band-passed noise burst with a heavy descending square/saw impact; “WOW” is a quick ascending four-note sine arpeggio; “BONK” is a descending triangle hit with a little filtered noise; “RIZZ” is a rising square/triangle blip ending with a high sine tone; “HAHA” is a repeating sequence of short changing triangle tones; “NOPE” is two descending square-wave tones. Shape each sound with short attacks and exponential releases so they feel like compact sound effects.

On activation, update the footer status from “Tap any sound to unlock audio.” to “Playing [NAME] · press [KEY] again anytime”. Trigger a brief radial white flash centered at the pointer location for pointer activation, or centered on the viewport for keyboard activation. Remove the pad’s active visual state after roughly a quarter second. Footer: keep the status text on the left and provide a rounded translucent “Stop all” button on the right. Pressing Stop all must stop all currently playing audio sources, clear the active-source tracking, and change the status to “All sounds stopped.” Ignore repeated keydown events so holding a key does not retrigger continuously. Include accessible button semantics and touch-friendly pointer interaction. Keep the presentation clean, colorful, polished, and faithful to the shown soundboard UI; there is no score, timer, player avatar, obstacle, progression, or game-over state.