An interactive single-page web game that matches your personality with iconic superheroes from Marvel, DC, and Harry Potter universes.

• Animated Welcome Screen - Neon title, parallax comic icons, smooth animations
• Interactive Quiz - 5 personality questions with keyboard navigation (arrow keys + Enter)
• Trait-Based Matching - Advanced algorithm analyzing 8 personality dimensions:
  • Courage, Intelligence, Compassion, Wit
  • Strategy, Magic, Strength, Agility
• Dramatic Reveal - 3-2-1 countdown with swirling comic panel animations
• Detailed Results - Match percentage, personality analysis, radar chart, top 3 alternates
• Custom Cursor - Smooth trailing magic wand/star effect (desktop)
• Theme Toggle - High-contrast light/dark mode
• Social Sharing - Share results via clipboard/Web Share API

1. Enter your name and select your gender identity (optional)
2. Complete 5 questions that map to personality traits
3. Watch the dramatic reveal countdown
4. Discover your match from 22 iconic superheroes
5. View analysis with radar chart and similarity percentage
6. Share results or play again!

Iron Man, Captain America, Thor, Hulk, Black Panther, Spider-Man, Doctor Strange, Black Widow, Scarlet Witch, Wolverine

Batman, Superman, Wonder Woman, Flash, Aquaman, Green Lantern, Cyborg, Shazam, Joker, Harley Quinn

Harry Potter, Hermione Granger

• Fonts: Bangers (comic display), Poppins (headings), Inter (body)
• Colors: Neon purple/cyan/magenta gradient theme
• Animations: CSS transforms, smooth transitions, particle effects
• Accessibility: Keyboard navigation, ARIA labels, high contrast mode

Uses cosine similarity to match user trait vectors with predefined superhero profiles:

1. User answers map to trait increments
2. Traits normalized to create vector
3. Cosine similarity calculated against all 22 characters
4. Top match displayed with percentage (0-100%)

client/src/
├── components/
│   ├── WelcomeScreen.tsx       # Entry screen with form
│   ├── OnboardingModal.tsx     # 3-step guide
│   ├── QuizScreen.tsx          # Quiz with keyboard nav
│   ├── ProcessingScreen.tsx    # Countdown reveal
│   ├── ResultsScreen.tsx       # Match display
│   ├── RadarChart.tsx          # Trait visualization
│   ├── CustomCursor.tsx        # Cursor effect
│   └── ThemeToggle.tsx         # Dark/light mode
├── data/
│   ├── superheroes.ts          # Character database
│   └── quiz.ts                 # Questions & trait mapping
├── utils/
│   └── scoring.ts              # Matching algorithm
└── pages/
    └── SuperheroQuiz.tsx       # Main game orchestration

npm install
npm run dev

Navigate to http://localhost:5000

Current: Using emoji placeholders (🦸)
Production: See AVATAR_PROMPTS.md for AI-generated image prompts

Generate 512x512px stylized avatars for all 22 characters and place in client/public/avatars/

• Arrow Up/Down: Navigate options
• 1-4 Keys: Quick select options
• Enter: Confirm selection
• Tab: Focus navigation

Test different answer combinations to verify:

• ✅ All 22 characters are reachable
• ✅ Same answers = deterministic results
• ✅ Trait vectors calculate correctly
• ✅ Similarity percentages display

• Real avatar images (see AVATAR_PROMPTS.md)
• 3D comic panel reveal animation
• Cursor trail sparkle icons
• Easter egg: Secret name reveals alternate avatar
• User profile system to save results
• Multiplayer comparison mode

• React + TypeScript
• Tailwind CSS
• Vite
• Wouter (routing)
• Radix UI (components)
• Lucide Icons

Educational/Portfolio Project - Not for commercial use without permission from character trademark holders.

Built with ⚡ by Replit Agent