Call-to-Action
Live-Ausgabe der echten Render-Engine — ändere die Einstellungen und sie aktualisiert sich sofort.
Empfohlener Tarif
motion design
Drei Tarifkarten steigen auf, ein Rahmen zeichnet sich um den empfohlenen und sein Badge setzt sich darüber.
Ideal für: Auf den Tarif zeigen, den die meisten wählen sollten, ohne Preiskampf im Bild.
Einstellungen
Schrift
Theme
Größe
Stimmung
In einem Film verwenden
Was du ändern kannst:
titleplansbadgeFür Entwickler (MCP und JSON)
Das ist genau die Szene für create_animation (MCP): Struktur behalten, Worte ändern und den Sprechertext schreiben — die Stimme bestimmt, wie lange die Szene dauert. Mit set_data in update_storyboard einfügen, um einen fertigen Film zu ändern.
{
"visual": "motion",
"heading": "Plans",
"narration": "Write the sentence the voice says over this scene; its length is the scene's.",
"data": {
"motion": {
"spec": {
"version": 1,
"name": "Plan highlight",
"intent": "point at the plan most people should pick",
"exit": "mirror",
"params": [
{
"name": "title",
"type": "text",
"label": "Title",
"default": "Pick the plan that fits",
"maxLength": 26
},
{
"name": "plans",
"type": "list",
"items": "record",
"label": "Plans (title, caption)",
"min": 3,
"max": 3,
"default": [
{
"title": "Solo",
"caption": "For one person trying it out"
},
{
"title": "Team",
"caption": "Shared workspace and brand kit"
},
{
"title": "Scale",
"caption": "Every seat, priority support"
}
]
},
{
"name": "badge",
"type": "text",
"label": "Badge",
"default": "Most popular",
"maxLength": 14
}
],
"layers": [
{
"id": "title",
"kind": "text",
"text": "{{title}}",
"role": "display",
"align": "center",
"maxLines": 2,
"box": {
"col": 0,
"row": 0,
"cols": 12,
"rows": 2
},
"tall": {
"col": 0,
"row": 0.2,
"cols": 12,
"rows": 1.9
},
"enter": {
"primitive": "fadeUp"
}
},
{
"id": "card",
"kind": "shape",
"shape": "rect",
"fill": "surface",
"radius": "lg",
"elevation": 2,
"repeat": {
"param": "plans",
"flow": "row",
"gap": "lg"
},
"box": {
"col": 0,
"row": 3.6,
"cols": 12,
"rows": 8.2
},
"tall": {
"col": 0,
"row": 2.6,
"cols": 12,
"rows": 9.2
},
"enter": {
"primitive": "fadeUp",
"order": 1
}
},
{
"id": "name",
"kind": "text",
"text": "{{item.title}}",
"role": "headline",
"align": "center",
"valign": "start",
"maxLines": 1,
"repeat": {
"param": "plans",
"flow": "row",
"gap": "lg"
},
"box": {
"col": 0,
"row": 4.3,
"cols": 12,
"rows": 2
},
"tall": {
"col": 0.4,
"row": 2.85,
"cols": 4.6,
"rows": 8.95
},
"enter": {
"primitive": "fadeUp",
"order": 1
}
},
{
"id": "caption",
"kind": "text",
"text": "{{item.caption}}",
"role": "title",
"color": "sub",
"align": "center",
"valign": "start",
"maxLines": 3,
"repeat": {
"param": "plans",
"flow": "row",
"gap": "lg"
},
"box": {
"col": 0.2,
"row": 6.7,
"cols": 11.6,
"rows": 4.6
},
"tall": {
"col": 5.2,
"row": 2.85,
"cols": 6.4,
"rows": 8.95
},
"enter": {
"primitive": "fadeUp",
"order": 1
}
},
{
"id": "outline",
"kind": "shape",
"shape": "rect",
"fill": "none",
"stroke": "c1",
"strokeWidth": "bold",
"radius": "lg",
"box": {
"col": 4.3,
"row": 3.6,
"cols": 3.4,
"rows": 8.2
},
"tall": {
"col": 0,
"row": 5.967,
"cols": 12,
"rows": 2.467
},
"enter": {
"primitive": "drawOn",
"order": 2
}
},
{
"id": "badge",
"kind": "text",
"text": "{{badge}}",
"role": "title",
"color": "c1",
"align": "center",
"maxLines": 1,
"box": {
"col": 3.8,
"row": 2.3,
"cols": 4.4,
"rows": 1.1
},
"tall": {
"col": 2,
"row": 5.08,
"cols": 8,
"rows": 0.85
},
"enter": {
"primitive": "scaleSettle",
"order": 3
}
}
]
},
"name": "Plan highlight"
}
}
}Wiederverwenden: data.motion.spec einmal mit save_motion_spec speichern (geprüft wie mit validate_motion_spec), dann kann jede Szene das Visual „motion“ mit data.motion.specId und eigenen Parametern nutzen. Name der Spec: „Plan highlight“.