React Scrollytelling Sequence

Cinematic scrollytelling web experience built with React, TypeScript, Tailwind CSS, GSAP, and HTML5 Canvas. It preloads an image sequence, maps scroll position to frame playback, and adds smooth parallax motion with a premium UI overlay.

Features

• Scroll-synced frame-by-frame canvas animation (video-like playback)
• Preloading flow with loading percentage overlay
• Responsive object-fit: cover style canvas rendering math
• Subtle canvas zoom to hide baked-in letterboxing
• Mouse-based parallax depth with GSAP easing
• Smart floating scroll control (auto toggles up/down by position)
• Cinematic gradients, glass navbar, and polished typography

Tech Stack

• React + TypeScript
• Vite
• Tailwind CSS v4
• GSAP + ScrollToPlugin
• HTML5 Canvas

Project Structure

• src/App.tsx - main scrollytelling logic and UI overlay
• src/index.css - global styles and font utility classes
• public/frames - preprocessed image sequence frames

Getting Started

1) Install dependencies

npm install

2) Run in development

npm run dev

3) Create production build

npm run build

4) Preview production build

npm run preview

Frame Sequence Notes

The app expects frame assets in:

• public/frames/frame-001.png to public/frames/frame-180.png

If you change naming or frame count, update the related constants and URL generation in src/App.tsx.

Customization

• TOTAL_FRAMES - total frames in the sequence
• ZOOM_FACTOR - extra scale used during draw to crop letterbox bars
• PARALLAX_STRENGTH - mouse parallax intensity

License

Use this project as a base template for portfolio demos, product storytelling pages, and interactive launches.