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.

Rebuild a responsive browser drum-machine interface titled “Beat Pad.” It is a playable touchscreen/keyboard beat pad, not an animated world: use a centered single-column app on a dark navy background with a subtle radial glow at the top, white modern system/Inter-style typography, rounded panels, and soft shadows. On narrow screens, show four large colored drum pads in a 2-by-2 grid; on wider screens the CSS may reflow them into one row of four. Keep the app constrained to the viewport with responsive sizing and tighter spacing on short screens.

At the top, place a header with the large title “Beat Pad” on the left and a small outlined pill reading “DRUM MACHINE” on the right. Beneath it, add a dark translucent rounded status panel with a thin blue-gray border and shadow. The left side displays a large static “120,” the label “BPM,” and the hint “Space = kick.” On the right are two rounded buttons: a pink/coral recording button initially labeled “● Rekam,” and a dark blue-gray button labeled “Hapus.” Use the Indonesian labels exactly as shown.

The main interaction is four large, tactile drum pads. Each pad is a rounded rectangle with an inset darker lower edge, drop shadow, and a brief pressed animation: translate downward slightly, scale down a little, and brighten for roughly 100ms. Arrange them in this order in the narrow 2x2 layout: pink/magenta KICK with a drum emoji icon and keyboard badge A; orange KICK? No, label this second pad SNARE, with a lightning-bolt icon and badge S; teal HI-HAT with a simple circular “◉” icon and badge D; purple TOM with a speaker emoji icon and badge F. The exact pad labels are KICK, SNARE, HI-HAT, and TOM. Give each pad a small translucent keyboard letter in its top-right corner, a large icon centered above a bold uppercase name, and vivid gradients: kick pink/red to deep magenta, snare orange to burnt orange, hi-hat turquoise to dark teal, tom violet to deep purple.

Clicking/tapping a pad must immediately trigger its corresponding synthesized drum sound using the Web Audio API and flash that pad. Implement four distinct sounds: kick as a sine oscillator dropping from about 145Hz to 48Hz with a short decay; snare as filtered noise plus a brief triangle tone; hi-hat as high-pass filtered noise with a very short decay; and tom as a sine oscillator dropping from about 210Hz to 100Hz with a longer decay. Create/resume the AudioContext only after user interaction. Support keyboard input A, S, D, and F, and also Space as an alias for kick; prevent browser default behavior and ignore repeated keydown events.

Below the pads, add a dark rounded “pattern” panel. Its header reads “Pattern kamu” on the left and a teal “0 hit” counter on the right initially. Beneath it, display 32 small horizontally arranged rounded step indicators, dark blue-gray when inactive. Recording is off initially. Clicking “● Rekam” starts recording, clears the previous hit list, changes the button to “■ Stop,” changes it to the pink recording style, and timestamps each subsequent hit while recording. Every recorded hit increments the counter (using singular-looking text format such as “1 hit” and “2 hit”) and makes the most recent up-to-32 step indicators active with the orange accent/glow. The visualization is only a count/active-step strip; it does not need to show different colors or drum types. Clicking “■ Stop” ends recording and restores “● Rekam.” Clicking “Hapus” clears all recorded hits, stops recording, restores the record button, and returns the count and all steps to zero/inactive. Tapping pads outside recording still plays and flashes sounds but does not increment the pattern.

Finish with centered muted helper text: “Tap pad atau tekan A S D F · Rekam pola beat-mu”. Use touch-friendly controls, disable text selection/tap highlight on pads, and preserve the polished neon dashboard look with rounded corners, thin blue-gray borders, responsive layout, and no extra gameplay, score, lives, or navigation features.