# INSTALL.md — bootstrap a new project from /sd

## 1. Scaffold

```bash
npx create-next-app@latest my-deck --typescript --tailwind --app --eslint
cd my-deck
```

Decline the default Tailwind sample content.

## 2. Install runtime deps

```bash
npm i motion lenis clsx tailwind-merge
# optional
npm i gsap @gsap/react
```

## 3. Replace generated files with /sd files

| sd path | project path |
|---|---|
| `files/globals.css` | `app/globals.css` (replace fully) |
| `files/layout.tsx` | `app/layout.tsx` (replace fully) |
| `files/page.example.tsx` | `app/page.tsx` |
| `files/tsconfig.json` | `tsconfig.json` (merge or replace) |
| `files/postcss.config.mjs` | `postcss.config.mjs` |
| `files/next.config.ts` | `next.config.ts` |

## 4. Copy primitives

```
sd/components/utils.ts       → lib/utils.ts
sd/components/format.ts      → lib/format.ts
sd/components/*.tsx          → components/{matching folder}/
```

Folder layout in project (target):

```
components/
  deck/
    deck.tsx
    slide.tsx
  brand/
    eyebrow.tsx
    highlight.tsx
    kpi-figure.tsx
    logo-strip.tsx
    slide-chrome.tsx
  animations/
    reveal.tsx
    stagger-list.tsx
    mask-reveal.tsx
    animated-text.tsx
    counter.tsx
    letter-counter.tsx
    scroll-scene.tsx
  providers/
    smooth-scroll.tsx
  effects/
    intro-screen.tsx
    spotlight.tsx
    hero-canvas.tsx
  slides/
    {feature,paper,tone}-slide.tsx
    block-divider.tsx
    centered-thesis.tsx
    kpi-trio.tsx
    rule-card-y.tsx
    quote-divider.tsx
```

## 5. Copy logos

```
sd/logos/flat101.svg → public/logos/flat101.svg
sd/logos/indra.png   → public/logos/indra.png
```

If the project does not use Flat101/Indra co-branding, edit `components/brand/logo-strip.tsx` and remove the strip from the slide chrome or replace assets.

## 6. Verify

```bash
npm run typecheck
npm run dev
```

Open `http://localhost:3000`. You should see an intro screen for ~2.8 s, then a single slide rendered by `page.example.tsx`. Press ↓ / Space / PgDn to navigate when more slides are added.

## 7. Add slides

For each new slide:

1. Create a file under `components/slides/` (e.g. `s1-opening.tsx`).
2. Wrap content in `<Slide variant="..." number={N} total={T} align="center">`.
3. Wrap text/blocks in `<Reveal>` with staggered `delay` (0 → 0.15 → 0.3 → 0.45 …).
4. Register in `app/page.tsx`: add a `SlideMeta` entry **and** the component in the JSX.

## 8. Optional: remove what you do not need

- Drop `intro-screen.tsx` if no splash desired (remove `<IntroScreen />` from layout).
- Drop `hero-canvas.tsx` if no particle background.
- Drop `scroll-scene.tsx` + uninstall `gsap` if no scroll-triggered scenes.
- Drop `letter-counter.tsx` if no `NN`-style placeholders.

## 9. Deploy

Standard `vercel` CLI. No special config required. Framework auto-detected as Next.js.