Fable (flagship · metamorphosis)

Pro3Dwebsite

The website-mode flagship — an airy ivory story page where an instanced flock of 3D butterflies flutters behind a serif display hero, a scroll-cinema metamorphosis timeline (caterpillar → chrysalis → imago), a stat band, a safeguards story and a CTA. Palette-adaptive: the whole flock and every section re-tone to your brand.

Fable (flagship · metamorphosis) — homepage preview

Palette

#4e4af2

#2f2bb8

#23201c

#f0ebdf

#faf7f0

#7d776c

Mode

website

Tier

Pro

3D hero

Yes (three.js)

The prompt that builds it

Paste this to your IDE agent (Claude Code, Codex, …) — it reads the cartwright-premium-design skill and builds this as a real design pack.

Build me a Cartwright website-mode flagship design 'fable': a palette-adaptive ivory story page (cw-* atoms + applyPaletteAsTheme, default morpho violet-blue) — an instanced 3D Live-Canvas butterfly flock (procedural wings, flap/glide, pointer scatter, a reading-clearing around the headline) behind a Fraunces serif display hero, a scroll-cinema metamorphosis timeline (animation-timeline: view(), caterpillar → chrysalis → imago), a stat band, a safeguards story, pricing and a CTA — every section and the flock re-skinning to the brand palette. Website mode, premium. English copy.

Use this design

Install it into an existing Cartwright project with one command — it fetches the design’s code and registers it for you:

$npx create-cartwright design install fable

Then activate it: set designSlug: "fable" in brand.config.ts, or pick it in /admin/designs. New project? npx create-cartwright first.

Build your own with an AI agent →Prompt library