feat: initial commit — Webflow to Next.js conversion
QuantumLab template converted to Next.js 16 + React 19 + TypeScript: - 8 page routes (home, about, blog, contact, careers, team-members, coming-soon, 404) - Dynamic routes for blog posts, career positions, and team members - GSAP animations (marquee, counters, button hovers) - IntersectionObserver-based scroll reveal (blur-to-clear transitions) - Dark mode with next-themes - React Hook Form + Zod contact form - Framer Motion page transitions - Lottie animations via lottie-web Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
export default function RevealObserver() {
|
||||
const pathname = usePathname()
|
||||
|
||||
useEffect(() => {
|
||||
let observer: IntersectionObserver | null = null
|
||||
let raf: number
|
||||
|
||||
raf = requestAnimationFrame(() => {
|
||||
const allDataWid = document.querySelectorAll<HTMLElement>("[data-w-id]")
|
||||
const targets: HTMLElement[] = []
|
||||
|
||||
allDataWid.forEach((el) => {
|
||||
if (el.style.opacity === "0" && el.style.filter?.includes("blur")) {
|
||||
el.style.transform = "translateY(24px)"
|
||||
el.style.transition = "opacity 0.7s ease-out, filter 0.7s ease-out, transform 0.7s ease-out"
|
||||
targets.push(el)
|
||||
}
|
||||
})
|
||||
|
||||
if (!targets.length) return
|
||||
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement
|
||||
el.style.opacity = "1"
|
||||
el.style.filter = "blur(0px)"
|
||||
el.style.transform = "translateY(0)"
|
||||
observer?.unobserve(el)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.05, rootMargin: "0px 0px -5% 0px" },
|
||||
)
|
||||
|
||||
targets.forEach((el) => observer!.observe(el))
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(raf)
|
||||
observer?.disconnect()
|
||||
}
|
||||
}, [pathname])
|
||||
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user