Scrolling Product Story Section

Copy the prompt on this page into Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. The generated `ProductStory` component maps a `chapters` array to full-bleed sections that fade and slide in using framer-motion's `whileInView` prop, so each chapter animates in only once the user scrolls it into view.

Yes. The section reads from a `chapters` array, add, remove, or reorder entries and the layout adjusts automatically. 3-4 chapters is the sweet spot for scroll pacing; more than 5 tends to feel long on mobile.

Yes. Every template, section, code file, and included image is free to use in your website, app, client project, SaaS product, or open-source build with no attribution required. There is no license fee, no royalty, and no copyright restriction. The code is yours to keep, modify, and ship commercially the moment you copy it.

A visual preview of the template, the full multi-file source code as a single copy-paste string with `// === filename ===` headers so Cursor and Claude Code can split it into the correct files automatically, and the prompt that regenerates the template in Claude Code, Cursor, Codex, Lovable, Replit, or Google Stitch. Every template ships with the shared design system used across the AI Library: white background, black on grey typography, brand blue reserved for primary CTAs, small type, minimal icons.

A component is a single UI unit (a chat interface, a bento grid, a scroll progress bar). A template is a full app made up of many components: routes, layout, navigation, data flow, and interactions wired together. The AI Library ships both. Templates live under /prompts/ai-library/templates. Components live under /prompts/ai-library/website-sections. Templates use components under the hood, and every template page cross-links to the AI Library components used inside its sections.

Yes. Every template can be copied, adapted, sold, and shipped in commercial projects with no attribution required. This applies to the full-app parent code and every child section. The AI prompts are also unrestricted. Use them for client work, indie SaaS, agency deliverables, internal tools, and open-source projects.

Every template is built on Next.js 14+ App Router + Tailwind CSS v3 + Switzer font, and written in TypeScript. Backend choices are yours: templates work with Supabase, Clerk, or Auth.js for authentication, and with Postgres, Convex, PlanetScale, or Neon for data. Templates deploy on Vercel, Cloudflare Pages, or Netlify. No motion library is required. No CSS files are used; all styling is Tailwind utility classes.

Open the template page, click Copy full code, and paste it directly into a Cursor or Claude Code chat. Cursor and Claude Code both detect the `// === filename ===` headers and split the paste into the correct files in your project. From there you can ask them to swap the auth provider, change the color palette, wire the data to your API, or generate the missing routes. The prompt tab gives you the exact starting instruction to hand off.

Yes. Auth is wrapped behind a `src/lib/auth.ts` helper so you can swap Supabase, Clerk, Auth.js, or your own SSO by changing one file. The same pattern applies to the database client: swap Supabase for Postgres, Convex, PlanetScale, or Neon without changing the UI. Every template ships a Supabase reference implementation by default because it is the most common choice for AI-native SaaS.

Yes to TypeScript across every file (typed props, typed data models, typed helpers). Dark mode is opt-in via Tailwind's `dark:` variant — the base color palette is defined for both light and dark and every section renders correctly in both. Every section is responsive from 375px up to desktop, with sensible breakpoints for tablet (sm: 640px, md: 768px, lg: 1024px).

Yes. Every child section is a standalone page and standalone code file. Copy the Users Table section from the SaaS Dashboard template into an Admin Panel template and it works with no modification, because they share the same design system, typography, spacing scale, and layout primitives. The prompt tab for each section is scoped to that section so an AI tool can build just what you need.

Three reasons. First, the prompt regenerates the template in your own codebase matched to your design tokens, brand color, file structure, and preferred auth or database — faster than editing someone else's code. Second, the prompt is a starting instruction you can extend ("build this dashboard but replace analytics with a Kanban board") instead of a fixed snapshot. Third, each prompt is written specifically for the tool it targets: Claude Code, Cursor, Codex, Lovable, Replit, or Google Stitch. The output is consistent because the design constraints are the same across all six versions.

All six prompts produce the same visual output. Cursor and Claude Code are best for dropping full multi-file code into an existing repo where you want the AI to manage imports, run type checks, and iterate. Lovable and Replit are best if you want a fresh working preview URL in seconds without setting up a local dev environment. Codex fits agent-driven workflows where you want the AI to work autonomously across multiple files. Google Stitch is best if you want to iterate on the design visually in Google Labs before dropping the generated React code into your project.

Yes. The design system is Tailwind-native: change the brand color in `tailwind.config.ts` and every primary CTA updates. Change the font in `next/font` and every heading and body copy updates. Change the border-radius in the shared component variants and every card, button, and modal updates. Because the templates lean minimal (white background, black text, blue only on CTAs) they adapt easily to any brand system without visual conflict.