diff --git a/package-lock.json b/package-lock.json index 897518e..9339022 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "@react-email/components": "^0.0.25", "@react-email/tailwind": "0.1.0", "@react-three/drei": "^9.114.0", + "@studio-freight/lenis": "^1.0.42", "@tanstack/react-query": "^5.56.2", "@types/canvas-confetti": "^1.6.4", "@types/ioredis": "^4.28.10", @@ -3668,6 +3669,12 @@ "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==", "license": "MIT" }, + "node_modules/@studio-freight/lenis": { + "version": "1.0.42", + "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz", + "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==", + "deprecated": "'@studio-freight/lenis' has been renamed to just 'lenis', run 'npx @darkroom.engineering/codemods' to update your dependecies accordingly." + }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", diff --git a/package.json b/package.json index 2c4e113..f465be6 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@react-email/components": "^0.0.25", "@react-email/tailwind": "0.1.0", "@react-three/drei": "^9.114.0", + "@studio-freight/lenis": "^1.0.42", "@tanstack/react-query": "^5.56.2", "@types/canvas-confetti": "^1.6.4", "@types/ioredis": "^4.28.10", diff --git a/src/app/page.tsx b/src/app/page.tsx index 7fbb002..00a6a5b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,32 +6,38 @@ import StackedCards from "@/components/stacking-cards/stacked"; import { PreviousEdition } from "@/components/common/Container-Scroll"; import About from "@/components/common/About"; import Team from "@/components/common/Team-Section"; +import Performers from "@/components/widget/performers"; export default function Home() { - return ( - <> -
-
-
- -
-
- -
- {/*
- -
*/} -
-

- The Team -

- -
-
- - - ); + return ( + <> +
+
+
+ +
+ +
+ {/* */} +

+ The Performers +

+ +
+
+ +
+
+

+ The Team +

+ +
+
+ + + ); } diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx new file mode 100644 index 0000000..4f3b913 --- /dev/null +++ b/src/components/widget/performers.tsx @@ -0,0 +1,103 @@ +/* eslint-disable @next/next/no-img-element */ +'use client' + +import { useEffect, useRef } from "react" +import { gsap } from "gsap" +import { ScrollTrigger } from "gsap/ScrollTrigger" +import Lenis from "@studio-freight/lenis" +import { useGSAP } from "@gsap/react" + +gsap.registerPlugin(ScrollTrigger) + +interface PerformerSection { + image: string + title: string + subtitle: string +} + +const performerSections: PerformerSection[] = [ + { + image: "https://images.unsplash.com/photo-1506157491319-81aab3add711?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + title: "The Spotlight Crew", + subtitle: "Shining brightest when it matters most.", + }, + { + image: "https://images.unsplash.com/photo-1540908625033-6e2d915074fb?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + title: "The Spotlight Crew", + subtitle: "Shining brightest when it matters most.", + }, + { + image: "https://images.unsplash.com/photo-1707716489310-0bee7330ff6b?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + title: "The Spotlight Crew", + subtitle: "Shining brightest when it matters most.", + }, +] + +export default function Performers() { + const containerRef = useRef(null) + + useGSAP(() => { + const lenis = new Lenis({ lerp: 0.07 }) + + lenis.on("scroll", ScrollTrigger.update) + + gsap.ticker.add((time) => { + lenis.raf(time * 1000) + }) + + gsap.utils.toArray(".img-container").forEach((container) => { + const img = container.querySelector("img") + + if (img) { + gsap.fromTo( + img, + { yPercent: -10 }, + { + yPercent: 10, + ease: "none", + scrollTrigger: { + trigger: container, + scrub: true, + start: "top bottom", + end: "bottom top", + }, + } + ) + } + }) + + return () => { + lenis.destroy() + ScrollTrigger.getAll().forEach((st) => st.kill()) + } + }, []) + + return ( +
+ {performerSections.map((section, index) => ( +
+
+ {`Performer +
+

+ {section.title} +

+

{section.subtitle}

+
+
+
+ ))} +
+ ) +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 746a992..90d511c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/ui/fluidCursor.js"], "exclude": ["node_modules"] }