Image Sequence

'use client'

import { useState } from 'react'
import { ImageSequence } from '@/components/image-sequence'
import { cn } from '@/lib/utils'

const sequences = [
  {
    name: 'Grafitty Can',
    frameCount: 71,
    getImagePath: (idx: number) =>
      `https://qfxa88yauvyse9vr.public.blob.vercel-storage.com/sequence-01/Lata${String(idx).padStart(2, '0')}.webp`,
  },
  {
    name: 'Sentinel Bot',
    frameCount: 71,
    getImagePath: (idx: number) =>
      `https://qfxa88yauvyse9vr.public.blob.vercel-storage.com/sequence-02/Bot${String(idx).padStart(2, '0')}.webp`,
  },
  {
    name: 'Rubber Duck',
    frameCount: 71,
    getImagePath: (idx: number) =>
      `https://qfxa88yauvyse9vr.public.blob.vercel-storage.com/sequence-03/Ducky${String(idx).padStart(2, '0')}.webp`,
  },
]

function ImageSequenceDemo() {
  const [activeIndex, setActiveIndex] = useState(0)

  return (
    <div className="flex min-h-80 w-full items-center justify-center p-8">
      <div className="flex flex-wrap items-center justify-center gap-6">
        {sequences.map((seq, index) => {
          const isActive = index === activeIndex

          return (
            <div
              key={seq.name}
              className="relative cursor-pointer"
              onMouseEnter={() => setActiveIndex(index)}
              onFocus={() => setActiveIndex(index)}
              tabIndex={0}
            >
              <ImageSequence
                sequenceId={seq.name}
                poster={{ src: seq.getImagePath(0), width: 600, height: 600 }}
                alt={seq.name}
                frameCount={seq.frameCount}
                frameDuration={33}
                source={seq.getImagePath}
                playing={isActive}
                resetOnPause
                className={cn(
                  'size-50 transition-opacity duration-200',
                  !isActive && 'opacity-50'
                )}
              />

              {/* Active frame indicator */}
              <div
                className={cn(
                  'pointer-events-none absolute inset-0 border-2',
                  isActive
                    ? 'border-primary opacity-100'
                    : 'border-transparent opacity-0'
                )}
              >
                <span className="bg-primary text-primary-foreground absolute top-0 -left-0.5 -translate-y-full px-1 py-0.5 font-mono text-xs uppercase">
                  {seq.name}
                </span>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default ImageSequenceDemo

'use client'

import { useEffect, useRef, useState } from 'react'
import { Cluster, Filler } from '@/components/ui/cluster'
import { ImageSequence } from '@/components/image-sequence'

const frameCount = 71
const source = (index: number) =>
  `https://qfxa88yauvyse9vr.public.blob.vercel-storage.com/sequence-03/Ducky${String(index).padStart(2, '0')}.webp`

export default function ImageSequenceScrollDemo() {
  const section = useRef<HTMLDivElement>(null)
  const [target, setTarget] = useState(0)

  useEffect(() => {
    let raf = 0
    const update = () => {
      cancelAnimationFrame(raf)
      raf = requestAnimationFrame(() => {
        if (!section.current) return
        const { top, height } = section.current.getBoundingClientRect()
        const margin = window.innerHeight * 0.2
        const distance = Math.max(1, height + window.innerHeight - margin * 2)
        const progress = Math.max(
          0,
          Math.min(1, (window.innerHeight - margin - top) / distance)
        )
        setTarget(Math.round(progress * (frameCount - 1)))
      })
    }
    update()
    window.addEventListener('scroll', update, { passive: true })
    window.addEventListener('resize', update)
    return () => {
      cancelAnimationFrame(raf)
      window.removeEventListener('scroll', update)
      window.removeEventListener('resize', update)
    }
  }, [])

  return (
    <div className="w-full">
      <Cluster direction="col" align="stretch">
        <Cluster>
          <p className="p-3 text-sm">Scroll the page to animate the duck.</p>
          <Filler />
          <span className="w-12 shrink-0 py-3 text-center font-mono text-sm tabular-nums">
            {Math.round((target / (frameCount - 1)) * 100)}%
          </span>
        </Cluster>
        <div ref={section} className="grid h-96 place-items-center">
          <ImageSequence
            sequenceId="scroll-duck"
            poster={{ src: source(0), width: 600, height: 600 }}
            frameCount={frameCount}
            source={source}
            mode="scrub"
            target={target}
            alt="Duck animated by page scrolling"
            className="size-64 max-h-full max-w-full"
          />
        </div>
      </Cluster>
    </div>
  )
}