Looningo-UST

Talents That Dazzle... For No Reason!

Comment

Looningo: A Useless Skill Trainer

Inspiration

We grew weary of apps touting "life-changing" skills like coding or mastering Mandarin in ten minutes a day. Why not revel in the absurdity of learning utterly pointless talents? Inspired by the zealous gamification of platforms like Duolingo, we created Looningo, a multi-page web app that teaches gloriously impractical skills like Synchronized Eyebrow Wiggling and Competitive Sandwich Stacking. Our aim was to craft a chaotic, laugh-out-loud experience packed with surreal, generative visuals and wildly interactive mini-games that poke fun at self-improvement culture while celebrating the sheer joy of wasting time.

What It Does

Looningo is a satirical take on skill-building platforms, offering "courses" in absurdly impractical skills through interactive mini-games. Users navigate multiple pages—Homepage, Skill Selection, Game Pages, Trophy Case, and About—to engage in ridiculous challenges like taming a sentient waveform with eyebrow wiggles or stacking sentient sandwiches in a psychedelic void. Each game boasts generative, reactive visuals (e.g., pulsating fractals, glitchy portals) and user-driven chaos (e.g., triggering cosmic explosions with blinks). Tutorial videos featuring sarcastic, glitch-art coaches guide users, while meaningless scores and grandiose badges like “Grandmaster of Awkward Pauses” fuel social bragging on X. It’s a delightful, pointless escape that’s all about fun and zero about utility.

How We Built It

We constructed Looningo using a multi-page web architecture with client-side routing via the navigo library to navigate between HTML pages (Homepage, Skill Selection, five Game Pages, Trophy Case, and About). The tech stack includes:

  • JavaScript: Powers game logic, score tracking, and dynamic content.
  • WebRTC with face-api.js: Drives webcam-based games (e.g., detecting eyebrow wiggles, head tilts) with mouse/keyboard fallbacks for accessibility.
  • WebGL/Three.js: Creates generative, surreal backgrounds (e.g., fractal waves, neon storms) and reactive effects (e.g., sentient waveforms, dimensional portals).
  • Tailwind CSS: Styles the quirky, neon-glitch UI via CDN, with custom classes for pulsating buttons and holographic badges.
  • Web Audio API/Howler.js: Delivers surreal sound effects (e.g., theremins, glitch beeps) and sarcastic narration.
  • Canvas API: Renders 2D games (e.g., Sandwich Stacking) and particle effects (e.g., comet trails).
  • LocalStorage: Stores badges and progress for persistence.

Each page features unique, generative visuals that react to user inputs (e.g., mouse swipes warp a nebula). Mini-games were designed with user-driven chaos, such as blinking to spawn distractions or swiping to trigger singularities, ensuring an immersive, absurd experience. We deployed the app on Netlify for seamless hosting.

Challenges We Ran Into

  • Generative Visuals: Crafting smooth, reactive WebGL backgrounds (e.g., fractal waveforms, melting candy voids) was challenging. Optimizing shaders for low-end devices while preserving the surreal aesthetic required multiple iterations.
  • WebRTC Performance: Face detection for games like Eyebrow Wiggling lagged on some browsers. We reduced frame rates and implemented robust fallbacks (e.g., mouse clicks for rhythm) to ensure accessibility.
  • Multi-Page Routing: Client-side routing with navigo caused occasional navigation glitches, particularly on mobile. We debugged edge cases and added portal-like transitions to mask loading delays.
  • Balancing Chaos: Making mini-games interactive without overwhelming users was tricky. Features like the “Psychic Surge” in Awkward Silence risked being too chaotic, so we fine-tuned randomness and feedback.
  • Audio Syncing: Aligning surreal sound effects (e.g., theremins with comet trails) with generative visuals was complex, requiring precise Web Audio API adjustments to avoid lag.

Accomplishments That We're Proud Of

  • Surreal Aesthetic: We achieved a psychedelic, ever-shifting visual style with WebGL backgrounds that morph based on user actions, making every page feel alive and absurd.
  • Interactive Chaos: Mini-games like the Sentient Sandwich Singularity and Multiverse Door Symphony are hilariously engaging, with user-driven mechanics (e.g., blinks, swipes) that spark unexpected chaos.
  • Seamless Multi-Page UX: The multi-page structure with neon navigation orbs and portal transitions creates a sense of exploration without sacrificing usability.
  • Social Bragging: Our X sharing feature with dynamic GIF previews (e.g., a pulsating badge) makes showing off pointless achievements ridiculously fun.
  • Accessibility: We ensured webcam games have fallbacks, high-contrast visuals, and keyboard navigation, making Looningo inclusive despite its absurdity.

What We Learned

  • Generative Art: Mastering WebGL/Three.js for dynamic visuals taught us how to balance creativity and performance, especially for surreal effects like fractal snakes or glitchy portals.
  • User-Driven Chaos: Designing mechanics that let users trigger chaos (e.g., blinking to disrupt a game) requires careful tuning to keep gameplay fun, not frustrating.
  • WebRTC Limits: Face detection is powerful but resource-intensive; fallbacks are crucial for broad compatibility.
  • Sarcastic Tone: Crafting a consistent, humorous tone across narration, feedback, and visuals is key to selling the parody.
  • Community Potential: Early user feedback on X (via #UselessSkills) showed enthusiasm for suggesting absurd skills, hinting at future community-driven features.

What's Next for Looningo

  • Community Challenges: Implement a moderated system for users to suggest new skills via a form or X hashtag, with admins curating and implementing the best ideas to keep content fresh.
  • More Mini-Games: Develop new challenges like “Quantum Toe Wiggling” or “Glowing Stare-Off” with wilder mechanics, such as voice-activated chaos triggers.
  • Enhanced Visuals: Experiment with advanced WebGL shaders for more surreal effects (e.g., real-time fluid simulations) and explore VR compatibility for immersive absurdity.
  • Leaderboards: Introduce a global “Useless Leaderboard” with absurd titles (e.g., “Supreme Chaos Lord”), stored in a lightweight Firebase backend.
  • Mobile App: Port Looningo to a mobile app using Capacitor, leveraging device sensors (e.g., gyroscope for hair flips) for enhanced interactivity.

Built With

Share this project:

Updates