Samsung Galaxy S24 - Cinematic Scrollytelling website setup (Tutorial)

A high-performance, Apple-level product landing page clone for the Samsung Galaxy S24. This project demonstrates advanced scroll-linked animations, hardware-accelerated image sequences, and responsive design techniques using modern web technologies.

codebase:https://www.devblog.blog/store/samsung-galaxy-s24-cinematic-scrollytelling-website-codebase-mm2suabj

• Cinematic Scrollytelling: A 240-frame 3D image sequence that explodes and reassembles the device as you scroll.

• Hardware Acceleration: Uses HTML5 Canvas for performant, jank-free image playback at 60fps+.

• Momentum Scrolling: Integrated Lenis for smooth, "buttery" inertia scrolling that feels premium.

• Responsive Assets: Automatically switches between high-res desktop sequences and optimized mobile sequences (<768px) for faster load times.

• Sticky Navbar: Apple-style translucent navigation that blurs on scroll.

• Overlay Content: Text sections (Design, Camera, Performance) that fade and slide in sync with the 3D model's movement.

🛠 Tech Stack

• Framework: Next.js 15 (App Router)

• Styling: Tailwind CSS v4

• Animation: Framer Motion

• Smooth Scroll: Lenis

• Language: TypeScript

📦 Installation

1. Clone the repository:

   git clone https://github.com/modamaan/3d_animation_website.git
   cd samsung-galaxy-s24

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:3000

📂 Project Structure

├── app/
│   ├── page.tsx             # Main orchestrator for scroll & layout
│   ├── globals.css          # Global styles & Tailwind imports
│   └── layout.tsx           # Root layout with font configuration
├── components/
│   ├── ImageSequence.tsx    # Core Canvas component with responsive logic
│   ├── Navbar.tsx           # Sticky navigation bar
│   ├── OverlayContent.tsx   # Text sections that scroll over the canvas
│   ├── ScrollManager.tsx    # Lenis smooth scroll provider
│   └── StickySection.tsx    # Helper for sticky positioning
├── public/
│   └── images/
│       ├── sequence/        # Desktop 3D frame sequence (240 jpgs)
│       └── sequence-mobile/ # Mobile 3D frame sequence (240 jpgs)

🎨 Asset Optimization

This project uses two distinct image sequences to ensure optimal performance across devices:

• Desktop: High-resolution frames for large displays.

• Mobile: Optimized frames for screens under 768px width.

The ImageSequence component automatically detects the viewport size and loads the appropriate assets.