Overview #

An interactive gallery where photographs form a short trail that follows your cursor. Images spawn only after sufficient movement, fade gracefully, and loop through the collection for a continuous flow.

How it Works #

Pointer Tracking: Track cursor movement and compare distance to a configurable threshold. When movement exceeds the threshold, advance to the next image and record the new position.

Circular Index: Images advance with wrap-around indexing; a five-item window forms the visible trail.

Trail Buffer: Maintain fixed queues for indices and positions. New items are added and the oldest are removed to keep a steady 5-image tail.

Transitions: Smooth opacity and transform transitions, with progressive blur/scale/brightness on background items when an image is selected.

Overlay Controls: A full-screen overlay splits the viewport into previous/close/next interactive zones.

Assets & Preloading: Images are discovered automatically and sorted numerically. A service preloads images for smooth performance.

Performance: Preload images, smooth pointer tracking, and optimized animations for 60fps experience.

User Interaction #

• Move the cursor to paint a dynamic trail of photos
• Images spawn only after meaningful movement; pausing lets older photos fade away naturally
• Click images for full-screen viewing with navigation controls
• Scroll through different photography categories (Sri Lanka, Thailand, Myanmar, Featured collections)

Tech Stack #

• React + TypeScript
• Tailwind CSS (with smooth transitions)
• Vite (fast build tool)
• React Router (navigation)

Next Features #

• User preferences for photo size and trail length
• Additional photography collections