Music App Design Toolbox v3.0
1-9 | R | ⌘S
🎨 Kleurenschema
Stijl-palet
Primaire kleur override
Accent kleur override
Actieve tokens
Contrast WCAG
/* Kies een palet */
Effecten & Textuur
Effect preset
Border radius 12px
Backdrop blur 0px
Oppervlak transparantie 90%
Saturation filter 100%
Brightness 100%
/* Kies een effect */
📐 Layout & Grid
Layout preset
Spacing schaal
Font familie
Kolommen structuur
Gap grootte 0px
/* Kies een layout */
🌑 Schaduwen & Diepte
Shadow preset
Custom shadow builder
X offset 0px
Y offset 8px
Blur 24px
Spread 0px
Kleur
Opacity 40%
Tweede schaduw
/* Builder resultaat */
Aa Typografie
Heading font
Body font
Font size base 16px
Letter spacing 0em
Line height 1.5
Font weight
Text transform
/* Typografie CSS */
Border & Outline
Border stijl
Border breedte 1px
Border kleur preset
Outline preset
/* Border CSS */
🖼 Moodboard
💾 Opgeslagen presets
minimalistisch
🏠 Home
🔍 Discover
📚 Library
Liked
📻 Radio
Settings
Featured Mix
Electronic · Deep House · 2025
Recent played
🎵
Midnight Drive
Neon Atlas
🎸
Static Echo
The Grid
🎹
Void Walker
AURORA
🥁
Bass Canyon
Sub Zero
🎺
Frequency
Orbit Lab
🎻
Resonance
Wavelength
🎵
Midnight Drive
Neon Atlas
1:24
4:12
🔊
🎛 AUDIO EQUIPMENT LAB
Skeuomorphic music hardware simulation — hover & drag to interact
PARAMETRIC EQ
CHANNEL STRIP
COMPRESSOR
GR: -0.0 dB
MASTER VOL
+6 0 -6 -12 -20 -∞
85 dB
OSCILLOSCOPE
TAPE DELAY
SUPPLY
TAKEUP
SPRING REVERB
ANALOG SYNTHESIZER
Oscillator
ENVELOPE
FILTER
Keyboard
OSC: SINE
ENV: A64 D32 S80 R48
FLT: LP 2400Hz Q=0.7
LFO
DRUM MACHINE TR-909
BPM: 128
PITCH SHIFTER
Semitone • Fine • Formant
0 SEMITONES
SEMI: ±0 | FINE: 0¢ | FORM: 100%
CHORUS / FLANGER
BBD Modulation
NOISE GATE
Threshold • Attack • Hold • Release
GATE ACTIVITY
THRESHOLD
SPECTRUM ANALYSER
FFT • Frequency Domain Visualiser
PEAK: --dB
BRICKWALL LIMITER
True Peak • ISP Detection
CLIP
OUTPUTGR
CEIL: -0.3 dBTP | GR: 0.0
XY PERFORMANCE PAD
Filter Cutoff × Resonance
← Cutoff →
↑ Reso
X: 50% | Y: 20% | CUTOFF: 2400Hz
CSS Output — Equipment State
/* Interact met de apparatuur om CSS te genereren */