[V0_FILE]typescriptreact:file="hooks/use-measure.ts" isMerged="true" "use client" import { useCallback, useLayoutEffect, useState } from "react" export interface UseMeasureRect { width: number height: number } export function useMeasure(): [(node: HTMLElement | null) => void, UseMeasureRect] { const [rect, setRect] = useState({ width: 0, height: 0 }) const [element, setElement] = useState(null) const ref = useCallback((node: HTMLElement | null) => { setElement(node) }, []) useLayoutEffect(() => { if (!element) return const resizeObserver = new ResizeObserver((entries) => { if (entries[0]) { const { width, height } = entries[0].contentRect setRect({ width, height }) } }) resizeObserver.observe(element) return () => { resizeObserver.disconnect() } }, [element]) return [ref, rect] } [V0_FILE]typescriptreact:file="components/marquee.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { motion, useAnimationControls } from "framer-motion" import { useMeasure } from "@/hooks/use-measure" import { cn } from "@/lib/utils" export type MarqueeProps = { items: Array direction?: "left" | "right" | "up" | "down" speed?: number gap?: number pauseOnHover?: boolean pauseOnFocus?: boolean gradient?: boolean gradientWidth?: number className?: string itemClassName?: string repeatMultiplier?: number ariaLabel?: string } export function Marquee({ items, direction = "left", speed = 100, gap = 48, pauseOnHover = true, pauseOnFocus = true, gradient = true, gradientWidth = 64, className, itemClassName, repeatMultiplier = 2, ariaLabel = "Scrolling content", }: MarqueeProps) { const controls = useAnimationControls() const [measureRef, { width, height }] = useMeasure() const [isPaused, setIsPaused] = useState(false) const [prefersReducedMotion, setPrefersReducedMotion] = useState(false) const wrapperRef = useRef(null) const isHorizontal = direction === "left" || direction === "right" const contentSize = isHorizontal ? width : height const duration = contentSize > 0 ? contentSize / speed : 0 // Check for reduced motion preference useEffect(() => { const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)") setPrefersReducedMotion(mediaQuery.matches) const handleChange = (e: MediaQueryListEvent) => { setPrefersReducedMotion(e.matches) } mediaQuery.addEventListener("change", handleChange) return () => mediaQuery.removeEventListener("change", handleChange) }, []) // Animation setup useEffect(() => { if (prefersReducedMotion || contentSize === 0) return const getAnimationProps = () => { switch (direction) { case "left": return { x: [0, -contentSize] } case "right": return { x: [-contentSize, 0] } case "up": return { y: [0, -contentSize] } case "down": return { y: [-contentSize, 0] } default: return { x: [0, -contentSize] } } } controls.start({ ...getAnimationProps(), transition: { repeat: Number.POSITIVE_INFINITY, ease: "linear", duration, }, }) }, [controls, direction, contentSize, duration, prefersReducedMotion]) // Pause/resume handlers const handleMouseEnter = () => { if (pauseOnHover && !prefersReducedMotion) { controls.stop() setIsPaused(true) } } const handleMouseLeave = () => { if (pauseOnHover && !prefersReducedMotion) { controls.start({ ...(direction === "left" && { x: [0, -contentSize] }), ...(direction === "right" && { x: [-contentSize, 0] }), ...(direction === "up" && { y: [0, -contentSize] }), ...(direction === "down" && { y: [-contentSize, 0] }), transition: { repeat: Number.POSITIVE_INFINITY, ease: "linear", duration, }, }) setIsPaused(false) } } const handleFocus = () => { if (pauseOnFocus && !prefersReducedMotion) { controls.stop() setIsPaused(true) } } const handleBlur = () => { if (pauseOnFocus && !prefersReducedMotion) { controls.start({ ...(direction === "left" && { x: [0, -contentSize] }), ...(direction === "right" && { x: [-contentSize, 0] }), ...(direction === "up" && { y: [0, -contentSize] }), ...(direction === "down" && { y: [-contentSize, 0] }), transition: { repeat: Number.POSITIVE_INFINITY, ease: "linear", duration, }, }) setIsPaused(false) } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === " ") { e.preventDefault() if (isPaused) { handleBlur() } else { handleFocus() } } } // Render content group const renderContentGroup = (key: string) => (

{items.map((item, index) => (

{typeof item === "string" ? {item} : item}

))}

) // Gradient masks const renderGradientMasks = () => { if (!gradient) return null const maskStyle = { width: `${gradientWidth}px`, height: `${gradientWidth}px` } if (isHorizontal) { return ( <>

) } else { return ( <>

) } } if (prefersReducedMotion) { return (

{items.map((item, index) => (

{typeof item === "string" ? {item} : item}

))}

) } return (

{renderGradientMasks()} {Array.from({ length: Math.max(2, repeatMultiplier) }, (_, i) => renderContentGroup(`group-${i}`))}

) } [V0_FILE]jpg:file="public/abstract-geometric-pattern-with-gradients.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-pattern-with-gradients-PFy9x9bx5AqABSPdfkTJyJs7jvX6kh.jpg" isMerged="true" [V0_FILE]css:file="app/globals.css" 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 { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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; } /* Adding smooth scroll behavior for enhanced user experience */ html { scroll-behavior: smooth; } /* Disable smooth scrolling when animation is active for precise control */ html.animation-active { scroll-behavior: auto; } } [V0_FILE]typescript:file="hooks/use-scroll-direction.ts" isMerged="true" "use client" import { useEffect, useState } from "react" export function useScrollDirection() { const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null>(null) const [scrollY, setScrollY] = useState(0) useEffect(() => { if (typeof window === "undefined") return let lastScrollY = window.scrollY const updateScrollDirection = () => { const currentScrollY = window.scrollY const direction = currentScrollY > lastScrollY ? "down" : "up" if (direction !== scrollDirection && Math.abs(currentScrollY - lastScrollY) > 10) { setScrollDirection(direction) } setScrollY(currentScrollY) lastScrollY = currentScrollY > 0 ? currentScrollY : 0 } const onScroll = () => window.requestAnimationFrame(updateScrollDirection) window.addEventListener("scroll", onScroll) return () => window.removeEventListener("scroll", onScroll) }, [scrollDirection]) return { scrollDirection, scrollY } } [V0_FILE]typescriptreact:file="components/scroll-text.tsx" isQuickEdit="true" isMerged="true" "use client" import { useScrollDirection } from "@/hooks/use-scroll-direction" import { useEffect, useState, useRef } from "react" interface ScrollTextProps { leftText: string rightPhrases: string[] className?: string } export function ScrollText({ leftText, rightPhrases, className = "" }: ScrollTextProps) { const { scrollDirection, scrollY } = useScrollDirection() const [activeIndex, setActiveIndex] = useState(0) const [internalScroll, setInternalScroll] = useState(0) const containerRef = useRef(null) const [isClient, setIsClient] = useState(false) useEffect(() => { setIsClient(true) }, []) useEffect(() => { if (!isClient) return const handleWheel = (e: WheelEvent) => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const viewportHeight = window.innerHeight const componentHeight = rect.height const visibleTop = Math.max(0, -rect.top) const visibleBottom = Math.min(componentHeight, viewportHeight - rect.top) const visibleHeight = visibleBottom - visibleTop const visibilityRatio = visibleHeight / Math.min(componentHeight, viewportHeight) const isSubstantiallyVisible = visibilityRatio > 0.8 if (isSubstantiallyVisible) { document.documentElement.classList.add("animation-active") const currentProgress = internalScroll / 100 const maxProgress = rightPhrases.length - 1 if ((e.deltaY > 0 && currentProgress >= maxProgress) || (e.deltaY < 0 && currentProgress <= 0)) { document.documentElement.classList.remove("animation-active") return // Let the scroll pass through naturally } // Block scroll and handle animation only within bounds e.preventDefault() setInternalScroll((prev) => { const newScroll = prev + e.deltaY * 0.7 const maxScroll = (rightPhrases.length - 1) * 100 return Math.max(0, Math.min(maxScroll, newScroll)) }) } else { document.documentElement.classList.remove("animation-active") } } window.addEventListener("wheel", handleWheel, { passive: false }) return () => { window.removeEventListener("wheel", handleWheel) document.documentElement.classList.remove("animation-active") } }, [rightPhrases.length, internalScroll, isClient]) useEffect(() => { const newIndex = Math.floor(internalScroll / 100) setActiveIndex(Math.max(0, Math.min(rightPhrases.length - 1, newIndex))) }, [internalScroll, rightPhrases.length]) if (!isClient) { return (

{leftText}

{rightPhrases.map((phrase, index) => (

{phrase}

))}

) } return (

{leftText}

{rightPhrases.map((phrase, index) => { const offset = (index - activeIndex) * (isClient && window.innerWidth < 1024 ? 60 : 80) const isActive = index === activeIndex return (

{phrase}

) })}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { ScrollText } from "@/components/scroll-text" import { useState } from "react" export default function Home() { const rightPhrases = [ "the Vercel platform", "Geist Design System", "the Next.js framework", "the Vercel brand", "Next.js Conf", "the v0 platform", "Vercel Ship", ] const [isCopied, setIsCopied] = useState(false) return (

How the Animation Works

A deep dive into the scroll-based text animation you just experienced. Built with React, TypeScript, and smooth scroll hijacking techniques.

Scroll Detection

Custom hook monitors wheel events and component visibility. When 80% visible, scroll is hijacked to control the animation internally.

State Management

Internal scroll state tracks progress through phrases. Each 100px of scroll advances to the next text item with smooth transitions.

Visual Effects

CSS transforms handle positioning, opacity changes create focus effects, and gradient overlays provide smooth fade transitions.

Full Component Code

                    {`"use client"

import { useScrollDirection } from "@/hooks/use-scroll-direction"
import { useEffect, useState, useRef } from "react"

interface ScrollTextProps {
  leftText: string
  rightPhrases: string[]
  className?: string
}

export function ScrollText({ leftText, rightPhrases, className = "" }: ScrollTextProps) {
  const { scrollDirection, scrollY } = useScrollDirection()
  const [activeIndex, setActiveIndex] = useState(0)
  const [internalScroll, setInternalScroll] = useState(0)
  const containerRef = useRef(null)
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  useEffect(() => {
    if (!isClient) return

    const handleWheel = (e: WheelEvent) => {
      if (!containerRef.current) return

      const rect = containerRef.current.getBoundingClientRect()
      const viewportHeight = window.innerHeight
      const componentHeight = rect.height
      const visibleTop = Math.max(0, -rect.top)
      const visibleBottom = Math.min(componentHeight, viewportHeight - rect.top)
      const visibleHeight = visibleBottom - visibleTop
      const visibilityRatio = visibleHeight / Math.min(componentHeight, viewportHeight)

      const isSubstantiallyVisible = visibilityRatio > 0.8

      if (isSubstantiallyVisible) {
        document.documentElement.classList.add("animation-active")

        const currentProgress = internalScroll / 100
        const maxProgress = rightPhrases.length - 1

        if ((e.deltaY > 0 && currentProgress >= maxProgress) || (e.deltaY < 0 && currentProgress <= 0)) {
          document.documentElement.classList.remove("animation-active")
          return
        }

        e.preventDefault()

        setInternalScroll((prev) => {
          const newScroll = prev + e.deltaY * 0.7
          const maxScroll = (rightPhrases.length - 1) * 100
          return Math.max(0, Math.min(maxScroll, newScroll))
        })
      } else {
        document.documentElement.classList.remove("animation-active")
      }
    }

    window.addEventListener("wheel", handleWheel, { passive: false })
    return () => {
      window.removeEventListener("wheel", handleWheel)
      document.documentElement.classList.remove("animation-active")
    }
  }, [rightPhrases.length, internalScroll, isClient])

  useEffect(() => {
    const newIndex = Math.floor(internalScroll / 100)
    setActiveIndex(Math.max(0, Math.min(rightPhrases.length - 1, newIndex)))
  }, [internalScroll, rightPhrases.length])

  if (!isClient) {
    return (
      
        
          {leftText}
        
        
          
            {rightPhrases.map((phrase, index) => (
              
                {phrase}
              
            ))}
          
          
          
        
      
    )
  }

  return (
    
      
        {leftText}
      

      
        
          {rightPhrases.map((phrase, index) => {
            const offset = (index - activeIndex) * (isClient && window.innerWidth < 1024 ? 60 : 80)
            const isActive = index === activeIndex

            return (
              
                {phrase}
              
            )
          })}
        

        
        
      
    
  )
}`}

) } [V0_FILE]json:file="package.json" isEdit="true" isQuickEdit="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "engines": { "node": ">=18 <23" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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.67", "framer-motion": "12.23.22" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.js" module.exports = { plugins: { "@tailwindcss/postcss": {}, autoprefixer: {}, }, } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { optimizePackageImports: [ "lucide-react", "framer-motion", "@radix-ui/react-accordion", "@radix-ui/react-dialog", ], }, images: { remotePatterns: [ { protocol: "https", hostname: "**" } ], }, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, } export default nextConfig [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "baseUrl": ".", "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }

About

Tags

Share

About

Tags

Share

More from yadwinder

About

Tags

Share

About

Tags

Share

More from yadwinder