[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono, DM_Serif_Display } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); const _dmSerifDisplay = DM_Serif_Display({ subsets: ["latin"], weight: "400" }); export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; /* Added DM Serif Display as serif font for hero */ --font-serif: 'DM Serif Display', 'Georgia', 'serif'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]png:file="public/images/1.png" isMoved="true" isMovedFrom="public/images/tradecraft-fm-a-woman-strolling-through-a-whale-zoo-exhibit-41b8d116-bb79-47d4-a66f-6ae62078ca19-0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_woman_strolling_through_a_whale_zoo_exhibit_-_41b8d116-bb79-47d4-a66f-6ae62078ca19_0-ELJfQ11cjCWs6bPEd3qkSE96WLiRKn.png" isMerged="true" [V0_FILE]png:file="public/images/2.png" isMoved="true" isMovedFrom="public/images/tradecraft-fm-a-close-up-photograph-of-a-praying-mantis-set-o-144f7c74-d9b8-4d15-b7ee-e1921f35e2a0-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_close_up_photograph_of_a_praying_mantis_set_o_144f7c74-d9b8-4d15-b7ee-e1921f35e2a0_3-PgkCiYHk0OkiLHIp2hrhqjIwt6wK7i.png" isMerged="true" [V0_FILE]png:file="public/images/4.png" isMoved="true" isMovedFrom="public/images/tradecraft-fm-a-fashion-style-photograph-of-a-woman-playing-i-1200ebfb-1d02-46fe-a36f-350979207adb-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_fashion_style_photograph_of_a_woman_playing_i_1200ebfb-1d02-46fe-a36f-350979207adb_3-ilviQCkwCGYH3QwMOQ0BIr5lV4V8Fn.png" isMerged="true" [V0_FILE]png:file="public/images/11.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm__create_this_--stylize_400_--v_7_72732c84-69ee-45ea-993e-3259fca5155f_0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm__create_this_--stylize_400_--v_7_72732c84-69ee-45ea-993e-3259fca5155f_0-jrfFeruxeERqNytoW2hqQ49a1JDbdY.png" isMerged="true" [V0_FILE]png:file="public/images/12.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm_graffiti_in_berlin_1980s._retro_80s._soviet._--_329a8f9d-1048-420c-b0bb-83e3eaad54bd_2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_graffiti_in_berlin_1980s._retro_80s._soviet._--_329a8f9d-1048-420c-b0bb-83e3eaad54bd_2-BNUKlNeIXEew5XrbGsRZYzj9ziCXSk.png" isMerged="true" [V0_FILE]png:file="public/images/3.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm_an_andreas_gursky_style_aerial_shot_of_the_Danu_996197b3-0201-4c09-b8f6-ff948095378b_3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_an_andreas_gursky_style_aerial_shot_of_the_Danu_996197b3-0201-4c09-b8f6-ff948095378b_3-OrRZrqod0RTtKri3Up76esDTb3PeGG.png" isMerged="true" [V0_FILE]png:file="public/images/5.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm_a_artistic_rendition_of_a_modern_workspace_--ar_c2184edf-b068-44ec-9bfe-5aca53767306_3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_artistic_rendition_of_a_modern_workspace_--ar_c2184edf-b068-44ec-9bfe-5aca53767306_3-NA7M4KnU87uwDaiDlu7rRFJpYMMhYz.png" isMerged="true" [V0_FILE]png:file="public/images/6.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm_a_poster_for_the_film_a_woman_looking_up_at_an__b32d8628-0c4f-4b40-815d-20cfed88cae7_1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_An_image_of_a_man_looking_skyward_in_a_fantasti_5e00b966-7a88-4bc8-a14c-3d695c4cbea4_0-AaHX6bwyOo48Pkz2mnMqAlnNHnfhbx.png" isMerged="true" [V0_FILE]png:file="public/images/7.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm_imagine_a_couple_driving_on_a_road_trip_with_th_071e1dd4-3fbd-485d-8c80-b28d4b5f8f47_0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_poster_for_the_film_a_woman_looking_up_at_an__b32d8628-0c4f-4b40-815d-20cfed88cae7_1-sSUJ4B8VAmpBY1QyUIxUrpzzKp1upO.png" isMerged="true" [V0_FILE]png:file="public/images/9.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm__create_this_--stylize_400_--v_7_72732c84-69ee-45ea-993e-3259fca5155f_0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_imagine_a_couple_driving_on_a_road_trip_with_th_071e1dd4-3fbd-485d-8c80-b28d4b5f8f47_0-b1iBVKhHu8o2CHjMFR57H339ZFa8IL.png" isMerged="true" [V0_FILE]png:file="public/images/10.png" isMoved="true" isMovedFrom="public/images/tradecraft_fm_graffiti_in_berlin_1980s._retro_80s._soviet._--_329a8f9d-1048-420c-b0bb-83e3eaad54bd_2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_hacker_style_profile_pic_--stylize_400_--v_7_5bba4175-0f0e-4ba7-829f-1d9fd0647689_2%20%282%29-vmzzBD3XUgbYVxf8IvXaF2zlJAmPTf.png" isMerged="true" [V0_FILE]png:file="public/images/13.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_artistic_rendition_of_a_modern_workspace_--ar_c2184edf-b068-44ec-9bfe-5aca53767306_3-NA7M4KnU87uwDaiDlu7rRFJpYMMhYz.png" isMerged="true" [V0_FILE]png:file="public/images/16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_a_poster_for_the_film_a_woman_looking_up_at_an__b32d8628-0c4f-4b40-815d-20cfed88cae7_1-sSUJ4B8VAmpBY1QyUIxUrpzzKp1upO.png" isMerged="true" [V0_FILE]png:file="public/images/17.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_an_andreas_gursky_style_aerial_shot_of_the_Danu_996197b3-0201-4c09-b8f6-ff948095378b_3-OrRZrqod0RTtKri3Up76esDTb3PeGG.png" isMerged="true" [V0_FILE]png:file="public/images/18.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm__create_this_--stylize_400_--v_7_72732c84-69ee-45ea-993e-3259fca5155f_0-jrfFeruxeERqNytoW2hqQ49a1JDbdY.png" isMerged="true" [V0_FILE]png:file="public/images/19.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_graffiti_in_berlin_1980s._retro_80s._soviet._--_329a8f9d-1048-420c-b0bb-83e3eaad54bd_2-BNUKlNeIXEew5XrbGsRZYzj9ziCXSk.png" isMerged="true" [V0_FILE]png:file="public/images/20.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tradecraft_fm_imagine_a_couple_driving_on_a_road_trip_with_th_071e1dd4-3fbd-485d-8c80-b28d4b5f8f47_0-b1iBVKhHu8o2CHjMFR57H339ZFa8IL.png" isMerged="true" [V0_FILE]xml:file="public/desingthing_brandmark.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/desingthing_brandmark-cQ8gzvDAah9PchoY3VStCblFUhU8OU.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" import { ChevronDown } from 'lucide-react' export default function HomePage() { const containerRef = useRef(null) const [scrollProgress, setScrollProgress] = useState(0) const [autoScrollOffset, setAutoScrollOffset] = useState(0) const [animationComplete, setAnimationComplete] = useState(false) const autoScrollStartTime = useRef(null) const [mounted, setMounted] = useState(false) const [isMobile, setIsMobile] = useState(false) useEffect(() => { setMounted(true) const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener('resize', checkMobile) return () => window.removeEventListener('resize', checkMobile) }, []) useEffect(() => { const handleScroll = () => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const containerHeight = containerRef.current.offsetHeight const viewportHeight = window.innerHeight const scrollableDistance = containerHeight - viewportHeight const scrolled = -rect.top const progress = Math.min(Math.max(scrolled / scrollableDistance, 0), 1) // Lock scroll at 95% until animation completes if (progress >= 0.95 && !animationComplete) { const maxScroll = scrollableDistance * 0.95 window.scrollTo(0, maxScroll) setScrollProgress(0.95) return } setScrollProgress(progress) } window.addEventListener("scroll", handleScroll) handleScroll() return () => window.removeEventListener("scroll", handleScroll) }, [animationComplete]) useEffect(() => { if (scrollProgress < 0.95) return if (!autoScrollStartTime.current) { autoScrollStartTime.current = Date.now() } const interval = setInterval(() => { setAutoScrollOffset((prev) => prev - 1.5) }, 16) return () => clearInterval(interval) }, [scrollProgress]) const cards = [ { image: "/images/1.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.75 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.95 }, exploded: { x: -3200 + (Math.random() * 400 - 200), y: -280, opacity: 1, scale: 0.85, rotation: 0 }, row: { x: -3200, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/2.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.9 }, exploded: { x: -2800 + (Math.random() * 400 - 200), y: -200, opacity: 1, scale: 0.9, rotation: 0 }, row: { x: -2800, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/3.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.85 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.88 }, exploded: { x: -2400 + (Math.random() * 400 - 200), y: -150, opacity: 1, scale: 0.95, rotation: 0 }, row: { x: -2400, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/4.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.85 }, exploded: { x: -2000 + (Math.random() * 400 - 200), y: -100, opacity: 1, scale: 1.1, rotation: 0 }, row: { x: -2000, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/5.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.78 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.82 }, exploded: { x: -1600 + (Math.random() * 400 - 200), y: -120, opacity: 1, scale: 0.92, rotation: 0 }, row: { x: -1600, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/6.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.82 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.8 }, exploded: { x: -1200 + (Math.random() * 400 - 200), y: -180, opacity: 1, scale: 0.9, rotation: 0 }, row: { x: -1200, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/7.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.78 }, exploded: { x: -800 + (Math.random() * 400 - 200), y: -240, opacity: 1, scale: 0.88, rotation: 0 }, row: { x: -800, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/9.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.72 }, exploded: { x: -400 + (Math.random() * 400 - 200), y: 50, opacity: 1, scale: 0.83, rotation: 0 }, row: { x: -400, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/10.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.7 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.68 }, exploded: { x: 0 + (Math.random() * 400 - 200), y: -100, opacity: 1, scale: 0.82, rotation: 0 }, row: { x: 0, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/11.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.65 }, exploded: { x: 400 + (Math.random() * 400 - 200), y: -60, opacity: 1, scale: 0.8, rotation: 0 }, row: { x: 400, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/12.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.72 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.5 }, exploded: { x: 800 + (Math.random() * 400 - 200), y: 200, opacity: 1, scale: 0.78, rotation: 0 }, row: { x: 800, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/13.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.74 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.6 }, exploded: { x: 1200 + (Math.random() * 400 - 200), y: 150, opacity: 1, scale: 0.88, rotation: 0 }, row: { x: 1200, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/16.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.58 }, exploded: { x: 1600 + (Math.random() * 400 - 200), y: -120, opacity: 1, scale: 0.82, rotation: 0 }, row: { x: 1600, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/17.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.52 }, exploded: { x: 2000 + (Math.random() * 400 - 200), y: 180, opacity: 1, scale: 0.8, rotation: 0 }, row: { x: 2000, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/18.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.72 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.5 }, exploded: { x: 2400 + (Math.random() * 400 - 200), y: 100, opacity: 1, scale: 0.86, rotation: 0 }, row: { x: 2400, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/19.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.8 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.48 }, exploded: { x: 2800 + (Math.random() * 400 - 200), y: 140, opacity: 1, scale: 0.84, rotation: 0 }, row: { x: 2800, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, { image: "/images/20.png", initial: { x: 0, y: 0, opacity: 0, scale: 0.68 }, descending: { x: 0, y: 250, opacity: 1, scale: 0.46 }, exploded: { x: 3200 + (Math.random() * 400 - 200), y: 200, opacity: 1, scale: 0.82, rotation: 0 }, row: { x: 3200, y: 380, opacity: 1, scale: 1, rotation: 0 }, }, ] const displayCards = isMobile ? cards.slice(0, 7) : cards const getCardStyle = (card: typeof cards[0], index: number) => { let x = card.initial.x let y = card.initial.y let opacity = 0 let scale = card.initial.scale const isLateCard = index >= 8 if (scrollProgress > 0 && scrollProgress <= 0.35) { const progress = Math.min(scrollProgress / 0.35, 1) const delay = index * 0.05 const adjustedProgress = Math.max(0, Math.min((progress - delay) * 2, 1)) opacity = isLateCard ? 0 : adjustedProgress } if (scrollProgress > 0.35 && scrollProgress <= 0.55) { const progress = Math.min((scrollProgress - 0.35) / 0.2, 1) const eased = progress * progress * (3 - 2 * progress) x = 0 y = card.descending.y * eased scale = card.initial.scale + (card.descending.scale - card.initial.scale) * eased opacity = isLateCard ? Math.min(eased * 2, 1) : 1 } if (scrollProgress > 0.55) { const progress = Math.min((scrollProgress - 0.55) / 0.2, 1) const eased = progress * progress * (3 - 2 * progress) x = card.descending.x + (card.exploded.x - card.descending.x) * eased y = card.descending.y + (card.exploded.y - card.descending.y) * eased scale = card.descending.scale + (card.exploded.scale - card.descending.scale) * eased opacity = 1 } if (scrollProgress > 0.75) { const progress = Math.min((scrollProgress - 0.75) / 0.25, 1) const eased = progress * progress * (3 - 2 * progress) x = card.exploded.x + (card.row.x - card.exploded.x) * eased y = card.exploded.y + (card.row.y - card.exploded.y) * eased scale = card.exploded.scale + (card.row.scale - card.exploded.scale) * eased opacity = card.row.opacity } if (scrollProgress >= 0.95 && !isMobile) { const loopWidth = 6800 const minX = -3400 const rawPos = card.row.x + autoScrollOffset const relativePos = rawPos - minX const wrappedRelativePos = ((relativePos % loopWidth) + loopWidth) % loopWidth x = wrappedRelativePos + minX const fadeEdge = 2800 const fadeWidth = 400 if (x < -fadeEdge) { opacity = Math.max(0, 1 - ((-fadeEdge - x) / fadeWidth)) } else if (x > fadeEdge) { opacity = Math.max(0, 1 - ((x - fadeEdge) / fadeWidth)) } else { opacity = 1 } } return { transform: `translate(${x}px, ${y}px) scale(${scale})`, opacity, } } const nextSectionOpacity = animationComplete && scrollProgress > 0.95 ? Math.min((scrollProgress - 0.95) * 10, 1) : 0 return (

{/* Navigation */} {/* Hero Section - Pinned scroll container */}

{displayCards.map((card, index) => (

))}

{/* Centered Logo */}

by Webrenew

{/* Headline and CTA */}

0.5 ? (scrollProgress - 0.5) * 2 : 0, transform: `scale(${scrollProgress > 0.5 ? 0.85 + (scrollProgress - 0.5) * 0.3 : 0.85}) translateY(-${scrollProgress > 0.75 ? (scrollProgress - 0.75) * 50 : 0}vh)`, transition: "opacity 0.2s, transform 0.2s", }} >

Doomscrolling

by Webrenew

{/* Scroll Indicator */} {scrollProgress < 0.1 && (

Keep scrolling

)}

) }

About

Tags

Share

About

Tags

Share

More from webrenew

About

Tags

Share

About

Tags

Share

More from webrenew