Original size 2480x3500

Aura | Web Synthesizer

PROTECT STATUS: not protected
Longread translated automatically
The project is taking part in the competition
big
Original size 1920x251
big
Original size 1920x463
big
Original size 1920x902
big
Original size 1920x251
big
Original size 1920x906
big
Original size 1920x251
big
Original size 1920x903
Original size 1920x251
Original size 1519x950
Original size 1920x633
Original size 1920x251
Original size 1920x1006
Original size 1920x171
Original size 1920x251
Original size 1920x917
Original size 1920x251
Original size 1920x917

Prompt Design

AI Model Used: Claude. I worked with it through a dialogue: I described what I wanted to hear and see, attached references and my mockups, tested the result in the browser, and asked it to correct anything that didn’t work or wasn’t to my liking. The AI wrote the code for sound and animation and explained how the effects and channels functioned.How the prompts were structured:1. Goal and Constraints. I gave the AI the course requirements: two synths and drums, effect chains, channels, no piano or complex filters, Tone.js, and p5.js. 2. Imagery and References. I described the mood and attached images featuring soft gradients and auras. 3. Iterative Refinements. One request at a time, and testing the result before proceeding to the next step.Prompt Examples:Make the background color and animation change based on the music being played. In the center, there must be an aura like in my mockup: a white core, a pink body, a warm yellow glow, and thin white rings around it.

Interface Prompt Design

My aesthetic for the aura and overall style were based on references with soft gradients and a sphere mockup. The Claude AI generated layout variations for the panels, drew interface elements (waveform and pattern icons, buttons, sliders), and translated the design into code. I selected the preferred options and requested specific refinements.Prompt Examples:Create several variations for arranging the panels around the aura.

Plan for the End of the Module

Balance the volumes of voices and effects so that nothing clips at the peak; select warmer timbres. Refine small details after the preview and update the mockup in Figma.

Aura | Web Synthesizer
Project created at 12.10.2026