Claymorphism landing page template, HTML + AI-editable

13 claymorphism HTML sections, zero JS, 100/100 PageSpeed. Rebrand in Cursor or Claude in one prompt. $28 once, no Framer or Webflow fees.

Get Started

Live preview

Claymorphism landing page template, HTML + AI-editable

Zero JS, zero build

Double-click index.html and it runs. No npm, no bundler, no framework. Just 150KB total.

AI-agent ready

Includes DESIGN.md and AGENTS.md. Point Claude, Codex, or Cursor at it to rebrand in one prompt.

100/100 PageSpeed

Pure HTML, CSS, and SVG. No trackers, no third-party scripts. A clean 100 on Lighthouse, mobile and desktop.

13 ready sections

Hero, pricing, testimonials, FAQ, CTA, and more. Responsive from 320px, motion-safe by default.

Preview Claylo sections in the browser

13 hand-drawn clay sections in the style of Duolingo, Toca Boca, and indie SaaS landings. Every screen is production-ready and works from 320px up. Launch this week, not next quarter.

Claymorphism landing page hero with headline "Launch your product faster than competitors" and a soft clay dashboard mockup showing a growth chart

Claymorphism features section "Everything you need to grow" with six clay-style cards for lightning-fast performance, data security, real-time analytics, 50+ integrations, team collaboration, and cross-platform support

Claylo product tour section "A closer look at what you get" featuring a dashboard that tells a story with a soft clay bar chart

Claylo stats section "By the numbers, trusted by fast-moving teams" showing metrics for teams onboarded, faster shipping, uptime SLA, and average rating

Claymorphism pricing section with monthly and yearly billing toggle and three plans (Starter, Pro, Business) styled with soft clay cards

Claylo comparison section "See how Claylo compares" with a table pitting Claylo against FlowHQ, TaskBase, and other tools

Claylo testimonials section "What our customers say" with six clay-style customer review cards and avatars

Claylo FAQ section "Frequently asked questions" with an accordion list of expandable questions

Claylo contact section "Get in touch, talk to our team" with a clay-style enquiry form

Claylo details up close

Buttons, cards, toggles, and hand-drawn SVG illustrations. All coded, all tokenized. Flip one variable and the whole page reskins in seconds. Play with the live preview

One file, one price ⚡

Pay once and ship forever. No subscription, no Framer or Webflow fee eating your margin every month.

Claylo landing page template

Ship your landing today, not next month. 13 ready-made sections, zero JS, 100/100 PageSpeed out of the box. Rebrand it by hand in an hour or drop the folder into Claude, Codex, or Cursor and get a custom landing in one prompt. Inside: index.html, css/style.css, self-hosted Fredoka and Plus Jakarta Sans fonts (no Google Fonts calls, GDPR-safe), plus DESIGN.md, AGENTS.md, and README.md. Personal and commercial licenses included.

Buy now $28

Live preview

Need Claylo tailored to your product? Let's design it together ✊

We adapt Claylo to your brand, extend it with new sections, and ship custom claymorphism illustrations. Figma design, HTML + CSS handoff, and framework integration in React, Vue, or Astro.

FAQs

How do I open the template after buying?

After checkout on Gumroad (safe and encrypted) you land on a download page and get a link by email (check the SPAM folder). Unzip the folder and double-click index.html. It opens in any browser. No install, no build, no server.

Can an AI agent rebrand it for me?

Yes. The template ships with DESIGN.md and AGENTS.md. Point Claude, Codex, or Cursor at the folder and describe your brand. The agent edits tokens like --c-accent, --clay-md, and --radius-pill, then rewrites the copy across all 13 sections in a single prompt.

Is there really no JavaScript?

Correct. Every illustration is HTML, CSS, and inline SVG. The billing toggle and motion run on pure CSS. No JS means no build step, no dependencies to patch, and a clean 100/100 PageSpeed score.

Can I preview it before I pay?

Open the live demo at https://claylo.netlify.app/ and click through every section on desktop and mobile. What you see there is what you download.

Which license do I need?

The personal license covers your own projects. The commercial license adds unlimited client projects and resale as part of a larger service. You may not resell the template as-is. Pick the right one before checkout.

Who is Claylo for?

Indie hackers and solopreneurs tired of monthly Framer or Webflow fees, vibe coders working in Cursor, Claude, or Copilot, and agencies that need a fast, tactile landing page without a design sprint.

How does Claylo compare to a Framer or Webflow template?

You pay $28 once and own the file. Framer and Webflow charge $15–39 every month, so a two-year comparison looks like $28 vs $360–936. You also get the source HTML and CSS instead of a hosted export, so you can put Claylo on any host — Netlify, Cloudflare Pages, GitHub Pages, or your own server.

Can I use Claylo with Next.js, Astro, or another framework?

Yes. The HTML, CSS, and SVG are framework-agnostic. Copy the sections into your Next.js pages, Astro .astro files, or SvelteKit routes. All animations run on CSS, so nothing breaks when you lift the script-free markup out of the standalone shell.

I have a project. Can I hire you?

We take on custom design and development work. We can extend this template or build new ones and ship them in production with popular frameworks. Just contact us with your brief, budget, and expectations.

I 💜 it, but can I have a discount?

We reward people who scroll to the bottom. Drop us a message with a short note on how you plan to use Claylo and we send a ✨30% off coupon for your purchase.