Pokédex — Neo-Retro Holographic
Ein experimenteller Pokédex im selbst entworfenen Stil „Neo-Retro Holographic“ – ohne Framework, ohne Build-Schritt, alles in einer einzigen HTML-Datei. Live verbunden mit der PokeAPI: alle rund 1025 Pokémon, animierte Sprites, deutsche Namen und Beschreibungen. Im Mittelpunkt steht eine eigene CSS-Motion-Engine mit holografischem HUD, 3D-Tilt-Karten und scroll-getriggerten Animationen.
01Herausforderung
Ziel war ein Interface, das wie ein Premium-Gaming-HUD wirkt – flüssige Animationen, eine riesige Live-Datenmenge und trotzdem keinerlei Framework oder Build-Pipeline. Performance und Optik mussten sich die Waage halten.
02Ansatz
Eine eigene CSS-Custom-Property-Engine für Easing und Timing, GPU-schonende transform-/opacity-Animationen, IntersectionObserver statt Scroll-Listener und lazy-geladene Detaildaten pro Karte. Die PokeAPI wird über einen einzigen Index-Request angezapft, Details und Typ-Filter folgen on demand.
03Ergebnis
Eine flüssige, vollständig clientseitige App mit allen Pokémon, animierten Sprites und einer Optik, die man Vanilla-CSS so nicht zutraut – als Showcase für handgemachtes Frontend ohne Abhängigkeiten.
Highlights
- ✦Live an die PokeAPI – alle ~1025 Pokémon
- ✦Animierte Sprites mit automatischem Fallback
- ✦Eigene CSS-Motion-Engine & holografisches HUD
- ✦Framework-frei: eine einzige HTML-Datei