-
-
HIntro to entering the royal website: a tutorial on how to control and navigate the website using hand gestures
-
It requests camera access, which you must allow so it can detect your hand movements and let you interact with the website
-
If you look at the top left section, it indicates that your hand should be positioned in front of the camera so you can control the website
-
When you make a hand gesture like a victory sign, a word instantly appears saying ‘Long live Kurdistan
-
When you make a fist with your hand, a paragraph about this character will immediately appear. When you open your hand again,
-
If you move your hand upward, the page scrolls up. If you move it downward, it scrolls down. Moving your hand to the right or left
Inspiration
Kurdistan has a rich and powerful history, but most historical experiences online feel static, outdated, and disconnected from younger generations. I wanted to create a modern cinematic platform that transforms Kurdish history into an immersive interactive experience.
The inspiration came from cinematic storytelling websites and interactive timelines seen in modern digital museums and games. My goal was to make users feel like they are traveling through time while discovering the legacy of Kurdistan.
What it does
Legends of Kurdistan is an interactive cinematic history experience that allows users to explore important moments, leaders, and events from Kurdish history through smooth animations, motion effects, and immersive storytelling.
The platform features:
- Interactive timeline navigation
- Cinematic transitions and animations
- Hand-controlled / motion-inspired interactions
- Immersive storytelling sections
- Modern UI/UX design
- Responsive experience for desktop devices
How we built it
The project was built using modern web technologies focused on performance and cinematic visuals.
Main technologies:
- Next.js
- React
- Three.js
- React Three Fiber
- GSAP
- Tailwind CSS
The animations and transitions were carefully optimized to create a smooth storytelling experience while maintaining good performance.
Challenges we ran into
One of the biggest challenges was balancing cinematic visual quality with browser performance. Rendering smooth animations, interactive effects, and immersive scenes while keeping the experience responsive required a lot of optimization.
Another challenge was designing a storytelling experience that feels emotional, educational, and modern at the same time.
Accomplishments that we're proud of
- Creating a unique Kurdish-focused cinematic experience
- Building immersive animations and smooth interactions
- Combining culture, history, and modern technology
- Designing a visually engaging storytelling platform
What we learned
Through this project, we learned more about:
- Real-time web animations
- 3D web experiences
- Performance optimization
- Interactive storytelling
- Advanced UI/UX design
What's next for Legends of Kurdistan
Future plans include:
- AI-powered narration
- Voice-guided storytelling
- Multiplayer exploration mode
- Mobile optimization
- More historical chapters and interactive scenes
- Multi-language support
Built With
- css
- fiber
- gsap
- next.js
- react
- tailwind
- three
- three.js
- typescript
