An immersive, cinematic, and interactive web experience designed to transport fans into the world of Game of Thrones. This application integrates cutting-edge web technologies, high-fidelity dark-fantasy aesthetics, and advanced scroll-linked animations to bring the stories of Westeros and its Great Houses to life.
The application runs locally on http://localhost:5173/.
- Video scrubbing: A high-definition ambient cinematic background video is bound directly to the user's scrollbar. As you scroll, the playback scrubs smoothly backward and forward through key Westeros landmarks.
- Narrative Chapters: Features six scroll-activated chapters, transitioning beautifully from the Prologue to the Iron Throne:
- The Ancient Chronicles (A Song of Ice and Fire) —
01 / 06 - The North Remembers (House Stark) —
02 / 06 - The Seven Kingdoms (The Realm of Westeros) —
03 / 06 - Where Crowns Are Won (King's Landing) —
04 / 06 - A Thousand Blades (The Iron Throne Origin) —
05 / 06 - The Iron Throne (When You Play the Game of Thrones) —
06 / 06
- The Ancient Chronicles (A Song of Ice and Fire) —
- Dynamic GSAP Animations: Custom timeline animations orchestrate staggered text transitions, sigil fades, and vignette adjustments when transitioning between chapters.
- Visual Indicators: Features a custom-rendered vertical Dot Navigator, an active chapter label tracking progress, and a bottom-aligned progress bar.
- Glassmorphic Design: Sleek card designs incorporating thematic color-tailored gradients, custom gold and iron corner ornaments, and micro-animations.
- Interactive 3D Sigil Tilt: Utilizing real-time mouse coordinate tracking, the house sigils dynamically tilt and scale as the cursor floats over cards, giving a physical depth to the interface.
- IntersectionObserver Transitions: Elements trigger staggered, fade-up entrance animations dynamically as they scroll into view.
- Six Noble Houses:
- 🐺 Stark — "Winter Is Coming" (The North)
- 🦁 Lannister — "Hear Me Roar" (The Westerlands)
- 🐉 Targaryen — "Fire and Blood" (The Crownlands)
- 🦌 Baratheon — "Ours Is The Fury" (The Stormlands)
- 🦑 Greyjoy — "We Do Not Sow" (The Iron Islands)
- 🌹 Tyrell — "Growing Strong" (The Reach)
- Hover Reveal Mechanic: Cards expand upon hover, dynamically shifting to reveal the House Words, specialized background accents, and an in-depth historic lore description.
The application is structured as a component-driven React project built on top of the ultra-fast Vite bundler.
- Frontend Library: React 19 — Declarative component structure and state management (
useState,useRef,useEffect). - Build Tool: Vite 8 — Lightning-fast development server with hot module replacement (HMR) and optimized build times.
- Animation Engine: GSAP (GreenSock Animation Platform) 3.15 & ScrollTrigger Plugin — High-performance scroll-driven timelines, interactive video scrubbing, elastic animations, and staggered triggers.
- Styling: Vanilla CSS — Maximum styling flexibility using CSS custom properties (variables), tailored HSL themes, fluid layouts (Flexbox, Grid), 3D perspective transformations, and ambient grain overlays.
GOT-main/
├── README.md # Project documentation (this file)
├── .gitattributes # Git configurations
└── vite-project/ # Main React + Vite project directory
├── index.html # HTML Entry point
├── package.json # NPM scripts and project dependencies
├── vite.config.js # Vite build configurations
├── public/ # Static assets
│ ├── images/ # House sigil images
│ └── video/ # Background cinematic scrubbing video
└── src/
├── App.jsx # Root component hosting Hero and Section1
├── App.css # Global and canvas styles
├── index.css # Typography and main layout variables
├── main.jsx # React application entry point
└── components/
├── Hero.jsx # Cinematic scroll-bound video chapter experience
├── Hero.css # Dark ambient styles, ornaments, and scroll tracking
├── Section1.jsx # Staggered grid showing House Cards with 3D tilts
└── Section1.css # Interactive card grids and layout styling
Make sure you have Node.js installed (v18+ recommended).
- Clone the Repository:
git clone https://github.com/drishyam27/GOT.git cd GOT - Navigate to the project and install dependencies:
cd vite-project npm install - Run the local development server:
npm run dev
- Open in your browser:
Navigate to
http://localhost:5173/to enjoy the experience!
To bundle and optimize the application for deployment:
npm run buildThis generates a production-ready dist folder inside vite-project containing optimized assets.
To add features, debug, or customize this interactive experience, follow this structured workflow:
- Narrative Chapters: To edit, add, or remove chapters in the scroll scrubbing sequence, modify the
CHAPTERSarray in Hero.jsx. You can adjust scroll boundaries (progress: [start, end]), titles, description text, and emoji sigils. - Noble Houses: To update houses, sigils, regional accents, or historical details, modify the
HOUSESconfiguration array in Section1.jsx.
- Scroll-Trigger Settings: Adjust
scrollHeightor the ScrollTriggerscrublatency (currently set to1.2for smooth elastic feedback) in theuseEffectwithin Hero.jsx. - 3D Card Tilt: Customize the tilt angles and sensitivity in
HouseCardinside Section1.jsx by altering the multiplier inhandleMouseMove(currently14deg).
- Global Styling: Modify variables like font family (
OutfitandCinzel), base grain backgrounds, and typography in index.css. - Component Styling: Adjust glassmorphic styling, HSL tail-colors, pulse rates, and layouts in Hero.css and Section1.css.
- Verify that the scroll-triggered video scrubs smoothly without lag.
- Verify that hover cards function as expected on all viewport sizes (desktop and mobile responsiveness).
- Ensure that the IntersectionObserver staggers trigger beautifully as elements enter the viewport.
# 1. Stage your modifications
git add .
# 2. Commit with descriptive messages
git commit -m "feat: customize House Stark description and adjust tilt sensitivity"
# 3. Push to your GitHub fork repo
git push origin main- Video and image content are inspired by HBO's Game of Thrones and George R. R. Martin's A Song of Ice and Fire.
- Animations crafted with GSAP.