StudioFlow Animation Project

This project simulates a cinematic "camera scan" animation for vertical infographics using React Three Fiber (R3F) and Three.js. It is designed to take a high-resolution portrait image, scan it from top to bottom, and then zoom out to a full 'cover' view.

Features

• Portrait Optimization: Automatically detects image aspect ratio to scale the 3D mesh appropriately.
• Procedural Animation: A custom "Scroll & Zoom" camera rig that:
  1. Starts at the top of the image.
  2. Smoothly pans down to the bottom (reading phase).
  3. Zooms out to fit the entire image on screen (overview phase).
• Post-Processing: Uses EffectComposer and Bloom to add a subtle cinematic glow.
• Dynamic Background: Clean, neutral studio environment.

Getting Started

Prerequisites

• Node.js (v16+)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/statechangelabs/threejs-animation.git
   cd threejs-animation

2. Install dependencies:

   npm install

Running Locally

Start the development server:

npm run dev

Open your browser to http://localhost:5173 (or the port shown in your terminal).

Usage

1. Default View: On load, the app uses a placeholder infographic.
2. Upload: Click the "Upload Image" button in the top-left UI to upload your own portrait/vertical image (e.g., a .png or .jpg infographic).
3. Animation: The 3D scene will automatically update the mesh dimensions and restart the camera animation loop.

Code Structure

• src/App.tsx: Main entry point containing the logic.
  • DashboardPlane: The 3D mesh that displays the image. Handles texture loading and aspect ratio calculation.
  • ScrollZoomCameraRig: The animation controller that moves the camera based on useFrame and time.
• src/components/: (If applicable) Reusable R3F components.

Tech Stack

• Vite: Build tool.
• React: UI Framework.
• Three.js & React Three Fiber: 3D rendering.
• Tailwind CSS: UI styling.
• @react-three/postprocessing: Visual effects.