animation

2025-12-19 12:47:57 +05:30 · 2025-12-19 12:47:57 +05:30 · 98c7939fad
commit 98c7939fad
parent 5abc04c382
11 changed files with 938 additions and 86 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -124,9 +124,17 @@
@layer base {
  * {
    @apply border-border outline-ring/50;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
  }

+  *::-webkit-scrollbar {
+    display: none;
+  }
+
+  html,
  body {
    @apply bg-background text-foreground;
+    overflow-x: hidden;
  }
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -15,15 +15,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
    <html lang="en">
      <body
        className="font-sans antialiased scrollbar-hide"
-        style={{ fontFamily: "DIN Alternate, sans-serif", scrollbarWidth: "none", msOverflowStyle: "none" }}
+        style={{ fontFamily: "DIN Alternate, sans-serif" }}
      >
-        <style>{`
-          html::-webkit-scrollbar,
-          body::-webkit-scrollbar {
-            display: none;
-          }
-        `}</style>
-      <Navbar />
+
+        <Navbar />

        {/* LadderClimb is now global */}
        <LadderClimb />
--- a/app/page.tsx
+++ b/app/page.tsx
@ -5,7 +5,6 @@ import Testimonials from "@/components/testimonials"
 import OurOfferings from "@/components/our-offerings"
 import TrustedBy from "@/components/trusted-by"
 import Footer from "@/components/footer"
-import LadderClimb from "@/components/ladderclimber"

 export default function Home() {
  return (
--- a/components/dotlottie.d.ts
+++ b/components/dotlottie.d.ts
@ -0,0 +1,9 @@
+import * as React from 'react';
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'dotlottie-wc': any;
+        }
+    }
+}
--- a/components/ladderclimber.tsx
+++ b/components/ladderclimber.tsx
@ -1,62 +1,118 @@
 "use client"
+import { useEffect, useRef } from "react"
+// import "@lottiefiles/dotlottie-wc" // Removed static import to fix SSR error

-import React, { useEffect, useRef, useState } from "react"
+const STOP_DELAY = 700
+const LADDER_OFFSET_BOTTOM = 80
+const LADDER_OFFSET_TOP = 20 // Buffer to keep character from going off-screen at the top

 export default function LadderClimb() {
  const charRef = useRef<HTMLDivElement>(null)
  const ladderRef = useRef<HTMLDivElement>(null)

-  const [animation, setAnimation] = useState<"idle" | "climbing">("idle")
-  const [visible, setVisible] = useState(true)
+  const idleRef = useRef<HTMLDivElement>(null)
+  const climbRef = useRef<HTMLDivElement>(null)
+  const jumpRef = useRef<HTMLDivElement>(null)

-  const ladderHeight = useRef(0)
-  const scrollTimeout = useRef<any>(null)
+  const ladderMaxTravel = useRef(0)
+  const activeState = useRef<"idle" | "climbing" | "jumping">("idle")
+  const scrollTimeout = useRef<NodeJS.Timeout | null>(null)
+  const isFalling = useRef(false)
+
+  const switchAnimation = (newState: "idle" | "climbing" | "jumping") => {
+    if (activeState.current === newState) return
+    activeState.current = newState
+
+    if (!idleRef.current || !climbRef.current || !jumpRef.current) return
+
+    idleRef.current.style.display = "none"
+    climbRef.current.style.display = "none"
+    jumpRef.current.style.display = "none"
+
+    if (newState === "idle") idleRef.current.style.display = "block"
+    else if (newState === "climbing") climbRef.current.style.display = "block"
+    else if (newState === "jumping") jumpRef.current.style.display = "block"
+  }
+
+  const triggerFall = () => {
+    if (!charRef.current || isFalling.current) return
+
+    const style = window.getComputedStyle(charRef.current)
+    const matrix = new DOMMatrix(style.transform)
+    const currentVisualY = Math.abs(matrix.m42)
+
+    if (currentVisualY < 5) {
+      switchAnimation("idle")
+      return
+    }
+
+    isFalling.current = true
+    switchAnimation("jumping")
+
+    charRef.current.classList.add("falling")
+    charRef.current.style.transform = `translateY(0px)`
+
+    const handleLanding = (e: TransitionEvent) => {
+      if (e.propertyName !== "transform") return
+      isFalling.current = false
+      charRef.current?.classList.remove("falling")
+      // Force idle animation upon landing
+      switchAnimation("idle")
+      charRef.current?.removeEventListener("transitionend", handleLanding)
+    }
+    charRef.current.addEventListener("transitionend", handleLanding)
+  }

  const updateDimensions = () => {
    if (ladderRef.current) {
-      ladderHeight.current = ladderRef.current.clientHeight
-    }
-    if (charRef.current) {
-      charRef.current.style.transform = `translateY(0px)`
+      // Logic: The character can only travel the height of the ladder minus the offsets
+      ladderMaxTravel.current = ladderRef.current.clientHeight - LADDER_OFFSET_BOTTOM - LADDER_OFFSET_TOP
    }
  }

  useEffect(() => {
+    import("@lottiefiles/dotlottie-wc")
    updateDimensions()
-    setAnimation("idle")
-
    window.addEventListener("resize", updateDimensions)

    const handleScroll = () => {
-      if (!charRef.current || !ladderRef.current) return
-
-      // show ladder & climbing animation
-      setVisible(true)
-      setAnimation("climbing")
+      if (!charRef.current) return

      const scrollTop = window.scrollY
-      const docHeight = document.body.scrollHeight
-      const viewportHeight = window.innerHeight
+      const docHeight = document.body.scrollHeight - window.innerHeight
+      let progress = docHeight > 0 ? scrollTop / docHeight : 0

-      let progress = scrollTop / (docHeight - viewportHeight)
+      // Clamp progress between 0 and 1
      progress = Math.max(0, Math.min(1, progress))

-      const topOffset = 174
-      const bottomOffset = 30
-      const maxClimb = ladderHeight.current - topOffset - bottomOffset
+      // Calculate Target Y based on the ladder's actual height constraint
+      const targetY = progress * ladderMaxTravel.current

-      const y = progress * maxClimb
-      charRef.current.style.transform = `translateY(-${y}px)`
+      // Interrupt fall if user starts scrolling
+      if (isFalling.current) {
+        isFalling.current = false
+        charRef.current.classList.remove("falling")
+      }

-      // hide smoothly after scroll stops
+      // Apply transformation (constrained to the top of the ladder)
+      charRef.current.style.transform = `translateY(-${targetY}px)`
+
+      // Set climbing animation
+      if (activeState.current !== "climbing") switchAnimation("climbing")
+
+      // Stop detection
      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
      scrollTimeout.current = setTimeout(() => {
-        setAnimation("idle")
-        setVisible(false)
-      }, 500)
+        if (targetY > 2) {
+          triggerFall()
+        } else {
+          switchAnimation("idle")
+        }
+      }, STOP_DELAY)
    }

-    window.addEventListener("scroll", handleScroll)
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    handleScroll()

    return () => {
      window.removeEventListener("scroll", handleScroll)
@ -67,77 +123,65 @@ export default function LadderClimb() {

  return (
    <>
-      {/* Ladder container */}
      <div
        ref={ladderRef}
        style={{
          position: "fixed",
-          right: 0,
-          top: 80,
-          height: "100vh",
-          width: "100px",
+          right: 10,
+          top: 80, // Top margin of the ladder rail
+          height: "calc(100vh - 80px)", // Ladder length
+          width: "40px",
          display: "flex",
          justifyContent: "center",
          alignItems: "flex-end",
          zIndex: 999,
-
-          // smooth hide / show
-          opacity: visible ? 1 : 0,
-          transform: visible ? "translateX(0)" : "translateX(40px)",
-          pointerEvents: visible ? "auto" : "none",
-          transition: "opacity 0.8s ease, transform 0.8s ease"
+          pointerEvents: "none"
        }}
      >
-        {/* Ladder background */}
+        {/* The Visual Ladder */}
        <div
          style={{
            height: "100%",
-            width: "40px",
-            background:
-              "repeating-linear-gradient(to bottom, #666 0, #666 8px, transparent 8px, transparent 30px)",
-            borderLeft: "8px solid #666",
-            borderRight: "8px solid #666",
+            width: "30px",
+            background: "repeating-linear-gradient(to bottom, #444 0, #444 4px, transparent 4px, transparent 30px)",
+            borderLeft: "4px solid #444",
+            borderRight: "4px solid #444",
            zIndex: 1
          }}
        />

-        {/* Character */}
+        {/* The Character Container */}
        <div
          ref={charRef}
          style={{
            position: "absolute",
-            bottom: 45,
+            bottom: 0, // Starts at the bottom of the ladderRef
            left: "50%",
-            marginLeft: "-100px",
-            width: "200px",
+            marginLeft: "-90px",
            zIndex: 10,
-            willChange: "transform",
-            transition: "transform 0.15s linear"
+            willChange: "transform"
          }}
        >
-          {/* CLIMBING */}
-          {animation === "climbing" && (
-            <img
-              src="./climber21.png"
-              alt="Climbing"
-              style={{ width: "400px", height: "200px" }}
-            />
-          )}
+          <style>{`
+            .falling {
+              transition: transform 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
+            }
+          `}</style>

-          {/* IDLE */}
-          {animation === "idle" && (
-            <img
-              src="./Idle3.png"
-              alt="Idle"
-              style={{
-                marginLeft: "10px",
-                width: "400px",
-                height: "200px"
-              }}
-            />
-          )}
+          <div ref={idleRef} style={{ display: 'block' }}>
+            <dotlottie-wc src="https://lottie.host/13145c5f-8acc-4ea9-8842-58a458ef5553/b1W7KoG3lt.lottie" autoplay loop style={{ width: '180px' }} />
+          </div>
+
+          <div ref={climbRef} style={{ display: 'none' }}>
+            <dotlottie-wc src="https://lottie.host/97e44afd-2200-44a5-8d60-8db614c54362/cqzrUWVWdo.lottie" autoplay loop style={{ width: '180px' }} />
+          </div>
+
+          <div ref={jumpRef} style={{ display: 'none' }}>
+            <dotlottie-wc src="https://lottie.host/5fc8dea4-e109-4c3b-813d-afd4da96973b/fdslVCb92l.lottie" autoplay style={{ width: '180px' }} />
+          </div>
        </div>
      </div>
+
    </>
  )
 }
--- a/components/main-hero.tsx
+++ b/components/main-hero.tsx
@ -46,6 +46,7 @@ interface ContentItem {
 export default function MainHero() {
  const [content, setContent] = useState<ContentItem[]>([])
  const [currentIndex, setCurrentIndex] = useState(0)
+  console.log("content", content)

  // Fetch content from API
  useEffect(() => {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
+    "@lottiefiles/dotlottie-wc": "^0.8.11",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
@ -40,6 +41,9 @@
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.2",
+    "@types/three": "^0.182.0",
    "@vercel/analytics": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
@ -61,6 +65,7 @@
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.182.0",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
--- a/public/Idle3.png
+++ b/public/Idle3.png
--- a/public/climber1-removebg.png
+++ b/public/climber1-removebg.png