Frontend Odyssey: The Interactive Web Experience Challenge
Hosted on UnstopFetched about 19 hours ago
Thursday, March 12, 2026
to Friday, March 20, 2026
•
1 week long
Web DevelopmentSocial ImpactStudentBeginner FriendlyInnovation
Student only
This hackathons is only open to students. Double check the event page for more information as this may mean only those from a particular university/country are eligible.
Event Type
online
775
Participants
₹5,000
Prize Pool
69
Est. Projects
Organizers
Frontend Odyssey: The Interactive Web Experience Challenge:
Overview:
Participants must build an interactive storytelling website using frontend technologies.
Instead of building a traditional static website, you are tasked with creating an experience where users explore content through scroll interactions, animations, transitions, and interactive UI elements (think Awwwards-style storytelling websites).
Allowed Technologies:
Frontend: HTML, CSS, JavaScript, React, or Vue.
Animation Libraries: GSAP, Three.js, Framer Motion, Lottie, and native CSS animations .
Design Tools: Figma, Adobe XD.
Event Timeline (Total Duration: 7 Days):
Day 1 – Theme Release: Problem statements and themes are released to participants.
Day 2 to 6 – Development Phase: Participants design and build their immersive experience.
Day 7 – Submission Deadline: All code and deployment links must be submitted.
Mandatory Requirements:
Each submitted project must include the following technical and structural elements:
Story Structure: The experience must have at least 5 sections forming a cohesive narrative (e.g., Hero → Introduction → Exploration → Insight → Conclusion).
Scroll-Based Interaction: Implement at least 2 scroll effects (e.g., parallax scrolling, scroll-triggered animations, reveal effects, or sticky sections).
Interactive Elements: Include a minimum of 3 interactions (e.g., hover animations, interactive cards, sliders, toggles, or clickable exploration elements).
Animation: Feature at least 3 distinct animations (e.g., custom loading animations, smooth element transitions, background animations, or SVG animations).
Responsive Design: The experience must function flawlessly across desktop, tablet, and mobile devices.
Judging Criteria:Note: Participants may earn bonus points for accessibility features, extreme performance optimization, unique interactions, and highly creative storytelling.
Creativity & Storytelling
Weight: 30%
Description: How well the narrative is crafted and the uniqueness of the concept.
Visual Design
Weight: 25%
Description: Aesthetic appeal, layout, typography, color schemes, and visual harmony.
Animation & Interactivity
Weight: 20%
Description: Quality, smoothness, and relevance of the micro-interactions and animations.
Responsiveness
Weight: 15%
Description: Cross-device compatibility and usability on varying screen sizes.
Code Quality
Weight: 10%
Description: Cleanliness, organization, and readability of the codebase.
Submission Requirements:
To successfully submit your project, you must provide:
GitHub Repository: A link containing the project's source code is mandatory.
Live Deployment Link: Projects must be deployed on web hosting platforms such as Vercel, Netlify, or GitHub Pages.
Project Description: A short 200–300-word summary explaining the concept and design process.
Inspiration & Extra Twist:
Example Quality Baselines:
To understand the expected quality, participants should look at Apple's product storytelling pages, Stripe's landing page interactions, and top-rated Awwwards interactive sites.