@react-kino/cli 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bilal Tahir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var import_kleur2 = __toESM(require("kleur"));
+
+// src/prompts.ts
+var import_prompts = __toESM(require("prompts"));
+var TEMPLATE_CHOICES = [
+  { title: "Product Launch page", value: "product-launch" },
+  { title: "Case Study page", value: "case-study" },
+  { title: "Portfolio page", value: "portfolio" },
+  { title: "Blank scroll page", value: "blank" }
+];
+async function askInitQuestions() {
+  const answers = await (0, import_prompts.default)(
+    [
+      {
+        type: "select",
+        name: "template",
+        message: "What would you like to scaffold?",
+        choices: TEMPLATE_CHOICES
+      },
+      {
+        type: "text",
+        name: "projectName",
+        message: "Project name",
+        initial: "my-scroll-app",
+        validate: (value) => value.trim().length > 0 ? true : "Project name is required"
+      },
+      {
+        type: "confirm",
+        name: "createDir",
+        message: "Create a new directory for the project?",
+        initial: true
+      }
+    ],
+    {
+      onCancel: () => {
+        return false;
+      }
+    }
+  );
+  if (!answers.template || !answers.projectName) {
+    return null;
+  }
+  return answers;
+}
+
+// src/create.ts
+var import_path = __toESM(require("path"));
+var import_fs_extra = __toESM(require("fs-extra"));
+var import_kleur = __toESM(require("kleur"));
+async function createProject(template, projectName, createDir) {
+  const targetDir = createDir ? import_path.default.resolve(process.cwd(), projectName) : process.cwd();
+  if (createDir) {
+    if (await import_fs_extra.default.pathExists(targetDir)) {
+      const files2 = await import_fs_extra.default.readdir(targetDir);
+      if (files2.length > 0) {
+        console.log(
+          import_kleur.default.red(`
+  Directory "${projectName}" already exists and is not empty.
+`)
+        );
+        process.exit(1);
+      }
+    }
+    await import_fs_extra.default.ensureDir(targetDir);
+  }
+  const templatesRoot = import_path.default.resolve(__dirname, "..", "templates", template);
+  if (!await import_fs_extra.default.pathExists(templatesRoot)) {
+    console.log(
+      import_kleur.default.red(`
+  Template "${template}" not found at ${templatesRoot}
+`)
+    );
+    process.exit(1);
+  }
+  const files = await collectFiles(templatesRoot);
+  for (const file of files) {
+    const relativePath = import_path.default.relative(templatesRoot, file);
+    const destPath = import_path.default.join(targetDir, relativePath);
+    await import_fs_extra.default.ensureDir(import_path.default.dirname(destPath));
+    let content = await import_fs_extra.default.readFile(file, "utf-8");
+    content = content.replace(/__PROJECT_NAME__/g, projectName);
+    await import_fs_extra.default.writeFile(destPath, content, "utf-8");
+    console.log(import_kleur.default.green("  \u2713") + ` Created ${relativePath}`);
+  }
+  console.log(import_kleur.default.bold("\n  Done! Next steps:\n"));
+  if (createDir) {
+    console.log(`    cd ${projectName}`);
+  }
+  console.log("    npm install");
+  console.log("    npm run dev\n");
+}
+async function collectFiles(dir) {
+  const entries = await import_fs_extra.default.readdir(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const fullPath = import_path.default.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...await collectFiles(fullPath));
+    } else {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+// src/index.ts
+var BANNER = `
+  ${import_kleur2.default.magenta("\u2726")} ${import_kleur2.default.bold("react-kino")} ${import_kleur2.default.dim("\u2014 cinematic scroll experiences for React")}
+`;
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  if (!command || command === "init") {
+    console.log(BANNER);
+    const answers = await askInitQuestions();
+    if (!answers) {
+      console.log(import_kleur2.default.dim("\n  Cancelled.\n"));
+      process.exit(0);
+    }
+    await createProject(answers.template, answers.projectName, answers.createDir);
+  } else if (command === "--help" || command === "-h") {
+    printHelp();
+  } else if (command === "--version" || command === "-v") {
+    console.log("0.1.0");
+  } else {
+    console.log(import_kleur2.default.red(`
+  Unknown command: ${command}
+`));
+    printHelp();
+    process.exit(1);
+  }
+}
+function printHelp() {
+  console.log(BANNER);
+  console.log("  Usage:");
+  console.log("    npx @react-kino/cli init    Scaffold a new scroll page from a template");
+  console.log("    npx @react-kino/cli -h      Show this help message");
+  console.log("    npx @react-kino/cli -v      Show version\n");
+}
+main().catch((err) => {
+  console.error(import_kleur2.default.red("\n  Error:"), err.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-kino/cli",
+  "version": "0.1.0",
+  "description": "CLI for scaffolding react-kino scroll pages",
+  "bin": {
+    "kino": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "dependencies": {
+    "fs-extra": "^11",
+    "kleur": "^4",
+    "prompts": "^2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11",
+    "@types/prompts": "^2",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  }
+}

package/templates/blank/app.tsx

@@ -0,0 +1,26 @@
+import { Kino, Scene } from "react-kino";
+
+export default function __PROJECT_NAME__() {
+  return (
+    <Kino>
+      <Scene duration="200vh">
+        <div style={{ padding: "20vh 2rem", textAlign: "center" }}>
+          <h1 style={{ fontSize: "3rem", fontWeight: 700 }}>__PROJECT_NAME__</h1>
+          <p style={{ opacity: 0.6, marginTop: "1rem" }}>
+            Start building your scroll experience here.
+          </p>
+        </div>
+      </Scene>
+
+      <Scene duration="200vh">
+        <div style={{ padding: "10vh 2rem", maxWidth: 640, margin: "0 auto" }}>
+          <h2 style={{ fontSize: "2rem", marginBottom: "1rem" }}>Section Two</h2>
+          <p style={{ lineHeight: 1.8, opacity: 0.8 }}>
+            Add your content here. Each Scene pins its children while the user
+            scrolls through the specified duration.
+          </p>
+        </div>
+      </Scene>
+    </Kino>
+  );
+}

package/templates/blank/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Kino, Scene } from "react-kino";
+
+export default function __PROJECT_NAME__Page() {
+  return (
+    <Kino>
+      <Scene duration="200vh">
+        <div style={{ padding: "20vh 2rem", textAlign: "center" }}>
+          <h1 style={{ fontSize: "3rem", fontWeight: 700 }}>__PROJECT_NAME__</h1>
+          <p style={{ opacity: 0.6, marginTop: "1rem" }}>
+            Start building your scroll experience here.
+          </p>
+        </div>
+      </Scene>
+
+      <Scene duration="200vh">
+        <div style={{ padding: "10vh 2rem", maxWidth: 640, margin: "0 auto" }}>
+          <h2 style={{ fontSize: "2rem", marginBottom: "1rem" }}>Section Two</h2>
+          <p style={{ lineHeight: 1.8, opacity: 0.8 }}>
+            Add your content here. Each Scene pins its children while the user
+            scrolls through the specified duration.
+          </p>
+        </div>
+      </Scene>
+    </Kino>
+  );
+}

package/templates/case-study/app.tsx

@@ -0,0 +1,70 @@
+import { Kino, Scene, Reveal } from "react-kino";
+
+export default function __PROJECT_NAME__() {
+  return (
+    <Kino>
+      {/* Title card */}
+      <Scene duration="150vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ padding: "30vh 2rem", textAlign: "center" }}>
+            <p style={{ fontSize: "0.875rem", textTransform: "uppercase", letterSpacing: "0.1em", opacity: 0.5 }}>
+              Case Study
+            </p>
+            <h1 style={{ fontSize: "3.5rem", fontWeight: 700, marginTop: "1rem" }}>
+              __PROJECT_NAME__
+            </h1>
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* The Challenge */}
+      <Scene duration="200vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 720, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem" }}>The Challenge</h2>
+            <p style={{ fontSize: "1.125rem", lineHeight: 1.8, opacity: 0.8 }}>
+              Describe the problem your team set out to solve. What were the constraints?
+              What made this project unique?
+            </p>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* The Solution */}
+      <Scene duration="200vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 720, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem" }}>The Solution</h2>
+            <p style={{ fontSize: "1.125rem", lineHeight: 1.8, opacity: 0.8 }}>
+              Walk through your approach. Highlight key decisions, technologies used,
+              and creative breakthroughs.
+            </p>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* Results */}
+      <Scene duration="250vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 720, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "2rem" }}>Results</h2>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2rem", textAlign: "center" }}>
+              <Stat value="3x" label="Performance Gain" />
+              <Stat value="40%" label="Cost Reduction" />
+              <Stat value="99.9%" label="Uptime" />
+            </div>
+          </section>
+        </Reveal>
+      </Scene>
+    </Kino>
+  );
+}
+
+function Stat({ value, label }: { value: string; label: string }) {
+  return (
+    <div>
+      <div style={{ fontSize: "3rem", fontWeight: 700 }}>{value}</div>
+      <div style={{ fontSize: "0.875rem", opacity: 0.6, marginTop: "0.5rem" }}>{label}</div>
+    </div>
+  );
+}

package/templates/case-study/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Kino, Scene, Reveal } from "react-kino";
+
+export default function __PROJECT_NAME__Page() {
+  return (
+    <Kino>
+      {/* Title card */}
+      <Scene duration="150vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ padding: "30vh 2rem", textAlign: "center" }}>
+            <p style={{ fontSize: "0.875rem", textTransform: "uppercase", letterSpacing: "0.1em", opacity: 0.5 }}>
+              Case Study
+            </p>
+            <h1 style={{ fontSize: "3.5rem", fontWeight: 700, marginTop: "1rem" }}>
+              __PROJECT_NAME__
+            </h1>
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* The Challenge */}
+      <Scene duration="200vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 720, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem" }}>The Challenge</h2>
+            <p style={{ fontSize: "1.125rem", lineHeight: 1.8, opacity: 0.8 }}>
+              Describe the problem your team set out to solve. What were the constraints?
+              What made this project unique?
+            </p>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* The Solution */}
+      <Scene duration="200vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 720, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem" }}>The Solution</h2>
+            <p style={{ fontSize: "1.125rem", lineHeight: 1.8, opacity: 0.8 }}>
+              Walk through your approach. Highlight key decisions, technologies used,
+              and creative breakthroughs.
+            </p>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* Results */}
+      <Scene duration="250vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 720, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "2rem" }}>Results</h2>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2rem", textAlign: "center" }}>
+              <Stat value="3x" label="Performance Gain" />
+              <Stat value="40%" label="Cost Reduction" />
+              <Stat value="99.9%" label="Uptime" />
+            </div>
+          </section>
+        </Reveal>
+      </Scene>
+    </Kino>
+  );
+}
+
+function Stat({ value, label }: { value: string; label: string }) {
+  return (
+    <div>
+      <div style={{ fontSize: "3rem", fontWeight: 700 }}>{value}</div>
+      <div style={{ fontSize: "0.875rem", opacity: 0.6, marginTop: "0.5rem" }}>{label}</div>
+    </div>
+  );
+}

package/templates/portfolio/app.tsx

@@ -0,0 +1,66 @@
+import { Kino, Scene, Reveal } from "react-kino";
+
+export default function __PROJECT_NAME__() {
+  return (
+    <Kino>
+      {/* Intro */}
+      <Scene duration="150vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ padding: "30vh 2rem", textAlign: "center" }}>
+            <h1 style={{ fontSize: "3.5rem", fontWeight: 700 }}>__PROJECT_NAME__</h1>
+            <p style={{ fontSize: "1.25rem", opacity: 0.6, marginTop: "1rem" }}>
+              Designer &amp; Developer
+            </p>
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* Project Grid */}
+      <Scene duration="300vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 960, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "1.5rem", marginBottom: "2rem" }}>Selected Work</h2>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "2rem" }}>
+              <ProjectCard title="Project Alpha" category="Web Design" />
+              <ProjectCard title="Project Beta" category="Mobile App" />
+              <ProjectCard title="Project Gamma" category="Brand Identity" />
+              <ProjectCard title="Project Delta" category="Motion Design" />
+            </div>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* About */}
+      <Scene duration="200vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 640, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem" }}>About</h2>
+            <p style={{ fontSize: "1.125rem", lineHeight: 1.8, opacity: 0.8 }}>
+              Write a short bio here. Describe your background, what drives your work,
+              and what you are looking for.
+            </p>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* Contact */}
+      <Scene duration="100vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ textAlign: "center", padding: "20vh 2rem" }}>
+            <h2 style={{ fontSize: "2.5rem", fontWeight: 700 }}>Get in Touch</h2>
+            <p style={{ marginTop: "1rem", opacity: 0.6 }}>hello@example.com</p>
+          </div>
+        </Reveal>
+      </Scene>
+    </Kino>
+  );
+}
+
+function ProjectCard({ title, category }: { title: string; category: string }) {
+  return (
+    <div style={{ background: "#f5f5f5", borderRadius: 12, padding: "2rem", aspectRatio: "4/3", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+      <h3 style={{ fontSize: "1.25rem", fontWeight: 600 }}>{title}</h3>
+      <p style={{ fontSize: "0.875rem", opacity: 0.5, marginTop: "0.25rem" }}>{category}</p>
+    </div>
+  );
+}

package/templates/portfolio/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Kino, Scene, Reveal } from "react-kino";
+
+export default function __PROJECT_NAME__Page() {
+  return (
+    <Kino>
+      {/* Intro */}
+      <Scene duration="150vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ padding: "30vh 2rem", textAlign: "center" }}>
+            <h1 style={{ fontSize: "3.5rem", fontWeight: 700 }}>__PROJECT_NAME__</h1>
+            <p style={{ fontSize: "1.25rem", opacity: 0.6, marginTop: "1rem" }}>
+              Designer &amp; Developer
+            </p>
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* Project Grid */}
+      <Scene duration="300vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 960, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "1.5rem", marginBottom: "2rem" }}>Selected Work</h2>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "2rem" }}>
+              <ProjectCard title="Project Alpha" category="Web Design" />
+              <ProjectCard title="Project Beta" category="Mobile App" />
+              <ProjectCard title="Project Gamma" category="Brand Identity" />
+              <ProjectCard title="Project Delta" category="Motion Design" />
+            </div>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* About */}
+      <Scene duration="200vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <section style={{ maxWidth: 640, margin: "0 auto", padding: "10vh 2rem" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem" }}>About</h2>
+            <p style={{ fontSize: "1.125rem", lineHeight: 1.8, opacity: 0.8 }}>
+              Write a short bio here. Describe your background, what drives your work,
+              and what you are looking for.
+            </p>
+          </section>
+        </Reveal>
+      </Scene>
+
+      {/* Contact */}
+      <Scene duration="100vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ textAlign: "center", padding: "20vh 2rem" }}>
+            <h2 style={{ fontSize: "2.5rem", fontWeight: 700 }}>Get in Touch</h2>
+            <p style={{ marginTop: "1rem", opacity: 0.6 }}>hello@example.com</p>
+          </div>
+        </Reveal>
+      </Scene>
+    </Kino>
+  );
+}
+
+function ProjectCard({ title, category }: { title: string; category: string }) {
+  return (
+    <div style={{ background: "#f5f5f5", borderRadius: 12, padding: "2rem", aspectRatio: "4/3", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+      <h3 style={{ fontSize: "1.25rem", fontWeight: 600 }}>{title}</h3>
+      <p style={{ fontSize: "0.875rem", opacity: 0.5, marginTop: "0.25rem" }}>{category}</p>
+    </div>
+  );
+}

package/templates/product-launch/app.tsx

@@ -0,0 +1,49 @@
+import { Kino, Scene, Reveal, CompareSlider } from "react-kino";
+
+export default function __PROJECT_NAME__() {
+  return (
+    <Kino>
+      {/* Hero section — fades in on scroll */}
+      <Scene duration="200vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ textAlign: "center", padding: "20vh 2rem" }}>
+            <h1 style={{ fontSize: "4rem", fontWeight: 700 }}>
+              Introducing __PROJECT_NAME__
+            </h1>
+            <p style={{ fontSize: "1.25rem", opacity: 0.7, maxWidth: 600, margin: "1rem auto" }}>
+              A cinematic scroll experience built with react-kino.
+            </p>
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* Features section — each feature reveals on scroll */}
+      <Scene duration="300vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <div style={{ display: "grid", gap: "4rem", padding: "10vh 2rem", maxWidth: 800, margin: "0 auto" }}>
+            <Feature title="Blazing Fast" description="Built on a tiny RAF-driven scroll engine for smooth performance." />
+            <Feature title="Framework Ready" description="Works with Next.js, Vite, and any React setup." />
+            <Feature title="Accessible" description="Respects prefers-reduced-motion out of the box." />
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* Before / After comparison */}
+      <Scene duration="200vh">
+        <CompareSlider
+          before={<div style={{ background: "#1a1a2e", width: "100%", height: "100vh", display: "grid", placeItems: "center", color: "#fff" }}>Before</div>}
+          after={<div style={{ background: "#e94560", width: "100%", height: "100vh", display: "grid", placeItems: "center", color: "#fff" }}>After</div>}
+        />
+      </Scene>
+    </Kino>
+  );
+}
+
+function Feature({ title, description }: { title: string; description: string }) {
+  return (
+    <div>
+      <h2 style={{ fontSize: "2rem", marginBottom: "0.5rem" }}>{title}</h2>
+      <p style={{ fontSize: "1.125rem", opacity: 0.7 }}>{description}</p>
+    </div>
+  );
+}

package/templates/product-launch/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Kino, Scene, Reveal, CompareSlider } from "react-kino";
+
+export default function __PROJECT_NAME__Page() {
+  return (
+    <Kino>
+      {/* Hero section — fades in on scroll */}
+      <Scene duration="200vh">
+        <Reveal animation="fade" at={0.05}>
+          <div style={{ textAlign: "center", padding: "20vh 2rem" }}>
+            <h1 style={{ fontSize: "4rem", fontWeight: 700 }}>
+              Introducing __PROJECT_NAME__
+            </h1>
+            <p style={{ fontSize: "1.25rem", opacity: 0.7, maxWidth: 600, margin: "1rem auto" }}>
+              A cinematic scroll experience built with react-kino.
+            </p>
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* Features section — each feature reveals on scroll */}
+      <Scene duration="300vh">
+        <Reveal animation="fade-up" at={0.15}>
+          <div style={{ display: "grid", gap: "4rem", padding: "10vh 2rem", maxWidth: 800, margin: "0 auto" }}>
+            <Feature title="Blazing Fast" description="Built on a tiny RAF-driven scroll engine for smooth performance." />
+            <Feature title="Framework Ready" description="Works with Next.js, Vite, and any React setup." />
+            <Feature title="Accessible" description="Respects prefers-reduced-motion out of the box." />
+          </div>
+        </Reveal>
+      </Scene>
+
+      {/* Before / After comparison */}
+      <Scene duration="200vh">
+        <CompareSlider
+          before={<div style={{ background: "#1a1a2e", width: "100%", height: "100vh", display: "grid", placeItems: "center", color: "#fff" }}>Before</div>}
+          after={<div style={{ background: "#e94560", width: "100%", height: "100vh", display: "grid", placeItems: "center", color: "#fff" }}>After</div>}
+        />
+      </Scene>
+    </Kino>
+  );
+}
+
+function Feature({ title, description }: { title: string; description: string }) {
+  return (
+    <div>
+      <h2 style={{ fontSize: "2rem", marginBottom: "0.5rem" }}>{title}</h2>
+      <p style={{ fontSize: "1.125rem", opacity: 0.7 }}>{description}</p>
+    </div>
+  );
+}