Skip to content

Dogfood: Phase 8 release page composed via canvas-mcp itself#37

Merged
vicmaster merged 1 commit into
masterfrom
dogfood/phase8-release
May 17, 2026
Merged

Dogfood: Phase 8 release page composed via canvas-mcp itself#37
vicmaster merged 1 commit into
masterfrom
dogfood/phase8-release

Conversation

@vicmaster
Copy link
Copy Markdown
Owner

Summary

Single-canvas hero that exercises every Phase 8 primitive in honest design context. Doubles as the v0.8.0 release-notes hero image.

Feature Where in design
Custom typography Inter loaded from Bunny Fonts CDN via @font-face
Backdrop filter Glass card with { blur: 28, saturate: 180 } over amber/blue blobs
SVG path primitives Logo mark composed from a raw d attribute
Animations slideUp on headline, staggered fadeIn (80/160/240/320/400ms) on feature rows
Auto position: relative NEW badge absolute-positioned on the version pill

Publishes to ~/.canvas-mcp/canvases/phase8-release.json with a stable canvas ID so the design is reviewable live at http://localhost:3001/canvas/phase8-release (animations play, font swaps in, glass effect renders) instead of only as a flat PNG.

Visual direction

Flat amber on warm-dark surfaces. No gradients, no purple/indigo. Big confident typography, restraint over flourish.

Test plan

  • Built locally — PNG at 2880×1800 written to docs/phase8-release.png.
  • Canvas published to local store; viewer serves it at /canvas/phase8-release.
  • Smoke test discovered & fixed a real renderer foot-gun (style attribute escape — shipped as PR Escape " and & in inline style attribute values #36 before this one).

Reproduce

npx tsx scripts/build-phase8-release.ts

Adds scripts/build-phase8-release.ts — a single-canvas hero that
exercises every Phase 8 primitive in honest design context:

  - Custom typography     → Inter loaded from Bunny Fonts CDN
  - Backdrop filter       → glass card with blur:28 + saturate:180
                            over amber/blue blobs
  - SVG path primitives   → logo mark composed from a raw `d`
  - Animations            → slideUp on the headline, staggered fadeIn
                            (80/160/240/320/400ms) on feature rows
  - Auto position:relative → NEW badge absolute-positioned on the
                            version pill (pill has no explicit
                            position; renderer auto-injects relative)

Publishes to ~/.canvas-mcp/canvases/phase8-release.json with a stable
ID so the design is reviewable live at
http://localhost:3001/canvas/phase8-release (animations play, font
swaps in, glass effect renders) instead of just as a flat PNG.

Doubles as the v0.8.0 release-notes hero image — committed to
docs/phase8-release.png at 2880×1800.

Visual constraints per the project's established design direction:
no gradients, no purple/indigo, flat amber on warm-dark surfaces.
@vicmaster vicmaster merged commit 7569103 into master May 17, 2026
@vicmaster vicmaster deleted the dogfood/phase8-release branch May 17, 2026 12:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant