TEXT

《Syllabic Beats: Pulse Runner》

Contributed by loshu2000

Improved by Laravel Company · 2026-09-07

Act as a Principal Audio-Visual Game Engineer specializing in immersive, rhythm-based interactive experiences and real-time physics simulation.

Your task is to design a comprehensive technical and artistic prototype specification for a 3D locomotion game prototype titled 《Syllabic Beats: Pulse Runner》. The primary educational goal of this game is to teach word stress and syllable counting through precise auditory-visual synchronization.

I. Core Game Mechanics (The Synchronization System):
The game must feature a dynamic, infinite 3D track and a rolling metallic sphere. The core mechanic revolves entirely around synchronizing user input with real-time audio analysis.

  1. Procedural Environment: The 3D track must be infinitely generated with varying heights and gaps.
  2. Audio Input Mapping: The geometry of the gaps (height and distance) must be dynamically driven by the acoustic properties of background music or spoken vocabulary words. Specifically, the amplitude peaks and frequency shifts of multi-syllable words must directly dictate the size and placement of the required jump obstacle.
  3. Precise Interaction: The user's jump action (click/tap) must generate an impulse vector. For a successful jump, this vector must perfectly align with the calculated peaks of the audio amplitude to ensure the sphere lands safely on the next geometric platform.
  4. Failure State: If the synchronization is imperfect (the jump impulse does not match the audio peak), the sphere must fall into the void, immediately triggering a system-wide "Matrix Reset" event, emphasizing the necessity of perfect timing.

II. Visual and Aesthetic Design (Vaporwave Style):
The visual style must adhere strictly to a high-contrast Vaporwave aesthetic, emphasizing chrome, neon, and infinite space.

  1. Environment: Implement a grid-like, infinite horizon structure.
  2. Sphere Design: The rolling sphere must have highly reflective, chrome-like textures.
  3. Lighting Dynamics: The neon lighting paths (using teal and hot pink hues) must react dynamically and visibly ripple in response to the real-time background sound frequency and amplitude.

III. Required Technology Stack Specification:
Detail the implementation using the following specified technologies, focusing on the system architecture required for real-time performance:

  1. 3D Rendering: Three.js for real-time mesh rendering and scene management.
  2. Audio Processing: Web Audio API, specifically utilizing the AnalyserNode for real-time analysis of audio amplitude and frequency data.
  3. Collision/Physics: Oimo.js for lightweight, low-latency collision tracking and position management.

Deliverable:
Provide a detailed technical design specification, outlining the system architecture, the data flow between the Web Audio API and the Three.js physics engine, the mathematical relationship used for gap generation, and the implementation strategy for achieving the required synchronization fidelity. Focus on the engineering challenge of marrying precise timing with dynamic audio input.

Original prompt (before our improvements)

I want you to act as a Principal Audio-Visual Game Engineer. Design an interactive 3D rhythm-based locomotion game prototype for teaching word stress and syllable counting. Game Name: 《Syllabic Beats: Pulse Runner》. Game Function: A 3D infinite track is procedurally generated with varying heights and gaps. A metallic sphere automatically rolls forward along the track. The user clicks or taps the screen to make the sphere jump over the gaps. The distance and height of each gap are directly driven by the acoustic wave frequency of multi-syllable vocabulary words played in the background. The game mechanics require perfect syncing: the jumping impulse vector must match the peaks of the audio amplitude to land safely on the next geometric platform, otherwise the sphere falls into the void and triggers a matrix reset. Design Style: Vaporwave aesthetic. Features a grid-like infinite horizon, chrome-reflective textures on the rolling sphere, and neon-pink and teal lighting paths that ripple reactively to the background sound frequency. Technologies Used: Three.js for real-time mesh rendering, the Web Audio API AnalyserNode for real-time audio amplitude and frequency analysis, and Oimo.js for lightweight, low-latency collision tracking.