uifolio 0.6.0 → 0.7.0

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>
+    </>
+  )
+}