Skip to content

Sam-Aklan/telescope-clone

Repository files navigation

Telescope clone Website 🌌

React 19 GSAP Tailwind CSS Site of the Month

This project is a clone for a visually stunning website that explores the concept of telescope lenses through immersive animations and interactive elements. Recognized as GSAP's Site of the Month for its innovative use of scroll-triggered SVG animations .

Website Preview

✨ Features

🔭 Lens & Telescope Concept

  • Zoom & Refraction Effects: First section demonstrates optical zoom and light refraction physics
  • Microscope Navigation: Scroll-based carousel that mimics a scientist rotating a microscope
  • Camera Shutter Animation: Carousel navigation with realistic camera shutter effects

🎬 Advanced Animations

  • Scroll-Triggered SVG Animations: GSAP ScrollTrigger for timeline-based animations
  • Physics-Based Interactions: Realistic lens distortion and light behavior
  • Smooth Transitions: Seamless animation sequencing throughout the user journey

🏗️ Innovative Architecture

  • Header/Footer Hybrid Component: Single component that transforms from header to footer
  • Bottom Recap Animation: Footer unfolds gradually to provide website summary
  • Responsive Design: Fully optimized for all device sizes

🛠️ Tech Stack

Technology Purpose
React 19 Component-based UI with latest React features
GSAP Professional-grade animations and scroll triggers
Tailwind CSS 4.0 Utility-first styling framework
SVG Animations Custom path morphing and filter effects
CSS Grid/Flexbox Modern layout techniques

About

breif clone of telescope.fyi/

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages