Back to Projects
INTERACTIVE DEMO
5 AI skills. One CSS morph engine. Watch an entire UI transform.
1-4SkillsTTransformLEJGenres
Tap the controls above to toggle skills and switch genres.
Under the Hood
- CSS custom property morph system - entire UI transforms via composed variable sets. One JS pass updates properties, CSS transitions handle the visual morphing.
- 4 progressive skill levels - each level layers design complexity. Level 0 is raw HTML. Level 4 is a polished product with spring physics and glass morphism.
- Genre-based theme switching - lo-fi, EDM, jazz moods shift colors, aurora blobs, and ambient energy. The whole vibe transforms.
- GPU-safe animations - only animates transform + opacity for 60fps. Spring easing via cubic-bezier(0.34, 1.56, 0.64, 1). No animated blur, no backdrop-filter.
- Keyboard shortcuts - [1-4] toggle skill levels, [T] cycles transforms, [L/E/J] switch genres. Full control without touching a mouse.
CSS Custom PropertiesSpring PhysicsGPU-Safe AnimationsTheme MorphingResponsive Design