Beat Pad

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 drum-pad instrument titled “Beat Pad.” It is a playable six-pad drum kit rather than a score-based game: the user taps/clicks pads or uses the keyboard to trigger synthesized percussion sounds, with an optional hit recorder.

Visuals and layout: use a dark near-black navy background with a subtle radial gradient brighter toward the upper center. Center a full-height app panel with responsive padding, maximum width about 960px, and a clean system sans-serif font. At the top, show the gold uppercase eyebrow “BROWSER DRUM KIT,” a large bold white “Beat Pad” title, and on wider screens a muted right-aligned hint reading “Ketuk pad atau tekan tombol keyboard untuk mulai nge-beat.” Under the header, place a thin rounded horizontal activity meter with a dark track and a fill gradient from coral/red through yellow to mint green. The fill is normally empty and briefly becomes full on every hit before fading out.

The main stage is a responsive two-column grid of six large rounded rectangular pads with small gaps. The KICK pad occupies two rows in the left column and has a warmer dark burgundy gradient; the other pads use dark blue-gray gradients. Each pad has a large outlined circular drum-like ring near its upper/central area, a bold colored uppercase label, and a small muted keyboard shortcut below it. Pad colors: KICK coral/pink with “A / Space”; SNARE light blue with “S”; HI-HAT pale yellow with “D”; TOM lavender with “F”; CRASH mint/turquoise with “J”; CLAP pink with “K.” Arrange the remaining pads as SNARE above HI-HAT in the right column, TOM lower-left, CRASH lower-right, and CLAP at the bottom-left, matching the six-pad grid. On narrow mobile screens retain two columns, reduce gaps and corner radii, and hide the header hint. Pads should have rounded corners around 18–24px, subtle inset highlight, deep shadow, and a soft glow around their colored ring. Make them feel tactile: while pressed or hit, briefly translate down about 3px, scale slightly smaller, brighten, and change to a more inset/depressed shadow.

Interaction: every pad must respond to pointer/touch down without scrolling or text selection, and release pointer capture afterward. Also listen globally for non-repeating keydown events: A or Space triggers KICK, S triggers SNARE, D triggers HI-HAT, F triggers TOM, J triggers CRASH, and K triggers CLAP; prevent the browser’s default action for these controls. A hit should retrigger the pressed animation, play its corresponding synthesized sound, fill the meter, and clear the meter after roughly 110ms. Do not add gameplay obstacles, scoring, lives, or an automatic beat sequence.

Sound behavior using Web Audio: initialize/resume an AudioContext on the first interaction. KICK is two sine tones, a short higher pitch around 145 Hz and a deeper roughly 55 Hz tone with longer decay. SNARE combines a short burst of generated white noise with a quiet triangle tone around 190 Hz. HI-HAT is a very short white-noise burst. TOM is a decaying sine tone around 170 Hz lasting about 0.28 seconds. CRASH is a longer decaying white-noise burst around 0.6 seconds. CLAP is three short decaying noise bursts spaced approximately 25ms apart. Use gain envelopes that decay exponentially to near silence.

Bottom controls: below the pads, show a dark rounded controls bar with a faint border. Include a rounded button labeled “● Rekam,” a rounded dark button labeled “Hapus,” a muted status text initially “Siap bermain,” and a gold “120 BPM” readout. The BPM is a display only; do not implement tempo playback. Clicking “● Rekam” starts recording, resets the hit list, changes the button to “■ Stop” with a dark red/burgundy background, and changes the status to “Merekam...”. While recording, each hit stores its sound kind and elapsed time from recording start, and the status displays “Merekam · N hit” with the current count. Clicking Stop restores “● Rekam” and the normal button styling and shows “Selesai · N hit direkam” if any hits were captured, otherwise “Siap bermain.” Clicking “Hapus” clears all recorded hits, stops recording, restores the record button, and shows “Rekaman dihapus.” After a normal non-recording hit, show “Memainkan KICK,” “Memainkan SNARE,” etc., using the triggered sound name in uppercase. Keep the interface compact and vertically fitting the viewport, with overflow hidden and touch-friendly buttons.