knuthtimo-lab
1a85f0eb2d
Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import Lenis from '@studio-freight/lenis';
|
|
import gsap from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
|
|
import Navbar from './components/Navbar';
|
|
import Hero from './components/Hero';
|
|
import Mission from './components/Mission';
|
|
import Services from './components/Services';
|
|
import Process from './components/Process';
|
|
import Features from './components/Features';
|
|
import Blog from './components/Blog';
|
|
import Contact from './components/Contact';
|
|
import Footer from './components/Footer';
|
|
import BackToTop from './components/BackToTop';
|
|
|
|
// Register GSAP plugins globally
|
|
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
|
|
|
|
// Grain Overlay Component
|
|
const GrainOverlay = () => (
|
|
<div className="fixed inset-0 w-full h-full pointer-events-none z-50 opacity-50 dark:opacity-100 bg-grain mix-blend-overlay"></div>
|
|
);
|
|
|
|
export default function App() {
|
|
useEffect(() => {
|
|
// Initialize Lenis for smooth scrolling
|
|
const lenis = new Lenis({
|
|
duration: 1.2,
|
|
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
|
direction: 'vertical',
|
|
gestureDirection: 'vertical',
|
|
smooth: true,
|
|
smoothTouch: false,
|
|
touchMultiplier: 2,
|
|
} as any);
|
|
|
|
// Synchronize Lenis with GSAP ScrollTrigger
|
|
lenis.on('scroll', ScrollTrigger.update);
|
|
|
|
const ticker = (time: number) => {
|
|
lenis.raf(time * 1000);
|
|
};
|
|
|
|
// Use GSAP ticker for smoother animation loop integration
|
|
gsap.ticker.add(ticker);
|
|
|
|
// Disable lag smoothing to prevent jumps
|
|
gsap.ticker.lagSmoothing(0);
|
|
|
|
return () => {
|
|
gsap.ticker.remove(ticker);
|
|
lenis.destroy();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full min-h-screen bg-background-light dark:bg-background-dark">
|
|
<GrainOverlay />
|
|
<Navbar />
|
|
<main>
|
|
<Hero />
|
|
<Mission />
|
|
<Services />
|
|
<Process />
|
|
<Features />
|
|
<Blog />
|
|
<Contact />
|
|
</main>
|
|
<Footer />
|
|
<BackToTop />
|
|
</div>
|
|
);
|
|
} |