Cosmic Cosplay

Cosmic Cosplay is a fully interactive alien creator where users design custom characters and hear them talk back using real-time voice transformation.

Comment

Inspiration

We wanted to build something playful, creative, and immersive — not just another static web app. Character creators have always been fun, but most feel limited or use pre-made assets. As a team, we were excited by the idea of combining art and technology to create a fully interactive alien customization experience set in a dynamic space environment.

We were especially inspired by games and avatar builders that allow personal expression, and we challenged ourselves to go a step further: what if the character didn’t just exist visually, but could interact with the user?

That question led to our voice mimicry feature — turning a simple customization tool into a character that feels alive.

What does it do?

Cosmic Cosplay is an interactive alien character creator that allows users to:

  • Customize alien body parts in real time (wings, hats, eyes, accessories, etc.)
  • View changes instantly in an animated space scene
  • Record their voice and hear the alien repeat it back in a higher pitch
  • Export their custom alien as an image

The project blends visual creativity with audio interaction, transforming a traditional avatar builder into a playful, responsive experience.

How did we build it?

Art & Design:

  • All alien parts hand-drawn by our team
  • Created using IbisPaintX and Procreate
  • Layered PNG assets for modular customization

Tech Stack:

  • React (component-based architecture)
  • State-driven part selection
  • Absolute positioning for layered rendering
  • html2canvas for image export
  • CSS animations for space effects

What were some challenges?

One major challenge was layout management. Layering multiple transparent assets required precise control over positioning and stacking order. We encountered issues with:

  • Absolute vs. relative positioning
  • z-index conflicts
  • Elements disappearing due to overflow: hidden
  • Responsive resizing behavior

Another challenge was implementing real-time voice recording and pitch manipulation. Working with browser audio APIs required careful handling of user permissions, playback timing, and audio processing.

Exporting the composed scene as a clean image also required restructuring our layout to ensure all elements rendered correctly in the captured output.

  • Designing all visual assets entirely from scratch
  • Successfully integrating voice recording and pitch shifting
  • Creating a cohesive animated space environment
  • Building a modular customization system in React
  • Delivering a polished, interactive demo within hackathon time constraints

We’re especially proud that Cosmic Cosplay blends art, frontend engineering, and audio interaction into one cohesive experience.

What we learned

  • How to manage complex layered layouts using CSS positioning
  • How stacking context and z-index truly work
  • How to work with the Web Audio API for real-time audio manipulation
  • The importance of debugging visually using browser DevTools
  • How to structure React components for modular customization systems

We also learned that combining creative design with technical implementation significantly increases user engagement.

What's next for Cosmic Cosplay

We envision expanding Cosmic Cosplay into a larger creative platform. Next steps include:

  • A public alien gallery
  • More accessories and themed expansion packs
  • Drag-and-drop positioning for deeper customization
  • Animated reactions synced to voice input
  • Mobile optimization
  • AI-generated alien variations Our long-term goal is to transform Cosmic Cosplay from a fun hackathon project into a social, interactive creative experience.

Built With

Share this project:

Updates