Architecture

This document provides an explanation of the technical choices and system design for the bigrpic.com project.

Technology Stack

The project is built on three core pillars:

  • Astro: The foundation. Handles routing, static site generation, and the overall developer experience.

  • SolidJS: The interaction layer. Used for reactive UI components like the slideshow navigation and preloader.

  • Three.js: The visual engine. Powers the high-performance WebGL slideshow and shader effects.

System Overview

The application follows a "Main Entry" pattern where Astro serves as the orchestrator.

1. Core Orchestration (Astro)

Astro manages the index.astro page, which acts as the shell. It includes the SEO metadata, global styles, and the entry point for the client-side interactivity.

2. Reactive UI (SolidJS)

The Slideshow and Preloader components are built with SolidJS. We use client:load to ensure the interactivity bootstrap immediately on the client side.

  • Slideshow.tsx: Manages the overall state (current slide, progress tracking).

  • Preloader.tsx: Handles the procedural startup animation.

3. Visual Engine (Three.js & GSAP)

The heavy lifting of the visual transitions happens inside the VisualSlider class (SliderLogic.ts).

  • Three.js: Manages the WebGL context, plane geometry, and custom ShaderMaterial.

  • Shaders: High-performance GLSL shaders handle the "Liquid Morphology" effects (Glass, Frost, Ripple, Plasma, Timeshift).

  • GSAP: Used for smooth, ease-driven transitions between shader uniform states.

Data Flow

  1. Initialization: Slideshow.tsx mounts and initializes the VisualSlider.

  2. Texture Loading: VisualSlider preloads slide images as WebGL textures.

  3. Interaction: User clicks a nav item or the auto-slide timer fires.

  4. Transition: GSAP animates the uProgress uniform from 0 to 1.

  5. Shader Update: The fragment shader interpolates between uTexture1 and uTexture2 using the chosen effect algorithm.

  6. Cleanup: Slideshow.tsx triggers slider.destroy() on unmount to prevent memory leaks.

UI Controls (Tweakpane)

For debugging and fine-tuning, Tweakpane is integrated directly into the VisualSlider. It provides a real-time bridge to the shader uniforms, allowing for visual adjustments without rebuilding the project.