Clone Mirror
Inspiration
We were inspired by the idea that every person has multiple possible versions of themselves depending on choices, mood, environment, and perspective. The hackathon theme Clones made me think beyond copying a person physically, and instead explore the concept parallel and alternate realities.
We wanted to create something visually engaging, interactive, and meaningful. So an experience where users could see themselves across four different realities and customize those worlds in real time through color was made.
Clone Mirror became our interpretation of the multiverse of self-expression.
What It Does
**Clone Mirror is an interactive website where users can view four cloned versions of themselves, each placed in a separate reality.
Each reality represents a different atmosphere or identity. Users can change the colors of these worlds dynamically, transforming the mood and visual style instantly.
Instead of a normal camera or filter app, Clone Mirror turns self-expression into an immersive mirror of possibilities.
How We Built It
We built Clone Mirror as an application focused on speed, responsiveness, and visual impact.
Core Components:
- Frontend UI: Interface with swipeable realities
- Clone Engine: Displays four versions of the user across separate scenes
- Color Customization System: Allows users to modify tones, backgrounds, and world aesthetics in real time
- Interactive Layout: Smooth transitions between realities
Design Approach:
We focused heavily on UI/UX by creating a futuristic and polished experience with animations, clean layouts, and responsive controls.
We also used layered visuals so each clone felt distinct while still clearly representing the same person.
Challenges We Faced
1. Making Four Realities Feel Unique
We needed each clone world to feel visually different without losing consistency. This required balancing contrast, lighting, and composition.
2. Real-Time Color Changes
Allowing users to instantly transform the environment while keeping performance smooth on mobile devices was challenging.
3. Simplicity vs Innovation
We wanted the project to be easy to understand in seconds, while still feeling creative and innovative to judges.
4. Time Constraints
Hackathons move fast, so we had to prioritize the most impactful features and polish the experience instead of overbuilding.
What We Learned
Through building Clone Mirror, we learned that innovation is not always about adding more features — sometimes it is about reimagining a familiar experience in a fresh way.
We also learned the importance of presentation and design. A polished interface can make an idea feel much more powerful and memorable.
On the technical side, we improved our understanding of:
- Mobile-first UI design
- Real-time visual state updates
- Animation and transitions
- Building under pressure with limited time
Why It Matters
Clone Mirror encourages creativity and self-expression by showing users that identity is flexible and multidimensional.
If one person can exist in four realities, then there are always new versions of ourselves we can grow into.
Future Plans
We would love to expand Clone Mirror with:
- AI-generated future clones based on goals
- Mood-based realities
- Social sharing between realities
- AR mirror mode
- Personalized identity journeys
Final Thought
Clone Mirror started as a hackathon idea, but it became a reminder that everyone has multiple possibilities within them.
Sometimes all it takes is a mirror to see them.
Built With
- css
- tsx
Log in or sign up for Devpost to join the conversation.