Patch

A hardware-inspired visual synth studio with a three.js Lissajous scope, oscillator controls, a step sequencer, a mixer and a searchable preset library.

• Best forDevelopers building synthesizer, music-production and sound-library interfaces.

• Studio

  Turn oscillator, filter, envelope and macro controls while the three.js scope morphs and a silent keyboard phrase follows the visual tempo.

• Sequencer

  Edit a 16-step, eight-track pattern, drag velocities, switch pattern pads and adjust the locally simulated swing and groove.

• Mixer

  Move channel faders and sends, use mute and solo, and inspect meters, vectorscope and a simulated spectrum display.

• Library

  Search and filter fictional presets and samples, favourite items, inspect procedural waveforms and load a patch into Studio.

• A scope driven by controls

  A three.js Lissajous figure changes with oscillator ratios, shapes and levels. Macros and the shared BPM clock affect the curve and its visual pulses.

• Hardware-style interactions

  Accessible knobs, ADSR handles, keyboard highlights, step toggles, velocity editing, faders and mute/solo controls update the local visual instrument.

• Preset browser

  Search, categories, tags, favourites, waveform previews and load-in-Studio actions connect the library to the editable demonstration patch.

• Responsive and reduced motion

  Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

No sound is produced. This is a visual interface template, with no audio engine, MIDI, DAW, plug-in host or sample storage. Levels and spectra are simulated from the visual clock; edits and favourites are local and are not saved to a backend.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
• FontsBricolage Grotesque, Martian Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.