Waarom neon werkt voor jonge gebruikers
Je hebt ongeveer één seconde om vertrouwen én energie over te brengen. Een vlak grijs scherm voelt als een saaie enterprise-app. Neon-stijl draait om contrast, diepte en beweging — niet om zoveel mogelijk felle kleuren tegelijk.
Met Jetpack Compose experimenteer je sneller dan met XML: gradients, lichteffecten en micro-animaties zitten in één composable tree. De kunst is om wild te blijven zonder je frame budget te slopen.
Stap 1: donkere basis + 2 accentkleuren
Kies een donkere achtergrond en twee accenten (bijvoorbeeld paars + cyan). Gebruik een derde kleur alleen voor primaire acties. Zo blijft je UI leesbaar en toch “chaos” in de goede zin.
val ChaosBg = Color(0xFF0B0D17)
val ChaosAccent = Color(0xFF8A5CFF)
val ChaosGlow = Color(0xFF00D0FF)Gradients zonder jank
Een full-screen gradient is prima zolang je hem niet elke frame opnieuw animeert. Houd de achtergrond statisch en gebruik lichte radial gradients op cards voor diepte. Zware blur overal is een fps-killer op budgettoestellen.
- Schermachtergrond: statische linear gradient.
- Cards: radial gradient met lage alpha.
- CTA-knoppen: korte linear gradient, geen overdrive.
Glow en glas-effecten slim inzetten
Glow maak je met gekleurde shadows en subtiele borders. Echte backdrop blur
is duur; simuleer glas met semi-transparante lagen
Color.White.copy(alpha = 0.06f) op belangrijke panels.
Motion met grenzen
Micro-interacties maken het verschil: lichte scale op press, fade-in op headers. Vermijd dat je opacity, scale én offset tegelijk op tientallen list items animeert. Voor feeds is staggered op de eerste items genoeg.
val scale by animateFloatAsState(
targetValue = if (pressed) 0.96f else 1f,
animationSpec = spring(dampingRatio = 0.6f),
label = "ctaScale"
)Typografie die blijft leesbaar
Grote, dikke headlines. Bodytekst in zacht paars-grijs. Gebruik neonkleur alleen voor labels en links — niet voor lange alinea’s. Accessibility check is verplicht, ook als je design “crazy” heet.
Release checklist
- Test op 60 Hz én op een instaptoestel.
- Run Accessibility Scanner op contrast.
- Bekijk recompositions in Layout Inspector.
- Bied een rustige night variant zonder neon overload.
Kortom: neon UI is karakter plus discipline. Compose helpt je snel shippen; jij kiest welke effecten zowel cool als performant zijn.