✂️ OpenClaw Clipper — Official Website

The official website and dynamic configuration host for OpenClaw Clipper.

Built with Next.js 16 + React 19 + Tailwind CSS 4 + Framer Motion.

✨ Features

• Landing page — Hero, features, platforms, stats, testimonials, CTA
• Pricing — 3-tier pricing with animated cards
• Blog — MDX-powered blog with 8+ articles
• Showcase — User case studies and testimonials
• Download — Browser extension + CLI installation guide
• Docs — Installation, usage, OpenClaw integration, API, extractors, FAQ
• Changelog — Version history with timeline
• /skill.md — Dynamic skill document (text/markdown) for OpenClaw agents
• /api/v1/manifest — Remote manifest for extension dynamic updates
• /api/v1/skill.json — Skill metadata endpoint

🎨 Design System: Playful Geometric

• Colors: Vivid Violet (#8B5CF6) + Hot Pink (#F472B6) + Amber (#FBBF24) + Emerald (#34D399) on Warm Cream (#FFFDF5)
• Typography: Outfit (headings) + Plus Jakarta Sans (body) + JetBrains Mono (code)
• Shadows: Hard offset shadows (no blur) — sticker/paper-cut feel
• Decorations: Confetti shapes, dot grids, squiggly dividers, blob masks
• Animations: Bouncy hover (cubic-bezier overshoot), pop-in entrance, marquee, wiggle

🚀 Quick Start

git clone <repo-url>
cd openclaw-clipper-web
npm install
npm run dev

Open http://localhost:3000.

📦 Build

npm run build
npm start

🌍 Environment Variables

No environment variables required for basic operation. The project works out of the box.

Optional for production:

Variable	Description	Default
NEXT_PUBLIC_SITE_URL	Canonical site URL	https://clipper.openclaw.ai
NEXT_PUBLIC_POSTHOG_KEY	PostHog project API key	—
NEXT_PUBLIC_POSTHOG_HOST	PostHog instance URL	https://us.i.posthog.com
NEXT_PUBLIC_EXTENSION_URL	Chrome Web Store link	—

🗂 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── page.tsx            # Landing page
│   ├── pricing/            # Pricing page
│   ├── blog/               # Blog list + [slug] detail
│   ├── showcase/           # User showcase
│   ├── download/           # Download page
│   ├── docs/               # Documentation pages
│   ├── changelog/          # Version changelog
│   ├── skill.md/           # Dynamic skill.md route
│   └── api/v1/             # API routes (manifest, skill.json)
├── components/
│   ├── ui/                 # Design system primitives
│   ├── layout/             # Header, Footer
│   ├── animations/         # FloatingShapes, Confetti, Marquee
│   └── sections/           # Page sections (Hero, Features, etc.)
└── lib/                    # Utilities

🚢 Deploy

Deploy to Vercel:

Or any Node.js hosting (Fly.io, Railway, etc.):

npm run build
npm start -p 3000

📄 License

MIT

---

Part of the OpenClaw ecosystem ✂️