Looplyn is a premium, high-performance creative production house and agency website. Built using the latest Next.js 16 App Router, React 19, TypeScript, and powered by three.js, Lenis smooth scrolling, and GSAP animations, it delivers a state-of-the-art interactive experience.
- 🎬 Premium Production Showcases: Beautifully designed sections highlighting our core capabilities, from TV Commercials and Product Shoots to Cinema Brand Films and Billboard OOH.
- 🌀 Three.js 3D Visualizer: Immersive interactive 3D elements that elevate the page aesthetics.
- 🚀 Advanced GSAP & Lenis Integrations: Silky smooth physics-based scrolling coupled with micro-animations and custom cursors for an elite feel.
- 📱 Responsive Layout & Modern Typography: Curated serif and sans-serif typefaces tailored for ultra-high-end branding.
- 🔥 Optimized Next.js 16 (App Router): Fast rendering, SEO best practices, meta configuration, and clean directory structure.
- Framework: Next.js 16 (App Router)
- Library: React 19
- Language: TypeScript
- Animations: GSAP (GreenSock Animation Platform)
- 3D Graphics: Three.js
- Scroll Engine: Lenis
- Styling: Vanilla CSS with Tailwind CSS v4 PostCSS directives.
├── public/ # Static assets, fonts, and images
└── src/
├── app/ # Next.js App Router (Layouts, pages, globals.css)
└── components/
├── sections/ # Modular homepage sections (Hero, Story, Services, Stats, etc.)
├── Splash/ # Preloaders and intro animations
├── shared/ # Reusable UI elements
├── Canvas3D.tsx # Three.js interactive 3D component
├── CustomCursor.tsx# GSAP-driven custom cursor
└── Footer.tsx # Premium website footer
Clone the repository and install the dependencies:
npm installnpm run devOpen http://localhost:3000 in your browser to view the application.
npm run build
npm run start