Upgrade UI with modern effects: glassmorphism, neon, glitch, particles, animations

UI enhancements in ui.h/ui.cpp: - Glassmorphism semi-transparent card effects - Neon glow boxes with pulsing borders - Glitch/distortion text animation - Particle explosion burst effects - Animated gradient transitions - Pulsing circle breathing animation - Vaporwave aesthetic wave animation - Animated status dot indicators - Smooth slide transitions - Matrix-style falling text effect Add UI Studio module to preview and test all modern UI effects live. Brings toolkit to 43 modules. UI is now cyberpunk/neon aesthetic with smooth animations.
2026-09-24 18:20:49 +00:00
parent 8ca161a114
commit be4a797973
5 changed files with 249 additions and 4 deletions
--- a/src/modules/uistudio.cpp
+++ b/src/modules/uistudio.cpp
@@ -0,0 +1,88 @@
+#include "../core/module.h"
+#include "../core/ui.h"
+
+// UI Studio: showcase modern UI effects - glassmorphism, neon, particle effects, animations.
+// Live preview of all visual effects: glitch text, gradient bars, pulsing elements, vapor effects.
+// Use as a design testing ground for new UI components.
+
+class UIStudio : public Module {
+  enum Effect { GLASS_CARD, NEON_BOX, GLITCH_TEXT, PARTICLES, VAPOR_WAVE, ANIMATED_GRADIENT, STATUS_DOTS, PULSE_CIRCLE } effect = GLASS_CARD;
+  uint32_t frameCount = 0;
+  float animTime = 0;
+  char msg[3][40] = {{0},{0},{0}};
+
+public:
+  const char* name() const override { return "UI Studio"; }
+  const char* blurb() const override { return "modern UI effects"; }
+
+  void onEnter() override {
+    frameCount = 0;
+    animTime = 0;
+    say("UI Studio: live effect preview");
+  }
+  void onExit() override { }
+
+  bool onKey(char c) override {
+    if (c == 'e') { effect = (Effect)((effect + 1) % 8); frameCount = 0; return true; }
+    return false;
+  }
+
+  void tick() override {
+    frameCount++;
+    animTime = frameCount / 30.0f;
+  }
+
+  void draw() override {
+    const char* en[] = {"GLASS", "NEON", "GLITCH", "PARTICLES", "VAPOR", "GRADIENT", "STATUS", "PULSE"};
+    ui::lineC(0, ui::accent(), "UI Studio: %s", en[effect]);
+
+    // Draw effect based on current selection
+    switch (effect) {
+      case GLASS_CARD:
+        ui::glassCard(20, 35, 200, 40, ui::accent(), 0.6f);
+        ui::line(6, "Glassmorphism card");
+        break;
+      case NEON_BOX:
+        ui::neonBox(30, 35, 180, 40, ui::glow());
+        ui::line(6, "Neon glow effect");
+        break;
+      case GLITCH_TEXT:
+        ui::glitchText(4, ui::glow(), "GLITCH_ERROR_404");
+        ui::line(6, "Glitch distortion");
+        break;
+      case PARTICLES:
+        ui::particleExplosion(120, 60, ui::glow(), 12);
+        ui::line(6, "Particle burst");
+        break;
+      case VAPOR_WAVE:
+        ui::vaporWave(animTime, 0xFF00FF, 0x00FFFF, 0xFFFF00);
+        ui::line(6, "Vaporwave aesthetic");
+        break;
+      case ANIMATED_GRADIENT:
+        ui::animatedGradient(4, fmodf(animTime, 1.0f), ui::glow(), ui::accent());
+        ui::line(6, "Gradient animation");
+        break;
+      case STATUS_DOTS:
+        for (int i = 0; i < 4; i++) {
+          ui::statusDot(40 + i * 30, 50, ui::accent(), (frameCount / 10) % 2 == 0);
+        }
+        ui::line(6, "Status indicators");
+        break;
+      case PULSE_CIRCLE:
+        ui::pulseCircle(120, 55, 5, ui::glow());
+        ui::line(6, "Pulsing circle");
+        break;
+    }
+
+    for (int i = 0; i < 3; i++) ui::line(8 + i, "%s", msg[i]);
+    ui::hintBar("[e]ffect  [`]back");
+  }
+
+private:
+  void say(const char* fmt, ...) {
+    for (int i = 2; i > 0; i--) strncpy(msg[i], msg[i-1], 39);
+    va_list ap; va_start(ap, fmt); vsnprintf(msg[0], 40, fmt, ap); va_end(ap);
+  }
+};
+
+Module* makeUIStudio() { return new UIStudio(); }