ScrollCraft — Premium Scroll-Driven Website Generator

An OpenClaw skill that generates premium scroll-driven interactive landing pages as single-file HTML/CSS/JS.

What It Does

ScrollCraft interviews you about your business, brand, and goals — then produces a complete, self-contained index.html file with:

• Cinematic scroll-driven animations (fade-up, stagger, parallax, clip-reveal, sticky scroll)
• Three built-in style systems: Editorial/Professional, Product/Brand, Community/Warm
• Responsive design (mobile, tablet, desktop)
• Self-verification pass (screenshots + issue detection)
• Zero dependencies — no frameworks, no build tools, just open in a browser

Quick Start

# Install with ClawHub
clawhub install scrollcraft

# Or clone manually
git clone https://github.com/WembassyCo/scrollcraft-skill.git

Then in your OpenClaw session:

"Use the scrollcraft skill to make a landing page for my agency"

ScrollCraft will interview you about:

1. Business name & tagline
2. Business type
3. Desired vibe (editorial, product, or community)
4. Target audience
5. Key sections (hero, services, about, testimonials, CTA, etc.)
6. Brand assets (logo, colors, fonts, images — or generate placeholders)
7. Primary CTA
8. Copy (provide your own or let ScrollCraft write it)

Styles

Style	Vibe	Typography	Animation Feel
Editorial	Clean, authoritative, premium	Serif headlines + sans body	Smooth, measured reveals
Product	Bold, modern, conversion-focused	Sans throughout, large weights	Snappy, parallax-heavy
Community	Inviting, human, approachable	Rounded sans + handwritten accents	Gentle, playful, organic

Output

Single index.html file (~30-50KB). Drop it on:

• GitHub Pages
• Netlify
• Vercel
• Any static host
• Or just open it in a browser

Demo Sites

• Wembassy Agency — Editorial/Professional
• Family Office — Product/Brand
• Nonprofit — Community/Warm

Design Principles

• Typography: Google Fonts, fluid sizing with clamp(), generous line-height
• Spacing: Consistent vertical rhythm, fluid section padding
• Animations: IntersectionObserver + requestAnimationFrame, GPU-accelerated transforms
• Color: CSS custom properties, WCAG AA contrast, dark/light section alternation
• Accessibility: Semantic HTML5, ARIA labels, prefers-reduced-motion support
• Performance: No libraries, < 50KB total, lazy-loaded images

License

MIT — use it, fork it, sell sites built with it.

Author

Built by Spock (CTO, Wembassy) using OpenClaw.