STYLE
FORGE
Music App Design Toolbox v3.0
1-9 | R | ⌘S
dark
light
auto
⬇ JSON
💾 Save
🎲 Randomize
🎨
Kleurenschema
›
Stijl-palet
Primaire kleur override
copy
Accent kleur override
Actieve tokens
Contrast WCAG
/* Kies een palet */
copy
CSS vars
Tailwind
JS obj
OKLCH
✨
Effecten & Textuur
›
Effect preset
Border radius
12px
Backdrop blur
0px
Oppervlak transparantie
90%
Saturation filter
100%
Brightness
100%
/* Kies een effect */
copy
📐
Layout & Grid
›
Layout preset
Spacing schaal
1.0 — Geen schaal
1.25 — Major Third
1.333 — Perfect Fourth
1.414 — Aug. Fourth
1.5 — Perfect Fifth
1.618 — Golden Ratio
2.0 — Octave
Font familie
Space Grotesk
Syne
Orbitron
JetBrains Mono
Georgia Serif
Times New Roman
Arial Black
System UI
Courier New
Kolommen structuur
Sidebar + Main (200px)
Sidebar + Main (260px)
Full Width (1 kolom)
50/50 Split
2/3 + 1/3
1/3 + 2/3
2 gelijke kolommen
3 gelijke kolommen
12-kolom grid
Gap grootte
0px
/* Kies een layout */
copy
🌑
Schaduwen & Diepte
›
Shadow preset
Custom shadow builder
X offset
0px
Y offset
8px
Blur
24px
Spread
0px
Kleur
Zwart
Indigo (accent)
Paars
Roze
Blauw
Groen
Amber
Rood
Opacity
40%
Tweede schaduw
Geen tweede schaduw
Inset glow
Border glow
Ambient
Hard offset
/* Builder resultaat */
copy
Aa
Typografie
›
Heading font
Syne
Space Grotesk
Orbitron
Georgia
DM Serif
Arial Black
Times New Roman
Impact
Body font
Space Grotesk
System UI
JetBrains Mono
Georgia
Courier New
Verdana
Font size base
16px
Letter spacing
0em
Line height
1.5
Font weight
300 — Light
400 — Regular
500 — Medium
600 — SemiBold
700 — Bold
800 — ExtraBold
900 — Black
Text transform
none
UPPERCASE
lowercase
Capitalize
/* Typografie CSS */
copy
⬜
Border & Outline
›
Border stijl
solid
dashed
dotted
double
groove
ridge
none
Border breedte
1px
Border kleur preset
Wit subtiel 8%
Wit subtiel 15%
Wit medium
Zwart subtiel
Zwart medium
Solid zwart
Primary kleur
Accent kleur
Transparent
Outline preset
Geen outline
2px primary
1px dashed accent
2px wit
3px zwart
2px dotted primary
/* Border CSS */
copy
🖼
Moodboard
›
↺ Refresh
💾
Opgeslagen presets
›
🗑 Alles wissen
📺 Live Preview
🎛 Audio Equipment Lab
minimalistisch
Sidebar + Cards
Mini Player
Full Width
⬇ Export CSS
♬ SONIC
🏠
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
🟤 Vintage Analog
⚫ Dark Studio
🔵 Neon Cyber
🟡 Wood & Brass
❄️ Arctic White
🔴 Soviet Steel
🟣 Space Station
📋 Copy CSS
PARAMETRIC EQ
⬇ CSS vars
⬇ JS object
⬇ JSON
⬇ React hook
⬇ Web Audio
CHANNEL STRIP
⬇ CSS vars
⬇ JS object
⬇ JSON
⬇ React hook
⬇ Web Audio
COMPRESSOR
GR: -0.0 dB
⬇ CSS vars
⬇ JS object
⬇ JSON
⬇ React hook
⬇ Web Audio
MASTER VOL
+6
0
-6
-12
-20
-∞
85 dB
⬇ CSS
⬇ JS
⬇ Web Audio
OSCILLOSCOPE
Sine
Square
Sawtooth
Triangle
Noise
1x Speed
2x Speed
0.5x Speed
3x Speed
⬇ CSS vars
⬇ Canvas JS
⬇ React comp
⬇ Web Audio
TAPE DELAY
SUPPLY
TAKEUP
⬇ CSS vars
⬇ JS object
⬇ JSON
⬇ Web Audio
SPRING REVERB
⬇ CSS vars
⬇ JS object
⬇ JSON
⬇ Web Audio
ANALOG SYNTHESIZER
Oscillator
ENVELOPE
FILTER
Keyboard
Octaaf 2
Octaaf 3
Octaaf 4
Octaaf 5
Major scale
Minor scale
Pentatonic
Blues
Chromatic
OSC: SINE
ENV: A64 D32 S80 R48
FLT: LP 2400Hz Q=0.7
LFO
⬇ CSS vars
⬇ JS object
⬇ JSON patch
⬇ React hook
⬇ Web Audio API
DRUM MACHINE TR-909
▶ PLAY
■ CLEAR
🎲 RND
BPM:
128
⬇ CSS vars
⬇ Pattern JS
⬇ JSON pattern
⬇ React hook
⬇ Web Audio API
PITCH SHIFTER
Semitone • Fine • Formant
0
SEMITONES
SEMI: ±0 | FINE: 0¢ | FORM: 100%
⬇ CSS
⬇ JS
⬇ Web Audio
CHORUS / FLANGER
BBD Modulation
CHORUS
FLANGER
BYPASS
⬇ CSS
⬇ JS
⬇ Web Audio
NOISE GATE
Threshold • Attack • Hold • Release
GATE ACTIVITY
THRESHOLD
OPEN
BYPASS
⬇ CSS
⬇ JS
⬇ Web Audio
SPECTRUM ANALYSER
FFT • Frequency Domain Visualiser
Bar Graph
Line Curve
Mirror
Fill
Waterfall
32 bands
64 bands
128 bands
PEAK: --dB
⬇ CSS
⬇ Canvas JS
⬇ React
⬇ Web Audio
BRICKWALL LIMITER
True Peak • ISP Detection
CLIP
OUTPUT
GR
CEIL: -0.3 dBTP | GR: 0.0
⬇ CSS
⬇ JS
⬇ Web Audio
XY PERFORMANCE PAD
Filter Cutoff × Resonance
← Cutoff →
↑ Reso
X: 50% | Y: 20% | CUTOFF: 2400Hz
Filter: Cutoff × Resonance
Pitch: Coarse × Fine
Delay: Time × Feedback
Reverb: Size × Mix
LFO: Rate × Depth
⬇ CSS
⬇ JS
⬇ React
⬇ Web Audio
CSS Output — Equipment State
/* Interact met de apparatuur om CSS te genereren */
copy