| 1 | spec_version: 1 |
| 2 | id: frame-data-rollup |
| 3 | name: Data Rollup |
| 4 | description: > |
| 5 | A native Remotion data-animation frame: bars grow from zero by real data via |
| 6 | spring physics while the figures roll up from 0 to their target in sync. The |
| 7 | first template that uses Remotion's frame clock directly (useCurrentFrame + |
| 8 | interpolate + spring) rather than the HTML bridge — this is what makes numbers |
| 9 | visibly come alive, which a static HTML chart can't. Meant to be dropped onto a |
| 10 | single data frame inside an otherwise hyperframes video, as a user-chosen |
| 11 | motion enhancement. |
| 12 | |
| 13 | engine: remotion |
| 14 | engine_version: ^4.0.0 |
| 15 | source_entry: source/entry.ts |
| 16 | native: |
| 17 | compositionId: DataRollup |
| 18 | |
| 19 | category: data-viz |
| 20 | subcategory: bar-chart |
| 21 | tags: [data, chart, bar, rollup, count-up, remotion, native, animated, kpi] |
| 22 | |
| 23 | best_for: |
| 24 | - "A data frame where the numbers should animate, not sit static" |
| 25 | - "Weekly metrics / growth bars driven by real values" |
| 26 | - "Enhancing one data segment of an otherwise hyperframes video" |
| 27 | |
| 28 | not_for: |
| 29 | - "Decorative title cards or brand intros (use a hyperframes template)" |
| 30 | - "Datasets with more than ~7 bars (they get cramped)" |
| 31 | |
| 32 | output: |
| 33 | formats: [mp4, webm] |
| 34 | default_format: mp4 |
| 35 | resolution: |
| 36 | default: { width: 1920, height: 1080 } |
| 37 | supported_aspects: ["16:9", "9:16", "1:1"] |
| 38 | fps: |
| 39 | default: 30 |
| 40 | supported: [30, 60] |
| 41 | duration: |
| 42 | type: variable |
| 43 | min_sec: 3 |
| 44 | max_sec: 8 |
| 45 | alpha: true |
| 46 | audio: |
| 47 | supported: false |
| 48 | expected_inputs: [] |
| 49 | |
| 50 | inputs: |
| 51 | schema: |
| 52 | type: object |
| 53 | required: [data] |
| 54 | properties: |
| 55 | data: |
| 56 | type: object |
| 57 | required: [items] |
| 58 | properties: |
| 59 | title: |
| 60 | type: "string" |
| 61 | maxLength: 48 |
| 62 | description: "Optional heading shown top-left" |
| 63 | unit: |
| 64 | type: "string" |
| 65 | maxLength: 4 |
| 66 | description: "Optional suffix after each rolled number, e.g. K or %" |
| 67 | items: |
| 68 | type: "array" |
| 69 | maxItems: 7 |
| 70 | description: "The bars; each grows to value and rolls 0→value" |
| 71 | items: |
| 72 | type: object |
| 73 | required: [label, value] |
| 74 | properties: |
| 75 | label: { type: "string", maxLength: 16 } |
| 76 | value: { type: "number" } |
| 77 | accent: |
| 78 | type: "string" |
| 79 | description: "Bar + number color (hex). Default #FF5A2C" |
| 80 | background: |
| 81 | type: "string" |
| 82 | description: "Background color (hex). Default #0E0E10" |
| 83 | foreground: |
| 84 | type: "string" |
| 85 | description: "Title / label / baseline color (hex). Default #F5F5F2" |
| 86 | examples: |
| 87 | - {"data": {"title": "This week on GitHub", "items": [{"label": "Mon", "value": 1200}, {"label": "Tue", "value": 2400}, {"label": "Wed", "value": 1800}, {"label": "Thu", "value": 4200}, {"label": "Fri", "value": 3600}]}} |
| 88 | - {"data": {"title": "Stars by month", "unit": "K", "items": [{"label": "Mar", "value": 12}, {"label": "Apr", "value": 28}, {"label": "May", "value": 47}]}, "accent": "#34D399", "background": "#0B1120"} |
| 89 | |
| 90 | license: |
| 91 | spdx: Apache-2.0 |
| 92 | attribution_required: true |
| 93 | redistribution_allowed: true |
| 94 | commercial_use: true |
| 95 | |
| 96 | provenance: |
| 97 | # L1 — no external design lineage; this is an original component. |
| 98 | origin: |
| 99 | name: "none" |
| 100 | kind: none |
| 101 | reference: > |
| 102 | Original work. Standard animated-bar-chart vocabulary (count-up figures, |
| 103 | spring-grown bars) implemented from scratch as React-tsx for Remotion; not |
| 104 | derived from any specific studio or upstream template. |
| 105 | # L2 — no upstream skill; written directly against the Remotion API. |
| 106 | via_skill: |
| 107 | name: "none" |
| 108 | author: "nexu-io" |
| 109 | url: https://github.com/nexu-io/html-video |
| 110 | license: Apache-2.0 |
| 111 | source_file: "(original — packages/adapter-remotion native template, written for html-video)" |
| 112 | # L3 — what this template does |
| 113 | transformation: > |
| 114 | Original Remotion React-tsx composition. Bars grow with spring() on a staggered |
| 115 | per-bar delay; figures roll 0→value via interpolate tracking the same growth |
| 116 | curve so number and bar settle together. All layout is computed off the live |
| 117 | canvas size (useVideoConfig) so 16:9 / 9:16 / 1:1 all render correctly. System |
| 118 | font stack only — no external fonts or assets, keeping the headless render |
| 119 | deterministic and offline-safe. |
| 120 | |
| 121 | author: |
| 122 | name: nexu-io |
| 123 | url: https://github.com/nexu-io |
| 124 | contact: open-design@nexu.io |
| 125 | |
| 126 | version: 0.1.0 |
| 127 | changelog: |
| 128 | - version: 0.1.0 |
| 129 | date: 2026-06-07 |
| 130 | notes: First native Remotion template (RFC-08 Phase 2) — data-driven bar growth + number rollup. |
| 131 | |
| 132 | preview: |
| 133 | poster: preview.png |
| 134 | |
| 135 | performance: |
| 136 | reference_render: |
| 137 | duration_sec: 5 |
| 138 | render_wall_clock_sec: 45 |
| 139 | machine: "M2 MacBook Air" |
| 140 |