uifolio 0.6.0 → 0.7.1

package/src/components/animations/image-crossfade.tsx

@@ -0,0 +1,276 @@
+import { useEffect, useRef, useState } from 'react'
+import { useReducedMotion } from '@/lib/use-reduced-motion'
+
+export interface CrossfadeImage {
+  src: string
+  alt: string
+  kicker: string
+  title: string
+  description: string
+}
+
+const defaultOverlay =
+  'linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.35))'
+
+const defaultImages: CrossfadeImage[] = [
+  {
+    src: '/crossfade-1.svg',
+    alt: 'Hills at sunset, in amber and coral tones.',
+    kicker: '01 — Light',
+    title: 'Dawn',
+    description: 'The day settles over the reliefs, the colors warm up.',
+  },
+  {
+    src: '/crossfade-2.svg',
+    alt: 'Turquoise sea horizon under a pale moon.',
+    kicker: '02 — Tide',
+    title: 'Ocean',
+    description: 'A horizon line, two tones, and the motion that ties them together.',
+  },
+  {
+    src: '/crossfade-3.svg',
+    alt: 'Deep forest crossed by a green mist.',
+    kicker: '03 — Canopy',
+    title: 'Forest',
+    description: 'Silhouettes answer each other in filtered light.',
+  },
+  {
+    src: '/crossfade-4.svg',
+    alt: 'Nocturne mountains under an indigo sky and a clear moon.',
+    kicker: '04 — Night',
+    title: 'Night',
+    description: 'When the light drops, the outlines become secrets.',
+  },
+]
+
+function clamp(value: number) {
+  return Math.min(1, Math.max(0, value))
+}
+
+function StaticGallery({ images }: { images: CrossfadeImage[] }) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {images.map((image) => (
+        <figure key={image.src} className="overflow-hidden rounded-sm border bg-card">
+          <img
+            src={image.src}
+            alt={image.alt}
+            loading="lazy"
+            decoding="async"
+            className="aspect-[16/10] w-full object-cover"
+          />
+          <figcaption className="px-3 py-2.5">
+            <span className="text-[9px] font-semibold uppercase tracking-[0.16em] text-primary">
+              {image.kicker}
+            </span>
+            <p className="mt-0.5 text-sm font-semibold">{image.title}</p>
+          </figcaption>
+        </figure>
+      ))}
+    </div>
+  )
+}
+
+export interface ImageCrossfadeProps {
+  images?: CrossfadeImage[]
+  overlay?: string
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function ImageCrossfade({
+  images = defaultImages,
+  overlay = defaultOverlay,
+  delay = 0,
+  duration = 500,
+  easing = 'ease-out',
+}: ImageCrossfadeProps) {
+  const list = images.length > 0 ? images : defaultImages
+  const section = useRef<HTMLDivElement>(null)
+  const [progress, setProgress] = useState(0)
+  const reduced = useReducedMotion()
+
+  useEffect(() => {
+    if (reduced) return
+
+    let frame = 0
+    const update = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const element = section.current
+        if (!element) return
+        const total = element.offsetHeight - window.innerHeight + 57
+        const top = element.getBoundingClientRect().top - 57
+        setProgress(total > 0 ? Math.min(1, Math.max(0, -top / total)) : 0)
+      })
+    }
+
+    update()
+    window.addEventListener('scroll', update, { passive: true })
+    window.addEventListener('resize', update)
+    return () => {
+      window.removeEventListener('scroll', update)
+      window.removeEventListener('resize', update)
+      cancelAnimationFrame(frame)
+    }
+  }, [reduced])
+
+  if (reduced) return <StaticGallery images={list} />
+
+  const slideCount = list.length
+  const maxIndex = Math.max(1, slideCount - 1)
+  const position = slideCount <= 1 ? 0 : progress * maxIndex
+  const index = Math.min(slideCount - 1, Math.floor(position))
+  const blend = slideCount <= 1 ? 0 : position - index
+  const textT = clamp((blend - 0.44) / 0.12)
+  const textEased = textT * textT * (3 - 2 * textT)
+  const active = Math.min(slideCount - 1, Math.round(position))
+  const scale = 1.02 + progress * 0.04
+
+  const goTo = (target: number) => {
+    const element = section.current
+    if (!element) return
+    const total = element.offsetHeight - window.innerHeight + 57
+    const top = element.getBoundingClientRect().top + window.scrollY - 57
+    window.scrollTo({
+      top: top + total * (target / maxIndex),
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <div
+      ref={section}
+      className="relative"
+      style={{ height: `${Math.max(2, slideCount) * 100}vh` }}
+    >
+      <div className="sticky top-[57px] flex h-[calc(100dvh-57px)] items-center justify-center px-0 py-2 sm:px-4 sm:py-4">
+        <div className="relative flex h-[min(calc(100dvh-85px),680px)] w-full max-w-5xl flex-col overflow-hidden rounded-sm border bg-card shadow-xl sm:flex-row">
+          <div className="relative h-[42%] w-full shrink-0 overflow-hidden bg-muted sm:h-auto sm:min-h-0 sm:flex-1">
+            {list.map((image, imageIndex) => {
+              const isCurrent = slideCount > 1 && imageIndex === index
+              const isNext = slideCount > 1 && imageIndex === index + 1
+              const visible = slideCount <= 1 ? imageIndex === 0 : isCurrent || isNext
+              return (
+                <img
+                  key={image.src}
+                  src={image.src}
+                  alt={image.alt}
+                  loading="eager"
+                  decoding="async"
+                  draggable={false}
+                  aria-hidden={imageIndex !== active}
+                  data-image-slide
+                  className="absolute inset-0 h-full w-full object-cover will-change-[clip-path,transform]"
+                  style={{
+                    opacity: visible ? 1 : 0,
+                    zIndex: isCurrent ? 2 : isNext ? 1 : 0,
+                    clipPath: isCurrent ? `inset(0 0 ${blend * 100}% 0)` : undefined,
+                    transform: `scale(${scale})`,
+                    transitionProperty: 'opacity',
+                    transitionDelay: `${delay}ms`,
+                    transitionDuration: `${duration}ms`,
+                    transitionTimingFunction: easing,
+                  }}
+                />
+              )
+            })}
+
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0"
+              style={{ background: overlay }}
+            />
+
+            <div className="absolute inset-x-0 top-0 flex items-center justify-between gap-3 px-4 py-3 text-white sm:px-5">
+              <span className="text-[9px] font-semibold uppercase tracking-[0.2em] text-white/80">
+                Images fondues
+              </span>
+              <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-white/80">
+                {String(active + 1).padStart(2, '0')} / {String(slideCount).padStart(2, '0')}
+              </span>
+            </div>
+          </div>
+
+          <div className="relative flex min-h-0 flex-1 flex-col justify-between border-t bg-card p-5 sm:w-[43%] sm:flex-none sm:border-l sm:border-t-0 sm:p-7">
+            <div className="relative min-h-0 flex-1">
+              {list.map((image, imageIndex) => {
+                const opacity =
+                  slideCount <= 1
+                    ? imageIndex === 0
+                      ? 1
+                      : 0
+                    : imageIndex === index
+                      ? 1 - textEased
+                      : imageIndex === index + 1
+                        ? textEased
+                        : 0
+                return (
+                  <div
+                    key={image.src}
+                    data-text-slide
+                    data-active={imageIndex === active ? 'true' : undefined}
+                    aria-hidden={imageIndex !== active}
+                    className="pointer-events-none absolute inset-0 flex flex-col justify-center"
+                    style={{
+                      opacity,
+                      zIndex: imageIndex === index ? 2 : imageIndex === index + 1 ? 1 : 0,
+                      transitionProperty: 'opacity',
+                      transitionDelay: `${delay}ms`,
+                      transitionDuration: `${duration}ms`,
+                      transitionTimingFunction: easing,
+                    }}
+                  >
+                    <p className="text-[9px] font-semibold uppercase tracking-[0.2em] text-primary">
+                      {image.kicker}
+                    </p>
+                    <h3 className="mt-2 text-[clamp(1.6rem,3vw,3rem)] font-semibold leading-none tracking-tight">
+                      {image.title}
+                    </h3>
+                    <p className="mt-3 max-w-sm text-[12px] leading-relaxed text-muted-foreground sm:text-[13px]">
+                      {image.description}
+                    </p>
+                  </div>
+                )
+              })}
+            </div>
+
+            <div className="relative z-10 mt-4 flex items-center justify-between gap-3">
+              <div className="flex items-center gap-1.5">
+                {list.map((image, imageIndex) => (
+                  <button
+                    key={image.src}
+                    type="button"
+                    onClick={() => goTo(imageIndex)}
+                    aria-label={`Afficher ${image.title}`}
+                    aria-current={imageIndex === active ? 'true' : undefined}
+                    className={`h-1.5 rounded-full transition-all ${
+                      imageIndex === active
+                        ? 'w-7 bg-primary'
+                        : 'w-3 bg-border hover:bg-muted-foreground/60'
+                    }`}
+                  />
+                ))}
+              </div>
+              <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-muted-foreground">
+                {String(active + 1).padStart(2, '0')} / {String(slideCount).padStart(2, '0')}
+              </span>
+            </div>
+
+            <div
+              aria-hidden
+              className="absolute inset-y-8 left-0 hidden w-px overflow-hidden bg-border sm:block"
+            >
+              <div className="w-px bg-primary" style={{ height: `${progress * 100}%` }} />
+            </div>
+          </div>
+
+          <div aria-hidden className="absolute inset-x-0 bottom-0 h-px overflow-hidden bg-border">
+            <div className="h-px bg-primary" style={{ width: `${progress * 100}%` }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/animations/palette-context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react'
+import type { CardPalette } from './palette'
+
+export type CardPaletteMode = 'theme' | 'gradient' | 'solid'
+
+export interface CardPaletteContextValue {
+  mode: CardPaletteMode
+  from: string
+  to: string
+  solid: string
+  palette: CardPalette | undefined
+  setMode: (mode: CardPaletteMode) => void
+  setFrom: (color: string) => void
+  setTo: (color: string) => void
+  setSolid: (color: string) => void
+}
+
+export const CardPaletteContext = createContext<CardPaletteContextValue | null>(null)
+
+export function useCardPalette() {
+  const context = useContext(CardPaletteContext)
+  if (!context) throw new Error('useCardPalette must be used within CardPaletteProvider')
+  return context
+}

package/src/components/animations/palette-provider.tsx

@@ -0,0 +1,28 @@
+import { useState, type ReactNode } from 'react'
+import type { CardPalette } from './palette'
+import {
+  CardPaletteContext,
+  type CardPaletteMode,
+} from './palette-context'
+
+export function CardPaletteProvider({ children }: { children: ReactNode }) {
+  const [mode, setMode] = useState<CardPaletteMode>('theme')
+  const [from, setFrom] = useState('#0EA5E9')
+  const [to, setTo] = useState('#8B5CF6')
+  const [solid, setSolid] = useState('#10B981')
+
+  const palette: CardPalette | undefined =
+    mode === 'theme'
+      ? undefined
+      : mode === 'gradient'
+        ? { mode: 'gradient', from, to }
+        : { mode: 'solid', color: solid }
+
+  return (
+    <CardPaletteContext.Provider
+      value={{ mode, from, to, solid, palette, setMode, setFrom, setTo, setSolid }}
+    >
+      {children}
+    </CardPaletteContext.Provider>
+  )
+}

package/src/components/animations/palette.ts

@@ -0,0 +1,18 @@
+export type CardPalette =
+  | { mode: 'gradient'; from: string; to: string }
+  | { mode: 'solid'; color: string }
+
+export function cardBackground(palette: CardPalette | undefined, fallback: string) {
+  if (!palette) return fallback
+  if (palette.mode === 'solid') return palette.color
+  return `linear-gradient(135deg, ${palette.from} 0%, ${palette.to} 100%)`
+}
+
+export function paletteAura(palette: CardPalette | undefined) {
+  if (palette?.mode === 'solid') return 'none'
+
+  const from = palette?.from ?? 'var(--primary)'
+  const to = palette?.to ?? 'var(--primary)'
+
+  return `radial-gradient(circle at 20% 30%, color-mix(in oklab, ${from} 20%, transparent), transparent 45%), radial-gradient(circle at 85% 70%, color-mix(in oklab, ${to} 12%, transparent), transparent 40%)`
+}

package/src/components/animations/scroll-text.tsx

@@ -0,0 +1,161 @@
+import { Fragment, useEffect, useRef, useState } from 'react'
+import type { RefObject } from 'react'
+import { useReducedMotion } from '@/lib/use-reduced-motion'
+
+export interface ScrollTextProps {
+  text?: string
+  prefix?: string
+  className?: string
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+const REVEAL_START_RATIO = 0.9
+const REVEAL_END_RATIO = 0.3
+
+function wordOffsets(words: string[]) {
+  let total = 0
+  return words.map((word) => {
+    const start = total
+    total += Array.from(word).length
+    return start
+  })
+}
+
+function Paragraph({
+  words,
+  visibleLetters,
+  paragraphRef,
+  className,
+  delay = 0,
+  duration = 300,
+  easing = 'ease-out',
+}: {
+  words: string[]
+  visibleLetters: number
+  paragraphRef?: RefObject<HTMLParagraphElement | null>
+  className: string
+  delay?: number
+  duration?: number
+  easing?: string
+}) {
+  const lettersByWord = words.map((word) => Array.from(word))
+  const offsets = wordOffsets(words)
+
+  return (
+    <p ref={paragraphRef} data-scroll-text className={className}>
+      <span className="sr-only">{words.join(' ')}</span>
+      <span aria-hidden="true">
+        {lettersByWord.map((letters, wordIndex) => {
+          const start = offsets[wordIndex]
+
+          return (
+            <Fragment key={`${words[wordIndex]}-${wordIndex}`}>
+              <span data-word className="inline-block whitespace-nowrap">
+                {letters.map((letter, index) => {
+                  const lit = start + index < visibleLetters
+                  return (
+                    <span
+                      key={`${letter}-${index}`}
+                      data-letter
+                      className={`transition-colors ${
+                        lit ? 'text-primary' : 'text-muted-foreground'
+                      }`}
+                      style={{
+                        transitionDelay: `${delay}ms`,
+                        transitionDuration: `${duration}ms`,
+                        transitionTimingFunction: easing,
+                      }}
+                    >
+                      {letter}
+                    </span>
+                  )
+                })}
+              </span>
+              {wordIndex < words.length - 1 ? ' ' : null}
+            </Fragment>
+          )
+        })}
+      </span>
+    </p>
+  )
+}
+
+export function ScrollText({
+  text = 'Each pass lights the text a bit more. Scroll up, and the color gradually returns to its initial state.',
+  prefix = 'C',
+  className = 'w-full max-w-3xl text-[clamp(1.3rem,3.2vw,2.4rem)] font-medium leading-[1.35] tracking-tight',
+  delay = 0,
+  duration = 300,
+  easing = 'ease-out',
+}: ScrollTextProps) {
+  const words = text.trim() ? text.trim().split(/\s+/) : []
+  const letterCount = words.reduce((total, word) => total + Array.from(word).length, 0)
+  const prefixLetters = Array.from(prefix.replace(/\s+/g, '')).length
+  const [visibleLetters, setVisibleLetters] = useState(0)
+  const paragraphRef = useRef<HTMLParagraphElement>(null)
+  const reduced = useReducedMotion()
+
+  useEffect(() => {
+    if (reduced) return
+
+    const element = paragraphRef.current
+    if (!element) return
+
+    let frame = 0
+    const paint = () => {
+      frame = 0
+      const { top } = element.getBoundingClientRect()
+      const viewport = window.innerHeight || 1
+      const start = viewport * REVEAL_START_RATIO
+      const end = viewport * REVEAL_END_RATIO
+      const progress = Math.min(1, Math.max(0, (top - end) / (start - end)))
+      const revealed = Math.max(prefixLetters, Math.round((1 - progress) * letterCount))
+      setVisibleLetters(revealed)
+    }
+
+    const schedulePaint = () => {
+      if (frame) return
+      frame = requestAnimationFrame(paint)
+    }
+
+    schedulePaint()
+    window.addEventListener('scroll', schedulePaint, { passive: true })
+    window.addEventListener('resize', schedulePaint)
+    return () => {
+      window.removeEventListener('scroll', schedulePaint)
+      window.removeEventListener('resize', schedulePaint)
+      cancelAnimationFrame(frame)
+    }
+  }, [reduced, prefixLetters, letterCount])
+
+  if (reduced) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center px-5 py-16 sm:px-8">
+        <Paragraph
+          words={words}
+          visibleLetters={letterCount}
+          className={className}
+          delay={delay}
+          duration={duration}
+          easing={easing}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-[100vh] items-center justify-center px-5 py-16 sm:px-8">
+      <Paragraph
+        words={words}
+        visibleLetters={visibleLetters}
+        paragraphRef={paragraphRef}
+        className={className}
+        delay={delay}
+        duration={duration}
+        easing={easing}
+      />
+    </div>
+  )
+}

package/src/components/animations/stacking-cards.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from 'react'
+import { ArrowDown } from 'lucide-react'
+import { useReducedMotion } from '@/lib/use-reduced-motion'
+import { cn } from '@/lib/utils'
+import { makeMotionCards, type MotionCardData } from './data'
+import { cardBackground, type CardPalette } from './palette'
+
+function CardContent({ card, flat = false }: { card: MotionCardData; flat?: boolean }) {
+  return (
+    <>
+      {!flat && <span data-card-scrim className="absolute inset-0 bg-black/30" />}
+      <span className="relative flex items-start justify-between gap-4 text-white/65">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.22em]">
+          Chapitre {card.number} · {card.kicker}
+        </span>
+        <span className="font-mono text-5xl font-black leading-none tracking-tighter text-white/15 sm:text-7xl">
+          {card.number}
+        </span>
+      </span>
+      <span className="relative block">
+        <span className="display block text-4xl leading-none text-white sm:text-6xl">
+          {card.title}
+        </span>
+        <span className="mt-3 block max-w-md text-[12px] leading-relaxed text-white/70">
+          {card.description}
+        </span>
+        <span className="mt-5 inline-flex items-center gap-2 text-[9px] font-semibold uppercase tracking-[0.2em] text-white/50">
+          <ArrowDown className="size-3" />
+          Empiler
+        </span>
+      </span>
+    </>
+  )
+}
+
+function StaticStack({ cards, flat = false }: { cards: MotionCardData[]; flat?: boolean }) {
+  return (
+    <div className="grid gap-3">
+      {cards.map((card) => (
+        <article
+          key={card.id}
+          className="relative flex h-[300px] flex-col justify-between overflow-hidden rounded-sm border border-border p-5 shadow-sm sm:h-[340px] sm:p-6"
+          style={{ background: card.gradient }}
+          data-motion-card
+        >
+          <CardContent card={card} flat={flat} />
+        </article>
+      ))}
+    </div>
+  )
+}
+
+export interface StackingCardsProps {
+  count?: number
+  palette?: CardPalette
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function StackingCards({
+  count = 6,
+  palette,
+  delay = 0,
+  duration = 300,
+  easing = 'ease-out',
+}: StackingCardsProps) {
+  const cards = makeMotionCards(count).map((card) => ({
+    ...card,
+    gradient: cardBackground(palette, card.gradient),
+  }))
+  const flat = palette?.mode === 'solid'
+  const section = useRef<HTMLDivElement>(null)
+  const [progress, setProgress] = useState(0)
+  const reduced = useReducedMotion()
+
+  useEffect(() => {
+    if (reduced) return
+
+    let frame = 0
+    const update = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const element = section.current
+        if (!element) return
+        const total = element.offsetHeight - window.innerHeight + 57
+        const top = element.getBoundingClientRect().top - 57
+        setProgress(total > 0 ? Math.min(1, Math.max(0, -top / total)) : 0)
+      })
+    }
+
+    update()
+    window.addEventListener('scroll', update, { passive: true })
+    window.addEventListener('resize', update)
+    return () => {
+      window.removeEventListener('scroll', update)
+      window.removeEventListener('resize', update)
+      cancelAnimationFrame(frame)
+    }
+  }, [count, reduced])
+
+  if (reduced) return <StaticStack cards={cards} flat={flat} />
+
+  const active = Math.min(cards.length - 1, Math.floor(progress * cards.length))
+  const tint = `color-mix(in oklab, var(--primary) ${Math.round(progress * 100)}%, var(--muted-foreground))`
+
+  return (
+    <>
+      <div ref={section} className="relative hidden md:block">
+        <div
+          className="sticky top-[57px] z-40 flex items-center justify-between gap-3 border-b bg-background/90 px-4 py-2.5 backdrop-blur-sm transition-colors"
+          style={{
+            color: tint,
+            transitionDelay: `${delay}ms`,
+            transitionDuration: `${duration}ms`,
+            transitionTimingFunction: easing,
+          }}
+        >
+          <span className="inline-flex items-center gap-2 font-mono text-[10px] font-semibold uppercase tracking-[0.2em]">
+            <ArrowDown className="size-3" />
+            Scroll pour empiler
+          </span>
+          <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.2em]">
+            {Math.round(progress * 100)}% · {String(active + 1).padStart(2, '0')} /{' '}
+            {String(cards.length).padStart(2, '0')}
+          </span>
+        </div>
+
+        <div className="relative px-3 pt-5 after:block after:h-[60vh] after:content-[''] sm:px-5">
+          {cards.map((card, index) => (
+            <article
+              key={card.id}
+              aria-current={index === active ? 'step' : undefined}
+              className={cn(
+                'sticky mx-auto mb-[12vh] flex h-[min(64vh,520px)] w-full max-w-3xl flex-col justify-between overflow-hidden rounded-sm border p-5 shadow-2xl transition-[border-color] last:mb-0 sm:p-7',
+                index === active ? 'border-primary/50' : 'border-border',
+              )}
+              data-motion-card
+              style={{
+                top: `calc(57px + 44px + ${index * 18}px)`,
+                zIndex: index + 1,
+                background: card.gradient,
+                transitionDelay: `${delay}ms`,
+                transitionDuration: `${duration}ms`,
+                transitionTimingFunction: easing,
+              }}
+            >
+              <CardContent card={card} flat={flat} />
+            </article>
+          ))}
+        </div>
+      </div>
+
+      <div className="md:hidden">
+        <StaticStack cards={cards} />
+        <p className="mt-2 text-[10px] text-muted-foreground">
+          Mobile version: cards stay stacked vertically.
+        </p>
+      </div>
+    </>
+  )
+}