• 

  Starting(Skeleton)

• 

  Initialization(Intro)

• 

  AcessGranted(All Btns Opened)

• 

  NightMode(DarkMode)

• 

  ColorBlindMode

• 

  Reset(All modes removed)

• 

  Logs

• 

  Choosing Subject for Test

• 

  Test Mode(During Test)

• 

  HexChat(With Darkmode On)

• 

  3 types of question in Test

• 

  Logs durings Test

• 

  Overall Evaluation

• 

  Logs (With Dark mode on)

HexenCore

Inspiration

HexenCore draws inspiration from AI representations in movies and anime, such as Halo the game and Shelter by Porter Robinson. The project envisions an AI, Sumire, inside a digital world that users can interact with.

What it does

Features

1. AI Interaction

• Sumire AI Chatbot: Engages users with dynamic responses and adapts questions.
  
• Typing & Response Animation: Simulates natural AI typing.
  
• Subject-Based Q&A: Users select up to 3 subjects; questions appear dynamically.

2. Gamification

• Points & Progression: Rewards interactions and correct answers.
  
• Achievements/Unlockables: New content unlocks as users progress.
  
• Interactive UI Animations: Smooth transitions powered by Framer Motion.

3. Digital World Interface

• Techy Computer Screen: Futuristic UI with dynamic text and animations.
  
• System Info Panel: Shows session info, current question, and state.
  
• Time & Date Display: Adds realism to the interface.
  
• Interactive Buttons: Start, stop, and confirm selections.

4. Data & Logic

• JSON-Driven Questions: Subjects and questions are loaded dynamically.
  
• Answer Tracking: Stores user responses and manages state.

5. Technology Stack

• Frontend: React (Next.js), Tailwind CSS
  
• Animations: Framer Motion
  
• Backedn: Javascript
• Data Handling: JSON for question and dialogue storage

6. Aesthetic & Immersion

• Futuristic/Techy UI: Dark theme with neon accents.
  
• Digital AI Companion: Sumire visualized within the environment.
  
• Interactive Storytelling Potential: Allows for engaging narrative expansion.

How We Built It

• Frontend: React (Next.js), Tailwind CSS, Framer Motion
  
• Backend/Data Handling: JSON for storing questions and dialogue
  
• Deployment: Vercel
  

Challenges

• Time constraints due to midterm examinations
  
• Limited experience with gamification and UI/UX design
  

Accomplishments

• Completing the project despite a tight schedule
  
• Successfully integrating gamified AI interactions
  

Lessons Learned

• Sequencing interactive elements effectively
  
• Connecting buttons and modes for a coherent system interface
  
• Coordinating multiple frontend components
  

Next Steps

• Mobile responsiveness and optimization
  
• Resizable windows for improved user experience
  
• Expanding interactive storytelling and gamification features

Built With

• ai
• css3
• javascript
• json
• jsx
• motion
• react
• shadcn
• tailwindcss