Add full documentation site at /docs with MDX content, search, and dark mode

- Restructure root layout using (lp) route group to isolate LP from docs
- Add docs system: MDX compilation (next-mdx-remote), syntax highlighting (shiki/rehype-pretty-code), Orama full-text search, dark mode (next-themes)
- Create 11 documentation pages across 4 sections (Getting Started, Guides, Reference, Troubleshooting)
- Build 28 docs components: layout shell, sidebar, header, TOC, search modal, 14 MDX components
- Add Zod-validated content pipeline with meta.json navigation, search index generation
- Link docs from LP footer and OpenSourceCTA section

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mokuwaki

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# generated
+public/docs/search-index.json

content/docs/getting-started/installation.mdx

@@ -0,0 +1,121 @@
+---
+title: Installation
+description: Install Rollberry using npx for zero-install usage, or globally via npm. Covers system requirements and verification.
+order: 1
+---
+
+## Requirements
+
+Rollberry requires **Node.js 18 or later**. You can check your current Node.js version by running:
+
+```bash
+node --version
+```
+
+If you need to install or update Node.js, visit [nodejs.org](https://nodejs.org/) or use a version manager like [nvm](https://github.com/nvm-sh/nvm):
+
+```bash
+# Install Node.js 18+ using nvm
+nvm install 18
+nvm use 18
+```
+
+Rollberry uses Playwright to manage the Chromium browser automatically. There is no need to install Chrome or Chromium separately — Playwright handles the browser binary download on first run.
+
+## Zero-install with npx (recommended)
+
+The easiest way to use Rollberry is with `npx`, which comes bundled with Node.js. This approach requires no installation at all:
+
+```bash
+npx rollberry capture https://example.com
+```
+
+On the first run, `npx` will download the `rollberry` package and its dependencies (including the Chromium browser binary). Subsequent runs will use the cached version.
+
+This is the recommended approach for most users because:
+
+- No global packages to manage or update
+- Always runs the latest version (or specify a version explicitly)
+- Clean environment with no side effects on your system
+- Works immediately in CI/CD pipelines
+
+To pin a specific version:
+
+```bash
+npx rollberry@0.1.3 capture https://example.com
+```
+
+## Global installation
+
+If you use Rollberry frequently, you can install it globally for faster startup:
+
+```bash
+npm install -g rollberry
+```
+
+After global installation, the `rollberry` command is available directly:
+
+```bash
+rollberry capture https://example.com
+```
+
+To update to the latest version:
+
+```bash
+npm update -g rollberry
+```
+
+To uninstall:
+
+```bash
+npm uninstall -g rollberry
+```
+
+## Verifying the installation
+
+After installation, verify that Rollberry is working correctly:
+
+```bash
+# Check the version
+npx rollberry --version
+```
+
+Expected output:
+
+```
+rollberry v0.1.3
+```
+
+You can also run a quick test capture to confirm everything is set up properly:
+
+```bash
+npx rollberry capture https://example.com --duration 3
+```
+
+This should produce an MP4 file in the `./rollberry-output` directory within a few seconds.
+
+## Platform support
+
+Rollberry works on all platforms supported by Playwright:
+
+| Platform | Architecture | Status |
+|---|---|---|
+| macOS | x64, arm64 (Apple Silicon) | Supported |
+| Linux | x64, arm64 | Supported |
+| Windows | x64 | Supported |
+
+On Linux, you may need to install additional system dependencies for Chromium. Playwright provides a command to install them:
+
+```bash
+npx playwright install-deps chromium
+```
+
+## CI/CD environments
+
+Rollberry works in CI/CD pipelines out of the box. For headless environments like GitHub Actions, GitLab CI, or Jenkins, no additional configuration is needed since Rollberry runs the browser in headless mode by default.
+
+For Docker-based CI environments, you may need to install Chromium's system dependencies. See the [Common Issues](/docs/troubleshooting/common-issues) page for details on CI/CD setup.
+
+## Next steps
+
+With Rollberry installed, head to the [Quick Start](/docs/getting-started/quick-start) guide to capture your first page.

content/docs/getting-started/introduction.mdx

@@ -0,0 +1,73 @@
+---
+title: Introduction
+description: Learn what Rollberry is, who it's for, and how full-page scrolling video captures can transform your workflow.
+order: 0
+---
+
+## What is Rollberry?
+
+Rollberry is a command-line tool that captures full-page scrolling videos of web pages using a real browser. Unlike traditional screenshot tools that produce static images, Rollberry records a smooth scrolling video of the entire page — from top to bottom — and outputs it as an MP4 file.
+
+Under the hood, Rollberry launches a real Chromium browser via [Playwright](https://playwright.dev/), navigates to your target URL, and records the viewport as it scrolls through the page. This means every CSS animation, lazy-loaded image, and dynamic element is captured exactly as a real user would see it.
+
+```bash
+npx rollberry capture https://example.com
+```
+
+That single command produces a polished MP4 video of the full page in seconds.
+
+## Who is Rollberry for?
+
+Rollberry is designed for anyone who needs to capture how a web page actually looks and behaves:
+
+- **Designers and developers** reviewing UI changes across pages or deployments
+- **QA teams** documenting visual state of web applications for test evidence
+- **Marketing teams** creating content that showcases landing pages or product features
+- **Agencies** delivering visual proof of completed work to clients
+- **DevOps engineers** integrating visual regression captures into CI/CD pipelines
+
+## Why video instead of screenshots?
+
+Static screenshots have significant limitations when it comes to capturing the full experience of a web page:
+
+| Aspect | Screenshots | Rollberry Video |
+|---|---|---|
+| Below-the-fold content | Requires stitching or long-screenshot hacks | Naturally captured during scroll |
+| Animations & transitions | Frozen in a single frame | Recorded in full motion |
+| Lazy-loaded images | Often missing from static captures | Loaded as the page scrolls |
+| Sticky headers & footers | Overlapping content in stitched images | Rendered correctly at every scroll position |
+| File format | Multiple PNGs or one very tall image | Single MP4 video file |
+| Sharing | Requires image viewers or zooming | Plays anywhere videos play |
+
+A scrolling video provides a faithful representation of the user experience that a static image simply cannot match.
+
+## Key features
+
+- **Zero install** — Run directly with `npx`, no global installation required
+- **Real browser rendering** — Uses Playwright with Chromium for pixel-perfect captures
+- **Localhost support** — Capture local development servers with automatic retry logic
+- **Custom viewport** — Set any resolution to match your target devices
+- **Smooth scrolling** — Configurable scroll speed and duration
+- **FPS control** — Adjust frame rate for quality vs. file size trade-offs
+- **Wait conditions** — Wait for specific selectors or a fixed delay before capturing
+- **Hide overlays** — Remove cookie banners, sticky headers, and other floating elements
+- **Debug mode** — Save individual frames as PNGs for inspection
+- **Structured logs** — JSONL output for programmatic processing
+- **MP4 output** — Industry-standard video format that plays everywhere
+
+## How it works
+
+Rollberry follows a straightforward capture pipeline:
+
+1. **Launch** — A headless Chromium browser is started via Playwright
+2. **Navigate** — The browser loads the target URL and waits for the page to be ready
+3. **Prepare** — Optional wait conditions are applied (timers, selector visibility, overlay hiding)
+4. **Capture** — The viewport is recorded as the page scrolls from top to bottom
+5. **Encode** — Captured frames are assembled into an MP4 video file
+6. **Output** — The video and metadata are saved to the output directory
+
+The entire process is automated and typically completes in under 30 seconds for most pages.
+
+## Next steps
+
+Ready to get started? Head to the [Installation](/docs/getting-started/installation) page to set up Rollberry, or jump straight to the [Quick Start](/docs/getting-started/quick-start) guide if you already have Node.js installed.

content/docs/getting-started/meta.json

@@ -0,0 +1,6 @@
+{
+  "title": "Getting Started",
+  "icon": "rocket",
+  "order": 0,
+  "pages": ["introduction", "installation", "quick-start"]
+}

content/docs/getting-started/quick-start.mdx

@@ -0,0 +1,145 @@
+---
+title: Quick Start
+description: Capture your first full-page scrolling video in under a minute. Learn the basic commands and most common options.
+order: 2
+---
+
+## Your first capture
+
+The simplest Rollberry command takes just a URL:
+
+```bash
+npx rollberry capture https://example.com
+```
+
+This will:
+
+1. Launch a headless Chromium browser
+2. Navigate to `https://example.com`
+3. Wait 1 second for the page to settle
+4. Scroll from top to bottom over 5 seconds
+5. Save an MP4 video to `./rollberry-output/`
+
+The output directory will contain the video file along with a `manifest.json` describing the capture.
+
+## Viewing the output
+
+After the capture completes, open the output directory to find your video:
+
+```bash
+ls ./rollberry-output/
+```
+
+You will see output similar to:
+
+```
+capture-2026-03-19T10-30-00.mp4
+manifest.json
+```
+
+Open the MP4 file with any video player, or drag it into a browser window to preview.
+
+## Customizing the viewport
+
+By default, Rollberry captures at 1280x720 pixels. To capture at a different resolution, use the `--viewport` flag:
+
+```bash
+# Desktop full HD
+npx rollberry capture https://example.com --viewport 1920x1080
+
+# Mobile viewport (iPhone-like)
+npx rollberry capture https://example.com --viewport 390x844
+
+# Tablet viewport (iPad-like)
+npx rollberry capture https://example.com --viewport 768x1024
+```
+
+The viewport format is `WIDTHxHEIGHT` in pixels.
+
+## Adjusting scroll duration
+
+The `--duration` flag controls how long the scroll takes in seconds. A longer duration produces a slower, smoother scroll:
+
+```bash
+# Quick 3-second scroll
+npx rollberry capture https://example.com --duration 3
+
+# Slow, detailed 15-second scroll
+npx rollberry capture https://example.com --duration 15
+```
+
+For very long pages, you may want to increase the duration to avoid scrolling too quickly.
+
+## Specifying the output directory
+
+By default, output goes to `./rollberry-output`. Use `--output` (or `-o`) to change this:
+
+```bash
+npx rollberry capture https://example.com -o ./my-captures
+```
+
+## Practical examples
+
+Here are a few real-world usage patterns to get you started:
+
+**Capture a landing page at full HD:**
+
+```bash
+npx rollberry capture https://your-site.com \
+  --viewport 1920x1080 \
+  --duration 8
+```
+
+**Capture a mobile view with cookie banner hidden:**
+
+```bash
+npx rollberry capture https://your-site.com \
+  --viewport 390x844 \
+  --hide-selectors ".cookie-banner, .consent-dialog"
+```
+
+**Capture a local development server:**
+
+```bash
+npx rollberry capture http://localhost:3000 \
+  --wait 2000 \
+  --duration 10
+```
+
+**Wait for a specific element before capturing:**
+
+```bash
+npx rollberry capture https://your-site.com \
+  --wait-for-selector ".hero-image" \
+  --duration 6
+```
+
+## What happens during a capture
+
+When you run a capture, Rollberry provides progress output in your terminal:
+
+```
+Rollberry v0.1.3
+Capturing: https://example.com
+Viewport:  1280x720
+Duration:  5s
+FPS:       30
+
+[1/4] Launching browser...
+[2/4] Navigating to page...
+[3/4] Scrolling and capturing...
+[4/4] Encoding video...
+
+Done! Output saved to ./rollberry-output/capture-2026-03-19T10-30-00.mp4
+```
+
+If anything goes wrong, Rollberry will display a clear error message. For help debugging issues, see the [Debugging](/docs/guides/debugging) guide.
+
+## Next steps
+
+Now that you know the basics, explore these topics:
+
+- [CLI Options Reference](/docs/reference/cli-options) — Full list of all available flags
+- [Capturing Multiple Pages](/docs/guides/multi-page) — Batch capture workflows
+- [Localhost Captures](/docs/guides/localhost) — Capture local dev servers
+- [Hiding Overlays](/docs/guides/hiding-overlays) — Remove cookie banners and sticky elements