☠️ ONE PIECE — THE GRAND LINE

A cinematic, scroll-driven fan experience built for the open sea.

🌊 Enter the Grand Line · Features · Tech Stack · Run Locally

---

⚓ About the Project

The Grand Line is a cinematic One Piece fan website focused on immersive motion, atmosphere, and scroll-driven storytelling.

Instead of relying on normal video seeking, the hero experience uses a 121-frame WebP image sequence controlled by GSAP ScrollTrigger. This produces deterministic forward and reverse scrubbing while keeping the visual sequence synchronized with chapter copy.

The site continues into a complete fan experience with Straw Hat wanted posters, treasure lore, legacy moments, responsive navigation, and cinematic section transitions.

Live site: https://one-piece-fan.pages.dev/

---

✨ Features

Experience	Details
🎬 Cinematic Hero	Scroll-controlled 121-frame WebP sequence
🧭 Scroll Storytelling	GSAP ScrollTrigger pinning, chapter transitions, and parallax
🏴‍☠️ Straw Hat Crew	Wanted-poster cards with roles, powers, and animated bounties
💰 Treasure & Lore	Devil Fruits, Poneglyphs, and One Piece lore sections
🕰️ Legacy Timeline	Story-driven legacy section with cinematic typography
📱 Responsive UX	Mobile navigation and lighter mobile frame density
⚡ Performance	Staged image decoding and optimized WebP hero assets
🔎 SEO	Meta description, Open Graph, canonical URL, social preview
♿ Accessibility	Skip navigation, semantic structure, and reduced-motion support
☁️ Deployment	Production deployment on Cloudflare Pages

---

🎥 Hero Animation Architecture

Scroll position
      ↓
GSAP ScrollTrigger
      ↓
Normalized progress (0 → 1)
      ↓
Frame index (001 → 121)
      ↓
Optimized WebP frame
      ↓
Cinematic hero image

Why an image sequence?

A standard MP4 scrubber produced inconsistent frame updates across browsers. The current system instead maps scroll position directly to pre-rendered frames.

Benefits:

• precise visual control
• smooth reverse scrolling
• deterministic frame selection
• reliable browser rendering
• easier synchronization with chapter text
• no autoplay or video-seeking dependency

---

🏴‍☠️ Crew Showcase

     

The crew section is styled as a collection of classic WANTED posters, with:

• animated bounty counters
• character-specific accent styling
• role badges
• Devil Fruit / ability details
• hover interactions
• responsive grid behavior

---

🧩 Tech Stack

Frontend	Motion	Styling	Deployment
React	GSAP	CSS	Cloudflare Pages
Vite	ScrollTrigger	Responsive Layouts	GitHub
JavaScript	Frame Scrubbing	WebP Assets	CI/CD

---

📁 Project Structure

One-piece/
│
├── public/
│   ├── frames/
│   │   └── hero/
│   │       ├── frame_001.webp
│   │       ├── frame_002.webp
│   │       └── ... frame_121.webp
│   │
│   ├── images/
│   │   ├── img1.png
│   │   ├── img2.png
│   │   └── ...
│   │
│   └── favicon.svg
│
├── src/
│   ├── components/
│   │   ├── Hero.jsx
│   │   ├── Hero.css
│   │   ├── Navbar.jsx
│   │   ├── Navbar.css
│   │   ├── Section1.jsx
│   │   ├── Section1.css
│   │   ├── WorldSections.jsx
│   │   ├── WorldSections.css
│   │   ├── Footer.jsx
│   │   └── Footer.css
│   │
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
│
├── index.html
├── package.json
└── vite.config.js

---

🚀 Run Locally

1. Clone the repository

git clone https://github.com/vaikashhari/One-piece.git
cd One-piece

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Create a production build

npm run build

Windows PowerShell: if npm.ps1 is blocked by the execution policy, use:

npm.cmd run build

---

☁️ Deployment

The production site is deployed using Cloudflare Pages.

🌐 https://one-piece-fan.pages.dev/

---

🗺️ Experience Flow

THE GRAND LINE
     │
     ├── Voyage
     │    └── Scroll-driven cinematic hero
     │
     ├── Crew
     │    └── Straw Hat wanted posters
     │
     ├── Treasure
     │    └── Devil Fruits · Poneglyphs · One Piece
     │
     └── Legacy
          └── Dreams · inherited will · the open sea

---

⚠️ Disclaimer

This is an unofficial fan-made project created for design and development purposes.

One Piece, its characters, artwork, names, and related intellectual property belong to their respective copyright and trademark holders.

No ownership of the original franchise or associated intellectual property is claimed.

---

🌊 The sea still calls.

Built by Creatary Labs

_{React · Vite · GSAP · ScrollTrigger · Cloudflare Pages}