uifolio 0.6.0 → 0.7.0

package/README.md

@@ -14,6 +14,7 @@ and the alias is rewritten automatically.
 # from any project, through the npm package
 npx uifolio@latest add calendar --color "#10B981" --radius 6
 pnpm dlx uifolio@latest add video-player otp
+pnpm dlx uifolio@latest add horizontal-accordion storytelling
 
 # from the root of the project that contains UIfolio
 npm run uifolio -- list
@@ -31,11 +32,12 @@ node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run   # simulate
 | `uifolio init` | writes `uifolio.json` (dir, lib, alias) in the target project |
 | `uifolio add <names...>` | copies the component **+ transitive dependencies** (helpers `@/lib/*`) |
 
-Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
+Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--animations <path>` (default `src/components/animations`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
 
-`add` does not stop at the copy. The components always land in
-`src/components/ui` (override with `--dir`) and the page imports them through
-the `@/` alias. Without `--page`, the CLI asks where to use them:
+`add` does not stop at the copy. The components land in
+`src/components/ui` (override with `--dir`), the animations in
+`src/components/animations` (override with `--animations`), and the page imports
+them through the `@/` alias. Without `--page`, the CLI asks where to use them:
 
 1. *Do you already have a file ready to receive the component (…component…) (y/N) ?* `yes` → *In which file should the component (…component…) be copied (e.g. src/pages/calendar.tsx) ?*: the import and a ready-to-render example are added without duplication, and the file is created when missing;
 2. `no` → *Would you like to create a new folder and an import file (Y/n) ?* `yes` → *Please specify the new path (e.g. src/pages/calendar.tsx) ?*: the folder and the file are created; `no` → install only, no file is touched.
@@ -114,6 +116,14 @@ only marks the installation as complete when that is relevant.
 | OtpInput | `src/components/ui/otp-input.tsx` | 4 fields, paste, rotate + success check |
 | ColorPicker | `src/components/ui/color-picker.tsx` | advanced panel, saturation/lightness, hue, alpha, eyedropper, RGB channels, presets, HEX/RGB/HSL/RGBA |
 | Table | `src/components/ui/table.tsx` | shadcn-style typed table, uniform `px-4` cells and a wider gap before Actions, select-all checkbox, row actions |
+| HorizontalAccordion | `src/components/animations/horizontal-accordion.tsx` | theme-colored panels, hover, click, arrow/Home/End keyboard |
+| Storytelling | `src/components/animations/horizontal-story.tsx` | vertical scroll driven horizontal story, palettes, mobile touch fallback |
+| StackingCards | `src/components/animations/stacking-cards.tsx` | cards settle on scroll, customizable gradients or solid color |
+| ScrollText | `src/components/animations/scroll-text.tsx` | letters light up with their viewport position, reversible |
+| ImageCrossfade | `src/components/animations/image-crossfade.tsx` | pinned crossfading images, captions, dots and customizable overlay |
+
+The animation helpers (`data.ts`, `palette.ts`, `animation-settings-*`, `palette-*`)
+are copied automatically when the installed animation needs them.
 
 Copyable helpers (the CLI follows them automatically): `src/lib/utils.ts`,
 `src/lib/video.ts`, `src/lib/vtt.ts`, `src/lib/date.ts`, `src/lib/uploader.ts`, `src/lib/color.ts`,

package/cli/uifolio.mjs

@@ -13,6 +13,7 @@
  * Options:
  *   --cwd <dir>          target project (default: current directory)
  *   --dir <path>         components folder (default: src/components/ui)
+ *   --animations <path>  animations folder (default: src/components/animations)
  *   --lib <path>         helpers folder (default: src/lib)
  *   --alias <alias>      target import alias (default: @)
  *   --color <hex>        primary color, written in the Tailwind tokens (@theme)
@@ -33,19 +34,30 @@
 
 import { execFileSync } from 'node:child_process'
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
-import { basename, dirname, join, relative, resolve } from 'node:path'
+import { basename, dirname, join, relative, resolve, sep } from 'node:path'
 import { createInterface } from 'node:readline/promises'
 import { fileURLToPath } from 'node:url'
 
 const HERE = dirname(fileURLToPath(import.meta.url))
 const REGISTRY_SRC = resolve(HERE, '..', 'src')
 const REGISTRY_UI = join(REGISTRY_SRC, 'components', 'ui')
+const REGISTRY_ANIMATIONS = join(REGISTRY_SRC, 'components', 'animations')
 const CONFIG_NAME = 'uifolio.json'
 
+/** Stand-alone animations (the providers/contexts are helpers, not entries). */
+const ANIMATION_NAMES = [
+  'horizontal-accordion',
+  'horizontal-story',
+  'image-crossfade',
+  'scroll-text',
+  'stacking-cards',
+]
+
 const LIB_DEPS = ['clsx', 'tailwind-merge'] // cn() — always copied with the helpers
 
 const DEFAULT_ACCENT = '#10b981'
 const DEFAULT_COMPONENTS_DIR = 'src/components/ui'
+const DEFAULT_ANIMATIONS_DIR = 'src/components/animations'
 const THEME_FILE = 'uifolio-theme.css'
 
 /** Global CSS candidates for wiring the Tailwind theme. */
@@ -146,7 +158,7 @@ function writeFailure(error, target) {
   fail(`Cannot write ${target}: ${reasons[error?.code] ?? error?.message ?? error}.`)
 }
 
-function listComponents() {
+function listUiComponents() {
   if (!existsSync(REGISTRY_UI)) return []
   return readdirSync(REGISTRY_UI)
     .filter((name) => name.endsWith('.tsx'))
@@ -154,6 +166,24 @@ function listComponents() {
     .sort()
 }
 
+function listAnimationComponents() {
+  if (!existsSync(REGISTRY_ANIMATIONS)) return []
+  return ANIMATION_NAMES.filter((name) => existsSync(join(REGISTRY_ANIMATIONS, `${name}.tsx`)))
+}
+
+function listComponents() {
+  return [...listUiComponents(), ...listAnimationComponents()].sort()
+}
+
+/** Absolute entry + destination kind of a registry name. */
+function registryEntry(name) {
+  const ui = join(REGISTRY_UI, `${name}.tsx`)
+  if (existsSync(ui)) return { path: ui, kind: 'ui' }
+  const animation = join(REGISTRY_ANIMATIONS, `${name}.tsx`)
+  if (existsSync(animation)) return { path: animation, kind: 'animations' }
+  return null
+}
+
 function readConfig(cwd) {
   const file = join(cwd, CONFIG_NAME)
   if (!existsSync(file)) return null
@@ -164,14 +194,19 @@ function readConfig(cwd) {
   }
 }
 
-/** Extrait les imports locaux (alias) d'un fichier source. */
+/** Local imports (alias or relative) of a source file. */
 function localImports(source) {
   const specifiers = new Set()
   const importRe = /(?:from\s+|import\s*\(\s*|import\s+)['"]([^'"]+)['"]/g
   let match
   while ((match = importRe.exec(source)) !== null) {
     const specifier = match[1]
-    if (specifier.startsWith('@/') || specifier.startsWith('~/')) {
+    if (
+      specifier.startsWith('@/') ||
+      specifier.startsWith('~/') ||
+      specifier.startsWith('./') ||
+      specifier.startsWith('../')
+    ) {
       specifiers.add(specifier)
     }
   }
@@ -305,12 +340,14 @@ function collectFiles(entryPath, srcRoot) {
 
     const source = readFileSync(current, 'utf8')
     for (const specifier of localImports(source)) {
-      const base = specifier.replace(/^[@~]\//, '')
+      const base = specifier.startsWith('.')
+        ? resolve(dirname(current), specifier)
+        : join(srcRoot, specifier.replace(/^[@~]\//, ''))
       const candidates = [
-        join(srcRoot, `${base}.ts`),
-        join(srcRoot, `${base}.tsx`),
-        join(srcRoot, base, 'index.ts'),
-        join(srcRoot, base, 'index.tsx'),
+        `${base}.ts`,
+        `${base}.tsx`,
+        join(base, 'index.ts'),
+        join(base, 'index.tsx'),
       ]
       const found = candidates.find((candidate) => existsSync(candidate))
       if (found) queue.push(found)
@@ -877,6 +914,40 @@ const USAGE_EXAMPLES = {
       <p className="text-sm">Fade in on mount.</p>
     </FadeIn>
   )
+`,
+  },
+  'horizontal-accordion': {
+    body: `  return <HorizontalAccordion count={6} />
+`,
+  },
+  'horizontal-story': {
+    body: `  return (
+    <HorizontalStory
+      count={6}
+      palette={{ mode: 'gradient', from: '#0EA5E9', to: '#8B5CF6' }}
+    />
+  )
+`,
+  },
+  'stacking-cards': {
+    body: `  return (
+    <StackingCards count={6} palette={{ mode: 'solid', color: '#10B981' }} />
+  )
+`,
+  },
+  'scroll-text': {
+    body: `  return (
+    <ScrollText
+      prefix="C"
+      text="Colors light up letter by letter as you scroll."
+    />
+  )
+`,
+  },
+  'image-crossfade': {
+    body: `  return (
+    <ImageCrossfade overlay="linear-gradient(to top, rgba(0,0,0,0.7), transparent)" />
+  )
 `,
   },
   table: {
@@ -1036,14 +1107,14 @@ function addJsxUsage(source, exportNames) {
  * Writes (or completes) the chosen file: `@/` imports from the real folder of
  * the components, a working example (`<CalendarExample />`) and its definition.
  */
-function writeUsage({ cwd, target, componentsDir, components, alias, dryRun }) {
+function writeUsage({ cwd, target, components, alias, dryRun }) {
   if (existsSync(target) && statSync(target).isDirectory()) {
     fail(`${relative(cwd, target)} is a folder: give a file (e.g. src/pages/${components[0].name}.tsx).`)
   }
   const created = !existsSync(target)
   const entries = components.map((component) => ({
     exportName: component.exportName,
-    specifier: aliasImport(cwd, componentsDir, component.name, alias),
+    specifier: aliasImport(cwd, component.dir, component.name, alias),
     example: exampleFor(component),
   }))
   const label = relative(cwd, target)
@@ -1122,15 +1193,26 @@ const ALIASES = {
   shortcuts: 'command-menu',
   upload: 'file-upload',
   video: 'video-player',
+  storytelling: 'horizontal-story',
+  stacking: 'stacking-cards',
 }
 
 function commandList() {
-  const components = listComponents()
-  if (components.length === 0) fail('No component found in the registry.')
+  const components = listUiComponents()
+  const animations = listAnimationComponents()
+  if (components.length === 0 && animations.length === 0) {
+    fail('No component found in the registry.')
+  }
   console.log('\nAvailable components:\n')
   for (const name of components) {
     console.log(`  \x1b[36m${name.padEnd(20)}\x1b[0m src/components/ui/${name}.tsx`)
   }
+  if (animations.length > 0) {
+    console.log('\nAvailable animations:\n')
+    for (const name of animations) {
+      console.log(`  \x1b[36m${name.padEnd(20)}\x1b[0m src/components/animations/${name}.tsx`)
+    }
+  }
   console.log('\nUsage: uifolio add <name> [--cwd <target project>]\n')
 }
 
@@ -1142,12 +1224,14 @@ function commandInit({ flags }) {
   const config = {
     $schema: 'https://uifolio.dev/schema.json',
     dir: typeof flags.dir === 'string' ? flags.dir : DEFAULT_COMPONENTS_DIR,
+    animations:
+      typeof flags.animations === 'string' ? flags.animations : DEFAULT_ANIMATIONS_DIR,
     lib: typeof flags.lib === 'string' ? flags.lib : 'src/lib',
     alias: typeof flags.alias === 'string' ? flags.alias : '@',
   }
   writeFileSync(file, `${JSON.stringify(config, null, 2)}\n`, 'utf8')
   ok(`${CONFIG_NAME} written to ${cwd}`)
-  info(`dir: ${config.dir} · lib: ${config.lib} · alias: ${config.alias}`)
+  info(`dir: ${config.dir} · animations: ${config.animations} · lib: ${config.lib} · alias: ${config.alias}`)
   info('Next: uifolio add video-player calendar …')
 }
 
@@ -1227,13 +1311,21 @@ async function commandAdd({ positional, flags }) {
 
   const prompter = createPrompter(flags)
   try {
-    // 1. Dossier d'import des composants : toujours src/components/ui.
+    // 1. Dossiers d'import : composants, animations et helpers.
     const componentsDir = normalizeComponentsDir(
       typeof flags.dir === 'string' ? flags.dir : config.dir ?? DEFAULT_COMPONENTS_DIR,
     )
     if (looksLikeFile(componentsDir)) {
       fail(`"${componentsDir}" is a file: give a folder (e.g. ${DEFAULT_COMPONENTS_DIR}).`)
     }
+    const animationsDir = normalizeComponentsDir(
+      typeof flags.animations === 'string'
+        ? flags.animations
+        : config.animations ?? DEFAULT_ANIMATIONS_DIR,
+    )
+    if (looksLikeFile(animationsDir)) {
+      fail(`"${animationsDir}" is a file: give a folder (e.g. ${DEFAULT_ANIMATIONS_DIR}).`)
+    }
 
     // 2. Copie des fichiers + helpers.
     const deps = new Set(LIB_DEPS)
@@ -1243,14 +1335,26 @@ async function commandAdd({ positional, flags }) {
     const components = []
 
     for (const name of names) {
-      const entry = join(REGISTRY_UI, `${name}.tsx`)
-      const files = collectFiles(entry, REGISTRY_SRC)
-      components.push({ name, exportName: componentExportName(readFileSync(entry, 'utf8'), name) })
+      const entry = registryEntry(name)
+      const files = collectFiles(entry.path, REGISTRY_SRC)
+      const dir = entry.kind === 'animations' ? animationsDir : componentsDir
+      components.push({
+        name,
+        exportName: componentExportName(readFileSync(entry.path, 'utf8'), name),
+        dir,
+      })
 
       for (const [absolute, relativePath] of files) {
-        const isUi = relativePath.startsWith(join('components', 'ui'))
-        const destinationRoot = isUi ? resolve(cwd, componentsDir) : resolve(cwd, libDir)
-        const destination = join(destinationRoot, relativePath.replace(/^(components\/ui|lib)\//, ''))
+        const segments = relativePath.split(sep)
+        const kind = segments[0] === 'components' ? segments[1] : segments[0]
+        const destinationRoot =
+          kind === 'ui'
+            ? resolve(cwd, componentsDir)
+            : kind === 'animations'
+              ? resolve(cwd, animationsDir)
+              : resolve(cwd, libDir)
+        const inner = kind === 'lib' ? relativePath.slice('lib'.length + 1) : segments.slice(2).join(sep)
+        const destination = join(destinationRoot, inner)
         if (destinations.has(destination)) continue
         destinations.add(destination)
 
@@ -1301,7 +1405,6 @@ async function commandAdd({ positional, flags }) {
       writeUsage({
         cwd,
         target: pageTarget,
-        componentsDir,
         components,
         alias: targetAlias,
         dryRun,
@@ -1336,6 +1439,7 @@ function usage() {
 Options:
   --cwd <dir>       target project (default: current directory)
   --dir <path>      components folder (default: src/components/ui)
+  --animations <path>  animations folder (default: src/components/animations)
   --lib <path>      helpers folder (default: src/lib)
   --alias <alias>   target import alias (default: @)
   --color <hex>     primary color, written in the Tailwind tokens (@theme)
@@ -1348,9 +1452,11 @@ Options:
 
 Without --page, the CLI asks whether a file is already ready to receive the
 components: they are added to that file, to a new folder + file, or installed
-only. Files go to src/components/ui (override with --dir) and the page imports
-them through the alias (@/components/ui/...). The page also gets a working
-example, with the data and props each component needs, so it shows immediately.
+only. Components go to src/components/ui (override with --dir), animations to
+src/components/animations (override with --animations), and the page imports
+them through the alias (@/components/ui/..., @/components/animations/...). The
+page also gets a working example, with the data and props each component needs,
+so it shows immediately.
 Colors go through a Tailwind CSS 4 theme (uifolio-theme.css, @theme), so classes
 like bg-primary and text-muted-foreground stay in the code. When Tailwind is
 missing, "add" installs it (with your lockfile's package manager), creates the
@@ -1361,6 +1467,7 @@ installed too, as runtime dependencies, when the manifest lacks them.
 
 Examples:
   node cli/uifolio.mjs add video-player calendar otp --cwd ../my-project
+  node cli/uifolio.mjs add horizontal-accordion storytelling --cwd ../my-project
   node cli/uifolio.mjs add otp --color "#10B981" --radius 8
   node cli/uifolio.mjs add calendar --page src/pages/calendar.tsx
 `)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifolio",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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'),
+  }))
+}