---

✨ Highlights

---

🖼️ Slide format

Every slide renders at 1080 × 1350 (4:5) — the Instagram/LinkedIn carousel sweet spot. Exports never lose quality: the on‑screen preview scales for your device, but PNG/PDF/MP4 are always rendered at full resolution (up to 4K).

---

🎬 The animation & video engine

The preview and the exported video are driven by one shared painter, so what you preview is exactly what you download.

MP4 path: WebCodecs VideoEncoder (H.264) + mp4-muxer encode frame‑by‑frame as fast as the machine allows, with a fastStart MP4 that plays instantly everywhere. On browsers without WebCodecs it falls back to a real‑time MediaRecorder capture.

---

📤 Export formats

Fonts are embedded once per session and images are awaited before capture, so exports are fast and never blank.

---

🧠 AI features (powered by Groq — free)

Slide drafting — give a topic, angle, and category; get a complete, on‑brand 8–10 slide post (cover → content → CTA) as validated structured JSON.

• ✨ Draft with AI on the post editor — drafts the current post.
• ✨ Draft all 5 posts on a day page — batch‑drafts the day.
• scripts/draft-all-posts.mjs — fills in all unwritten posts (resumable).
• Rotates across multiple Groq keys and fails over on rate limits.

Image prompts — copyable, theme‑ and palette‑aware prompts for generating matching imagery, available per slide, per post (“All slides”), and per day (all 5 posts).

Drafting is optional — without a key the buttons show a friendly message and the rest of the app works fully.

---

🚀 Getting started

# 1. install
npm install

# 2. (optional) enable AI drafting — create .env.local
echo "GROQ_API_KEYS=gsk_yourkey1,gsk_yourkey2" > .env.local

# 3. run
npm run dev          # http://localhost:3000

Then open a day → a post → tweak theme / palette / effect → Download. Hit ✎ Edit content to rewrite slides, upload images, or ✨ Draft with AI.

Environment variables

---

☁️ Deploy to Vercel

1. Push to GitHub and import the repo in Vercel (framework auto‑detected as Next.js).
2. Add GROQ_API_KEYS under Settings → Environment Variables (for AI drafting in production).
3. Deploy.

Note: next.config.js stubs jspdf's optional deps (html2canvas, dompurify, canvg) in webpack — they're only needed for jsPDF's HTML/SVG rendering, which this app doesn't use. This keeps the build green even with Vercel's npm install --omit=optional.

---

🗂️ Project structure

app/
  page.tsx                     Home — 100-day grid, search, status filters
  day/[day]/                   All 5 posts for a day + bulk export + AI prompts
  post/[day]/[postIdx]/        Single post: theme/palette, exports, video preview, prompts
  author/[day]/[postIdx]/      Editor: slides, images, AI drafting
  api/
    save-content/              Persist authored slides → sample-content.ts (dev)
    draft-slides/              Groq slide drafting (single + batch)
    curriculum/                Lists all 500 posts (for the batch script)
components/
  CarouselPreview.tsx          Live preview + off-screen full-size capture nodes
  VideoPreview.tsx             Looping canvas preview of the selected effect
  BulkRenderer.tsx             Off-screen renderer for bulk export
  themes/                      26 theme components + dispatcher, ImageSlide, stickers
  diagrams/                    13 diagram types (flow, pipeline, network, tree…)
lib/
  types.ts                     Core data model (themes, palettes, slides)
  curriculum.ts                The 100-day plan
  content.ts / sample-content  Template + authored slide content
  palettes.ts                  26 theme metas + 132 palettes
  download.ts                  PNG/PDF/MP4/GIF export + the shared video painter
  draftSlides.ts               Groq drafting (key rotation, JSON output)
  imagePrompt.ts               Theme/palette-aware AI image prompts
  post-content.ts              localStorage slide overrides
  image-upload.ts / useResponsive.ts
scripts/
  draft-all-posts.mjs          Batch-draft every post via the API

---

🛠️ Tech stack

Next.js 14 (App Router) · TypeScript · Tailwind CSS · Framer Motion (preview motion) · html‑to‑image · jsPDF · JSZip · gifenc · mp4‑muxer + WebCodecs · PrismJS (code highlighting) · Groq (free LLM API).

---

📜 Scripts

---