uifolio 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifolio",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "CLI that copies React components (calendar, video/audio players, OTP, editor, upload) and their helpers into your project, with Tailwind CSS 4 tokens.",
   "type": "module",
   "license": "MIT",
@@ -55,6 +55,7 @@
     "cli",
     "src/components/ui",
     "!src/components/ui/stories-tokens.ts",
+    "src/components/animations",
     "src/lib/color.ts",
     "src/lib/date.ts",
     "src/lib/uploader.ts",

package/src/components/animations/animation-settings-context.ts

@@ -0,0 +1,71 @@
+import { createContext, useContext } from 'react'
+
+export interface AnimationSettings {
+  delay: number
+  duration: number
+  easing: string
+}
+
+export interface AnimationSettingsContextValue extends AnimationSettings {
+  setDelay: (value: number) => void
+  setDuration: (value: number) => void
+  setEasing: (value: string) => void
+  reset: () => void
+  isCustomized: boolean
+}
+
+export const EASING_OPTIONS = [
+  { value: 'ease-out', label: 'Soft' },
+  { value: 'ease-in-out', label: 'Smooth' },
+  { value: 'cubic-bezier(0.65, 0, 0.35, 1)', label: 'Spring' },
+  { value: 'cubic-bezier(0.34, 1.56, 0.64, 1)', label: 'Bounce' },
+  { value: 'linear', label: 'Linear' },
+] as const
+
+const fallback: AnimationSettings = {
+  delay: 0,
+  duration: 500,
+  easing: 'ease-out',
+}
+
+const animationDefaults: Record<string, AnimationSettings> = {
+  'horizontal-accordion': {
+    delay: 0,
+    duration: 500,
+    easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+  },
+  storytelling: {
+    delay: 0,
+    duration: 500,
+    easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+  },
+  stacking: {
+    delay: 0,
+    duration: 300,
+    easing: 'ease-out',
+  },
+  'scroll-text': {
+    delay: 0,
+    duration: 300,
+    easing: 'ease-out',
+  },
+  'image-crossfade': {
+    delay: 0,
+    duration: 500,
+    easing: 'ease-out',
+  },
+}
+
+export function defaultAnimationSettings(slug?: string): AnimationSettings {
+  return (slug && animationDefaults[slug]) || fallback
+}
+
+export const AnimationSettingsContext = createContext<AnimationSettingsContextValue | null>(null)
+
+export function useAnimationSettings() {
+  const context = useContext(AnimationSettingsContext)
+  if (!context) {
+    throw new Error('useAnimationSettings must be used within AnimationSettingsProvider')
+  }
+  return context
+}

package/src/components/animations/animation-settings-provider.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import {
+  AnimationSettingsContext,
+  defaultAnimationSettings,
+  type AnimationSettings,
+} from './animation-settings-context'
+
+export function AnimationSettingsProvider({
+  current,
+  children,
+}: {
+  current?: string
+  children: ReactNode
+}) {
+  const key = current ?? '__default'
+  const [settingsBySlug, setSettingsBySlug] = useState<Record<string, AnimationSettings>>({})
+
+  const settings = settingsBySlug[key] ?? defaultAnimationSettings(current)
+
+  const update = useCallback(
+    (patch: Partial<AnimationSettings>) => {
+      setSettingsBySlug((previous) => ({
+        ...previous,
+        [key]: {
+          ...(previous[key] ?? defaultAnimationSettings(current)),
+          ...patch,
+        },
+      }))
+    },
+    [current, key],
+  )
+
+  const setDelay = useCallback(
+    (delay: number) => update({ delay: Math.max(0, Math.min(2000, delay)) }),
+    [update],
+  )
+  const setDuration = useCallback(
+    (duration: number) => update({ duration: Math.max(100, Math.min(3000, duration)) }),
+    [update],
+  )
+  const setEasing = useCallback((easing: string) => update({ easing }), [update])
+
+  const reset = useCallback(() => {
+    setSettingsBySlug((previous) => {
+      const next = { ...previous }
+      delete next[key]
+      return next
+    })
+  }, [key])
+
+  const value = useMemo(
+    () => ({
+      ...settings,
+      setDelay,
+      setDuration,
+      setEasing,
+      reset,
+      isCustomized: Boolean(settingsBySlug[key]),
+    }),
+    [reset, setDelay, setDuration, setEasing, settings, settingsBySlug, key],
+  )
+
+  return (
+    <AnimationSettingsContext.Provider value={value}>
+      {children}
+    </AnimationSettingsContext.Provider>
+  )
+}

package/src/components/animations/data.ts

@@ -0,0 +1,68 @@
+export interface MotionCardData {
+  id: string
+  number: string
+  title: string
+  kicker: string
+  description: string
+  gradient: string
+}
+
+const seeds: Omit<MotionCardData, 'id' | 'number'>[] = [
+  {
+    title: 'Explore',
+    kicker: 'Field',
+    description: 'Spot the signals, collect the material and open up the range of possibilities.',
+    gradient: 'linear-gradient(135deg, color-mix(in oklab, var(--primary) 22%, #000) 0%, var(--primary) 58%, color-mix(in oklab, var(--primary) 55%, #fff) 100%)',
+  },
+  {
+    title: 'Compose',
+    kicker: 'Workshop',
+    description: 'Assemble the pieces, test rhythms and let the structure breathe.',
+    gradient: 'linear-gradient(145deg, color-mix(in oklab, var(--primary) 38%, #000) 0%, color-mix(in oklab, var(--primary) 85%, #000) 52%, color-mix(in oklab, var(--primary) 62%, #fff) 100%)',
+  },
+  {
+    title: 'Publish',
+    kicker: 'Release',
+    description: 'Shape it, tell it and share a clear version to read and to live with.',
+    gradient: 'linear-gradient(125deg, color-mix(in oklab, var(--primary) 15%, #000) 0%, color-mix(in oklab, var(--primary) 70%, #000) 55%, color-mix(in oklab, var(--primary) 35%, #fff) 100%)',
+  },
+  {
+    title: 'Measure',
+    kicker: 'Reading',
+    description: 'Watch the usage, compare the signals and keep what truly makes sense.',
+    gradient: 'linear-gradient(155deg, color-mix(in oklab, var(--primary) 30%, #000) 0%, var(--primary) 60%, color-mix(in oklab, var(--primary) 75%, #fff) 100%)',
+  },
+  {
+    title: 'Iterate',
+    kicker: 'Loop',
+    description: 'Fix, refine, start again: every pass tightens the gesture and the message.',
+    gradient: 'linear-gradient(120deg, color-mix(in oklab, var(--primary) 12%, #000) 0%, color-mix(in oklab, var(--primary) 60%, #000) 50%, color-mix(in oklab, var(--primary) 25%, #fff) 100%)',
+  },
+  {
+    title: 'Spread',
+    kicker: 'Network',
+    description: 'Let the material circulate, build bridges and let the project spread.',
+    gradient: 'linear-gradient(135deg, color-mix(in oklab, var(--primary) 25%, #000) 0%, color-mix(in oklab, var(--primary) 90%, #000) 55%, color-mix(in oklab, var(--primary) 50%, #fff) 100%)',
+  },
+  {
+    title: 'Archive',
+    kicker: 'Memory',
+    description: 'Keep the traces, document the choices and make the work pass on.',
+    gradient: 'linear-gradient(150deg, color-mix(in oklab, var(--primary) 45%, #000) 0%, color-mix(in oklab, var(--primary) 75%, #000) 50%, color-mix(in oklab, var(--primary) 40%, #fff) 100%)',
+  },
+  {
+    title: 'Start over',
+    kicker: 'Cycle',
+    description: 'Set off again with what you learned, without losing the momentum or the precision of the first gesture.',
+    gradient: 'linear-gradient(130deg, color-mix(in oklab, var(--primary) 18%, #000) 0%, var(--primary) 55%, color-mix(in oklab, var(--primary) 70%, #fff) 100%)',
+  },
+]
+
+export function makeMotionCards(count: number): MotionCardData[] {
+  const total = Math.max(1, Math.min(count, seeds.length))
+  return seeds.slice(0, total).map((seed, index) => ({
+    ...seed,
+    id: `${index}-${seed.title.toLowerCase()}`,
+    number: String(index + 1).padStart(2, '0'),
+  }))
+}

package/src/components/animations/horizontal-accordion.tsx

@@ -0,0 +1,142 @@
+import { useRef, useState } from 'react'
+import type { KeyboardEvent } from 'react'
+import { ArrowRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { makeMotionCards } from './data'
+
+export interface HorizontalAccordionProps {
+  count?: number
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function HorizontalAccordion({
+  count = 6,
+  delay = 0,
+  duration = 500,
+  easing = 'cubic-bezier(0.65, 0, 0.35, 1)',
+}: HorizontalAccordionProps) {
+  const cards = makeMotionCards(count)
+  const [active, setActive] = useState(0)
+  const current = Math.min(active, cards.length - 1)
+  const compact = count > 5
+  const buttons = useRef<Array<HTMLButtonElement | null>>([])
+
+  const go = (index: number) => {
+    const next = (index + cards.length) % cards.length
+    setActive(next)
+    buttons.current[next]?.focus()
+  }
+
+  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      go(index + 1)
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      go(index - 1)
+    }
+    if (event.key === 'Home') {
+      event.preventDefault()
+      go(0)
+    }
+    if (event.key === 'End') {
+      event.preventDefault()
+      go(cards.length - 1)
+    }
+  }
+
+  return (
+    <div className="flex h-[400px] gap-1.5 overflow-hidden rounded-sm border bg-card/60 p-1.5 sm:h-[460px] sm:gap-2 sm:p-2">
+      {cards.map((card, index) => {
+        const isActive = index === current
+        return (
+          <button
+            key={card.id}
+            ref={(element) => {
+              buttons.current[index] = element
+            }}
+            type="button"
+            onClick={() => setActive(index)}
+            onPointerEnter={(event) => {
+              if (event.pointerType === 'mouse') setActive(index)
+            }}
+            onFocus={() => setActive(index)}
+            onKeyDown={(event) => handleKeyDown(index, event)}
+            aria-pressed={isActive}
+            aria-label={card.title}
+            tabIndex={isActive ? 0 : -1}
+            style={{
+              transitionDelay: `${delay}ms`,
+              transitionDuration: `${duration}ms`,
+              transitionTimingFunction: easing,
+            }}
+            className={cn(
+              'relative min-w-0 basis-0 overflow-hidden rounded-sm border text-left outline-none transition-[flex-grow,background-color,color] focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset',
+              isActive
+                ? compact
+                  ? 'grow-[4.2] border-primary/50 bg-primary text-primary-foreground shadow-lg max-sm:grow-[6.2]'
+                  : 'grow-[4.2] border-primary/50 bg-primary text-primary-foreground shadow-lg'
+                : compact
+                  ? 'grow-[0.7] border-border bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground max-sm:grow-[0.3]'
+                  : 'grow-[0.7] border-border bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground',
+            )}
+          >
+            <span
+              className={cn(
+                'absolute right-2 top-1 font-mono text-5xl font-black leading-none tracking-tighter transition-opacity sm:text-7xl',
+                isActive ? 'opacity-20' : 'opacity-10',
+                !isActive && compact && 'max-sm:hidden',
+              )}
+            >
+              {card.number}
+            </span>
+
+            <span
+              className={cn(
+                'absolute bottom-3 left-3 whitespace-nowrap text-[10px] font-semibold uppercase tracking-[0.2em] [writing-mode:vertical-rl] sm:bottom-4 sm:left-4',
+                isActive ? 'opacity-0' : 'opacity-100',
+                compact && 'max-sm:left-1/2 max-sm:-translate-x-1/2 max-sm:text-[8px] max-sm:tracking-[0.12em]',
+              )}
+            >
+              {card.title}
+            </span>
+
+            <span
+              className={cn(
+                'absolute inset-x-0 bottom-0 block p-4 transition-all sm:p-5',
+                isActive ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0',
+              )}
+              style={{
+                transitionDelay: `${delay}ms`,
+                transitionDuration: `${duration}ms`,
+                transitionTimingFunction: easing,
+              }}
+            >
+              <span className="block text-[9px] font-bold uppercase tracking-[0.22em] opacity-55">
+                Étape {card.number} · {card.kicker}
+              </span>
+              <span
+                className={cn(
+                  'display mt-2 block text-3xl leading-[0.95] sm:text-5xl',
+                  compact && 'max-sm:text-2xl',
+                )}
+              >
+                {card.title}
+              </span>
+              <span className="mt-3 block max-w-xs text-[11px] leading-relaxed opacity-65">
+                {card.description}
+              </span>
+              <span className="mt-4 inline-flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.16em]">
+                Continuer
+                <ArrowRight className="size-3.5" />
+              </span>
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/animations/horizontal-story.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useRef, useState } from 'react'
+import { ArrowDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { makeMotionCards } from './data'
+import { cardBackground, paletteAura, type CardPalette } from './palette'
+
+export interface HorizontalStoryProps {
+  count?: number
+  palette?: CardPalette
+  delay?: number
+  duration?: number
+  easing?: string
+}
+
+export function HorizontalStory({
+  count = 6,
+  palette,
+  delay = 0,
+  duration = 500,
+  easing = 'cubic-bezier(0.65, 0, 0.35, 1)',
+}: HorizontalStoryProps) {
+  const cards = makeMotionCards(count).map((card) => ({
+    ...card,
+    gradient: cardBackground(palette, card.gradient),
+  }))
+  const section = useRef<HTMLDivElement>(null)
+  const viewport = useRef<HTMLDivElement>(null)
+  const track = useRef<HTMLDivElement>(null)
+  const flat = palette?.mode === 'solid'
+  const [progress, setProgress] = useState(0)
+  const [distance, setDistance] = useState(0)
+
+  useEffect(() => {
+    const measure = () => {
+      const trackElement = track.current
+      const viewportElement = viewport.current
+      if (!trackElement || !viewportElement) return
+      setDistance(Math.max(0, trackElement.scrollWidth - viewportElement.clientWidth))
+    }
+
+    measure()
+    const observer = new ResizeObserver(measure)
+    if (track.current) observer.observe(track.current)
+    if (viewport.current) observer.observe(viewport.current)
+    window.addEventListener('resize', measure)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', measure)
+    }
+  }, [count])
+
+  useEffect(() => {
+    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)
+    }
+  }, [])
+
+  const active = Math.min(cards.length - 1, Math.round(progress * (cards.length - 1)))
+
+  return (
+    <>
+      <div
+        ref={section}
+        className="relative hidden md:block"
+        style={{ height: `calc(100dvh + ${(cards.length - 1) * 60}vh)` }}
+      >
+        <div className="sticky top-[57px] h-[calc(100dvh-57px)] overflow-hidden rounded-sm border bg-card/60">
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background: paletteAura(palette),
+            }}
+          />
+
+          <div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-5 py-4">
+            <span className="inline-flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.22em] text-muted-foreground">
+              <ArrowDown className="size-3" />
+              Scroll pour avancer
+            </span>
+            <span className="font-mono text-[9px] uppercase tracking-[0.22em] text-muted-foreground">
+              {String(active + 1).padStart(2, '0')} / {String(cards.length).padStart(2, '0')}
+            </span>
+          </div>
+
+          <div ref={viewport} className="flex h-full items-center overflow-hidden">
+            <div
+              ref={track}
+              className="flex w-max items-center gap-5 pl-[6vw] pr-[12vw] will-change-transform"
+              style={{ transform: `translate3d(-${progress * distance}px, 0, 0)` }}
+            >
+              {cards.map((card, index) => {
+                const isActive = index === active
+                return (
+                  <article
+                    key={card.id}
+                    aria-current={isActive ? 'step' : undefined}
+                    className={cn(
+                      'relative h-[min(62vh,500px)] w-[min(68vw,580px)] shrink-0 overflow-hidden rounded-sm border text-left transition-[opacity,border-color,transform]',
+                      isActive
+                        ? 'border-primary/50 opacity-100'
+                        : 'border-border opacity-45',
+                    )}
+                    data-motion-card
+                    style={{
+                      background: card.gradient,
+                      transitionDelay: `${delay}ms`,
+                      transitionDuration: `${duration}ms`,
+                      transitionTimingFunction: easing,
+                    }}
+                  >
+                    {!flat && (
+                      <>
+                        <span data-card-scrim className="absolute inset-0 bg-black/35" />
+                        <span data-card-scrim className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
+                      </>
+                    )}
+
+                    <span className="absolute right-5 top-3 font-mono text-7xl font-black leading-none tracking-tighter text-white/15">
+                      {card.number}
+                    </span>
+                    <span className="absolute left-5 top-5 text-[9px] font-semibold uppercase tracking-[0.22em] text-white/60">
+                      Chapitre {card.number} · {card.kicker}
+                    </span>
+
+                    <span className="absolute inset-x-0 bottom-0 block p-6">
+                      <span className="display block text-4xl leading-none text-white lg:text-5xl">
+                        {card.title}
+                      </span>
+                      <span className="mt-3 block max-w-md text-[12px] leading-relaxed text-white/70">
+                        {card.description}
+                      </span>
+                    </span>
+                  </article>
+                )
+              })}
+            </div>
+          </div>
+
+          <div className="absolute inset-x-0 bottom-0 z-20 px-5 py-4">
+            <div className="h-px overflow-hidden bg-border">
+              <div
+                className="h-full bg-primary transition-[width] duration-150"
+                style={{ width: `${Math.round(progress * 100)}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="md:hidden">
+        <div className="flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {cards.map((card) => (
+            <article
+              key={card.id}
+              className="relative h-[340px] w-[82%] shrink-0 snap-center overflow-hidden rounded-sm border border-border"
+              data-motion-card
+              style={{ background: card.gradient }}
+            >
+              {!flat && (
+                <>
+                  <span data-card-scrim className="absolute inset-0 bg-black/35" />
+                  <span data-card-scrim className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
+                </>
+              )}
+              <span className="absolute left-4 top-4 font-mono text-[10px] tracking-[0.2em] text-white/70">
+                {card.number}
+              </span>
+              <span className="absolute inset-x-0 bottom-0 block p-5">
+                <span className="block text-[9px] font-semibold uppercase tracking-[0.22em] text-white/60">
+                  {card.kicker}
+                </span>
+                <span className="display mt-1.5 block text-3xl leading-none text-white">
+                  {card.title}
+                </span>
+                <span className="mt-2 block text-[11px] leading-relaxed text-white/70">
+                  {card.description}
+                </span>
+              </span>
+            </article>
+          ))}
+        </div>
+        <p className="mt-1 text-[10px] text-muted-foreground">Glisse horizontalement.</p>
+      </div>
+    </>
+  )
+}