shuriq-motion · v1.1 · 2026-05-01
A Claude Code skill · ShurIQ motion graphics

shuriq-motion: every future session resumes the capability, instead of rebuilding it.

Cavalry MCP, the Stallion bridge, 89 reference demos, and seven visual grammar primitives — packaged into one trigger-rich skill so the next agent that hears "ShurIQ motion graphics" picks up where the last one left off.

ShurIQ motion graphics Cavalry MCP Stallion bridge visual grammar primitive editorial-tan constellation betweenness-centrality teaching demo
vg-system · 12s
89
demos · techniques · typography · grammar
7
visual grammar primitives
3
integration paths · svg / cavalry / data-bound
1
trigger-rich SKILL.md, auto-discovered
01 · The problem this skill solves

Capability built in one session evaporates by the next, unless something durable carries it forward.

Session 124 spent hours wiring up Cavalry MCP, mapping the live API by debugging it against the JS console, building 88 demos, and codifying the seven visual grammar primitives. None of that knowledge survives a context flush. Session 125 would start by asking "what's a Stallion bridge?"

Without a skill

The next agent reads a stale MCP package's source, hallucinates an API surface, runs into the sandbox render block, and rebuilds the dark-canvas constellation that was already migrated to editorial-tan. It re-makes the same mistakes a senior engineer just fixed.

With shuriq-motion

The agent reads a trigger-rich SKILL.md, loads three reference docs (catalog, visual grammar, integration patterns), and inherits the validated Cavalry API surface, the canonical editorial-tan canvas, the three-layer update rule, and 89 working demos to point at.

02 · What's inside

Three families of demos, four reference docs, one Cavalry bridge.

Every demo runs live in Cavalry through the Stallion HTTP bridge, or embeds as inline animated SVG anywhere the report ships. No one has to install anything to see what a primitive looks like.

50
Techniques
Sixteen aesthetic categories — ambient, mathematical, radial, cosmic, explosive, infographic, data-viz, glitch, cinematic — usable for any panel that needs motion.
30
Kinetic typography
Foundations · data + emphasis · editorial · broadcast · experimental. The vocabulary for headlines, pull-quotes, lower-thirds, count-downs.
9
Visual grammar
Seven semantic primitives, one composed system demo, one pedagogical scaffold (bc-definition) for teaching betweenness centrality without jargon.
03 · The seven primitives

Every regulatory-grade ShurIQ mark traces to one of seven semantic types.

Static spec lives in the visual grammar reference. Motion vocabulary lives in this skill. Both render on the editorial-tan canvas — the same warm baseline as the surrounding report, so the constellation reads continuously with the rest of the deliverable.

vg-entity-node · breathe · pulse
vg-value-flow · particle stream
vg-event-marker · strike · ripple
vg-rubric-axis · needle · threshold
vg-gap · static-noise · arc
vg-bridge · wormhole · bloom
vg-consensus-score · crystallize
bc-definition · pedagogical scaffold

Every primitive renders on #FAF8F5 for Cavalry comps and #EFE9DD for embedded gallery cards. The seven-color musical-theory palette retains its identity on tan; edges flip to ink-on-tan in the 4–15 opacity band; the three-tier glow ratios (14/36/92) carry across canvases unchanged.

04 · The three-layer update rule

When canon changes, three layers update together — or future agents read stale guidance.

This is the rule that turned a quick "swap dark for tan" request into a session-spanning canon migration. If only the artifact source files change, the next agent reads a stale catalog and rebuilds the dark variant. The skill carries this rule explicitly so the migration sticks.

Layer 1

Artifact source

The Cavalry script files that define the runtime truth.

scenes/grammar/*.js
Layer 2

Published surface

What humans browse — the gallery site that demonstrates each demo. Redeploy after every change.

techniques-site/site/index.html
Layer 3

Skill reference

What future agents read. If you skip this layer, the next agent reproduces what you just fixed.

~/.dotfiles/ai/skills/shuriq-motion/references/*.md

Recipe for a color-token migration

Sed batch substitution across every script file in one pass — three patterns updated nine grammar files when the dark canvas became editorial-tan.

# dark → editorial-tan canvas migration (Session 125)
sed -i '' 's/#0A0A0A/#FAF8F5/g' scenes/grammar/*.js   # bg
sed -i '' 's/#F5F5F5/#1A1A1A/g' scenes/grammar/*.js   # text/edges
sed -i '' 's/#888/#7A7468/g'    scenes/grammar/*.js   # text-faint
05 · Three integration paths

Pick the one that matches what's shipping.

A · Inline animated SVG

Editorial sites, intelligence briefs, dashboards. Self-contained, browser-renders, no Cavalry needed. Each card on the techniques gallery is the recipe — copy a <svg> block, adapt the data, deploy.

Trade: lower fidelity than Cavalry, limited to what CSS/SVG animation expresses.

B · Cavalry-rendered MP4

Investor presentations, video reports, social-media-ready hero panels. Run the demo via ./run-tech.sh <name>, scrub in Cavalry, export through Render Manager or screen-record.

Trade: sandbox blocks programmatic export — needs the user's hands.

C · Live data-bound Cavalry scene

Per-report personalization, recurring weekly artifacts, multi-language batches. Bind a Google Sheet to scene attributes, emit one MP4 per row through Cavalry's Dynamic Rendering.

06 · A real lesson, paid for in cache

Never set max-age=immutable on a file that's still moving.

During the dark→tan migration, the gallery deployed but the previews didn't update — Cloudflare's edge cache served the prior version for hours. Two safe patterns: query-string versioning (vg-entity-node.js?v=20260501-1200) on every meaningful change, or content-hash filenames for automatic invalidation per build. Verify the live URL with curl -I after every deploy; WebFetch caches its own copy and will lie to you.

07 · How the next agent picks it up

A trigger-rich SKILL.md is auto-discovered the moment a session uses one of the words in its description.

No manual /load, no install step. The agent reads the frontmatter description at session boot; when a user message contains "ShurIQ motion graphics" or "Cavalry MCP" or any other trigger, the skill activates and three reference docs become available on demand.

Triggers that fire this skill

ShurIQ motion graphics brand intelligence animation kinetic typography for reports Cavalry rendering visual grammar primitive constellation-style network visualization betweenness-centrality teaching demo Cavalry MCP Stallion bridge motion vocabulary chord-graph style editorial-tan constellation

Run any demo

cd projects/shur/shuriq-report-studio/motion-graphics/integration/stallion-helpers

./run-tech.sh list                  # see all 89
./run-tech.sh <demo-name>           # run one in Cavalry
./run-tech.sh tour                  # cycle 50 techniques (~250s)
./run-tech.sh typography            # cycle 30 type demos (~150s)
./run-tech.sh grammar               # cycle 9 grammar demos (~54s)

Stallion must be running inside Cavalry (Scripts > Stallion) before any demo.

08 · Three sites this skill points at

Browse the library before adapting it.

shuriq-motion-graphics
Phase 0 research brief — 36 ideas plus 8 dispatch-ready prompts. The first artifact this skill produced.
shuriq-motion-demos
Eight Fiserv-specific GTM demos (β γ δ θ ε α ζ η). The first proof that the grammar carries a real client argument.
shuriq-motion-techniques
The 89-demo reference gallery with auto-animating previews. Where every new agent should start when picking a pattern.