Recipes & Patterns

Bite-sized normalized document patterns you can copy into your projects. Each recipe demonstrates structure that agents, editors, and React hosts can inspect and patch.

1. Animated Function Plot with Moving Tangent

Use element IDs and timeline tracks to reveal a function plot and tangent construction.

0.00s / 3.97s · F0

elements: {
  axes: { id: 'axes', type: 'axes', props: { type: 'axes', origin: [300, 200], xRange: [-4, 4], yRange: [-2, 2], scale: 50 } },
  curve: { id: 'curve', type: 'functionPlot', props: { type: 'functionPlot', expression: 'sin(x)', domain: [-4, 4], origin: [300, 200], scale: 50, color: '$accent', opacity: 0 } },
  tangent: { id: 'tangent', type: 'line', props: { type: 'line', x1: 220, y1: 230, x2: 300, y2: 150, stroke: '$tertiary', strokeWidth: 2, opacity: 0 } },
},
timelines: {
  intro: {
    id: 'intro',
    duration: 60,
    tracks: [
      { target: 'curve', property: 'opacity', keyframes: [{ frame: 0, value: 0 }, { frame: 30, value: 1 }] },
      { target: 'tangent', property: 'opacity', keyframes: [{ frame: 30, value: 0 }, { frame: 60, value: 1 }] },
    ],
  },
}

2. Staggered Box Reveal with Labels

Use staggered keyframes to reveal a row of labeled boxes one at a time.

0.00s / 2.97s · F0

const labels = ['Input', 'Tokenize', 'Embed', 'Attend', 'Output'];
const tracks = labels.map((_, index) => ({
  target: `step-${index + 1}`,
  property: 'opacity',
  keyframes: [{ frame: index * 8, value: 0 }, { frame: index * 8 + 15, value: 1 }],
}));

3. Graph Visualization with Colored Edges

Use the graph element with custom edge colors and labels.

elements: {
  network: {
    id: 'network',
    type: 'graph',
    props: {
      type: 'graph',
      nodes: [
            { id: 'a', x: 100, y: 200, label: 'A', color: '#4fc3f7' },
            { id: 'b', x: 250, y: 80,  label: 'B', color: '#a78bfa' },
            { id: 'c', x: 400, y: 200, label: 'C', color: '#f472b6' },
            { id: 'd', x: 250, y: 320, label: 'D', color: '#34d399' },
      ],
      edges: [
            { from: 'a', to: 'b', color: '#4fc3f7' },
            { from: 'b', to: 'c', color: '#a78bfa', directed: true },
            { from: 'c', to: 'd', color: '#f472b6' },
            { from: 'd', to: 'a', color: '#34d399', directed: true },
            { from: 'a', to: 'c', color: '#64748b', label: '5' },
      ],
      nodeRadius: 20,
      edgeWidth: 2,
    },
  },
}