Hand-Drawn Visual Demo

About This Demo

This guide demonstrates Pondero’s hand-drawn visual foundation. It uses the heroIllustration frontmatter field to render a hero SVG above the title, and the inlineVisuals frontmatter field to register inline visual placements.

Hero Illustration

The hero illustration above the title is rendered from the frontmatter field:

heroIllustration: "demo/hero.svg"

The SVG file lives at src/assets/illustrations/demo/hero.svg and is inlined at build time. No extra HTTP request.

Inline Visual Slot

Below is an inline visual placed using an HTML <figure> block with a data-visual-slot attribute. The inlineVisuals frontmatter provides the metadata:

Inline visual slot: comparison-1

The frontmatter for this visual:

inlineVisuals:
  - slot: "comparison-1"
    src: "demo/comparison-1.svg"
    alt: "Comparison visual placeholder"

HandDrawn Components

The HandDrawn component family (5 components) is available at src/components/handdrawn/. These are Astro components that render static SVG at build time using rough.js. See the component demo page for rendered examples of each component.

Available Components

Component	Purpose	Key Props
`HandDrawnDivider`	Section break	none
`HandDrawnCallout`	Sketched border around notes	`label?`
`HandDrawnComparison`	Side-by-side comparison	`leftLabel`, `rightLabel`, `rows?`
`HandDrawnFlow`	Process diagram	`steps[]`
`HandDrawnScore`	Rating visual	`score`, `max?`, `label`

Next Steps

The VisualDesigner agent will produce SVGs and component instances using this foundation. ContentWriter can reference the component API documented in components/handdrawn/README.md.