Shapes Pack — Taste-Pass Gallery

Checkpoint review for the shapes-first pivot: all 16 ops of shapes-v1 (vocabulary.md §1). The canvas primitive is the shape, not the website component — users draw approximate shapes and MaoBi makes them crisp and styled; components exist only behind opt-in glyphs. The model emits {op, from, params, snap} and no coordinates: every bbox and path below stands in for geometry derived from ink. All randomness is seeded, so every frame is fully deterministic. Flag anything that fails the taste bar. (The pre-pivot 18-component web-ui gallery lives in git history; its pack still backs the glyph components.)

Shapes (6 ops)

The 6 base ops — every stroke-set becomes one of these unless a glyph or decorative signature says otherwise. Geometry (bbox, path) arrives from the ink; the renderer only makes it crisp. smooth_path keeps the user's own silhouette — the flame below is the fire-shape demo.

rect

plain — crisp ink outline

filled, rounded (snap: square) · {"fill":"#4f6ef7","radius":12}

diagonal gradient · {"gradient":{"colors":["#4f6ef7","#9f7bff"],"direction":"diagonal"},"radius":10}

ellipse

plain outline

filled circle (snap: square) · {"fill":"#38d9c3"}

radial gradient · {"gradient":{"colors":["#ffd68f","#f76e6e"],"direction":"radial"}}

line

straightened horizontal

free diagonal, thick accent · {"stroke":{"color":"#4f6ef7","width":5}}

arrow

straightened, ink

up-right, colored · {"stroke":{"color":"#f76e6e","width":4}}

text

body size from small bbox · {"text":"Sketch it. Ship it."}

heading weight from tall bbox · {"text":"Big idea"}

colored, centered · {"text":"MaoBi","fill":"#4f6ef7","align":"center"}

smooth_path

flame silhouette · fire gradient · {"gradient":{"colors":["#f76e6e","#f5a623"],"direction":"down"}}

hand-drawn star · solid fill · {"fill":"#f5a623"}

open squiggle stays a stroke · {"stroke":{"color":"#1a1a1a","width":3}}

Glyph components (6 ops)

Semantics are opt-in: a single letter alone inside a box picks the component; nearby handwriting routes to its label param.

imagebox + i

photo placeholder · {"variant":"photo"}

formbox + f

2 fields, routed submit label · {"fields":2,"label":"Sign in"}

buttonbox + b

solid, routed label · {"label":"Get started"}

gradient · {"fill":"gradient","colors":["#4f6ef7","#9f7bff"],"label":"Upgrade"}

navbarbox + n

snap: full_width_top, routed brand · {"links":3,"label":"Acme"}

videobox + v

16:9 player frame

small player

placeholderbox + ?

dashed slot

Decorative (4 ops)

The model emits {op, from, params}; the renderer owns the beauty. Every variant is seeded — re-rolling the seed live is a demo beat.

wave_divider

calm · {"amplitude":18,"layers":3,"seed":2}

tall, flipped · {"amplitude":30,"layers":4,"flip":true,"seed":9}

night_sky

sparse, clustered up · {"density":0.35,"cluster_bias":0.7,"seed":2}

dense · {"density":0.9,"size_range":[0.5,2.4],"cluster_bias":0.4,"seed":9}

sparkles

few · {"count":7,"seed":4}

many, larger · {"count":14,"size_range":[4,16],"spread":1,"seed":21}

aurora_gradient

aurora palette · {"palette":"aurora","blob_count":4,"seed":4}

sunset palette · {"palette":"sunset","blob_count":5,"seed":11}

Diagrams (pack 2) (6 ops)

Chart + lookup ops on the same shapes contract: geometry from ink, precision from code. periodic_table is the lookup-asset proof — a real 18×7 main block plus separated f-block lanes, category-tinted, with symbols auto-hidden below 9px cells. Everything seeded and deterministic.

bar_chart

seeded default bars · {"seed":3}

explicit values + labels · {"values":[42,68,31,90,55],"labels":["Mon","Tue","Wed","Thu","Fri"]}

pie_chart

square, seeded wedges · {"seed":5}

wide bbox → side legend · {"values":[40,25,20,15],"labels":["Chrome","Safari","Edge","Other"]}

venn_diagram

2 sets, custom labels · {"labels":["Design","Code"]}

3 sets · {"sets":3}

timeline

4 generic milestones

5 custom events · {"events":["Idea","Prototype","Alpha","Beta","Launch"]}

periodic_table

full 18×7 + f-block lookup

noble gases highlighted · {"highlight":["He","Ne","Ar","Kr","Xe","Rn","Og"]}

atomic_structure

2 shells · {"shells":2,"seed":4}

4 shells · {"shells":4,"seed":9}