{
"id": "project-928612b9-0045-4b21-b42e-6f66978f8e7f",
"css": "",
"fps": 30,
"html": "ritmo
Your 2026,
in habits.
Lena
Longest streak
days in a row
142
Your top habit
52 weeks, one ring.
Morning run
minutes moved
4,820
ritmo
ritmo · 2026
Share your year
4,820
Minutes moved
Morning run
Top habit
142
Days in a row
Lena
",
"name": "Ritmo · In-app year recap",
"width": 1080,
"format": "jsoncut-html",
"height": 1920,
"values": {
"streak": "142",
"minutes": "4,820",
"topHabit": "Morning run",
"userName": "Lena"
},
"version": 1,
"duration": 12,
"safeArea": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
},
"variables": [
{
"id": "userName",
"type": "string",
"label": "User name",
"default": "Lena"
},
{
"id": "streak",
"type": "string",
"label": "Longest streak (days)",
"default": "142"
},
{
"id": "topHabit",
"type": "string",
"label": "Top habit",
"default": "Morning run"
},
{
"id": "minutes",
"type": "string",
"label": "Minutes moved",
"default": "4,820"
}
],
"customBlocks": [
{
"inputs": {
"bar": "#F3EEE4",
"best": "#15120E"
},
"adapter": "canvas-2d",
"layerId": "custom-1",
"javascript": "// Twelve month bars grow from the baseline one after another, the best month in ink. A pure function of time.\nconst ctx = context;\nconst HEIGHTS = [0.36, 0.48, 0.42, 0.6, 0.72, 0.66, 0.84, 0.94, 0.78, 0.88, 1, 0.92];\njsoncut.onFrame(() => {\n const W = jsoncut.width, H = jsoncut.height, t = jsoncut.time;\n const bar = String(jsoncut.inputs.bar ?? '#F3EEE4'), best = String(jsoncut.inputs.best ?? '#15120E');\n ctx.clearRect(0, 0, W, H);\n const n = 12, gap = 24, bw = (W - gap * (n - 1)) / n, base = H - 70, top = 20, peak = HEIGHTS.indexOf(1);\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = '700 32px \"Plus Jakarta Sans\", sans-serif';\n for (let i = 0; i < n; i++) {\n const p = jsoncut.ease('cubic-bezier(0.16,1,0.3,1)', Math.max(0, Math.min(1, (t - 0.15 - i * 0.05) / 0.55)));\n const h = Math.max(bw, (base - top) * HEIGHTS[i] * p), x = i * (bw + gap);\n ctx.globalAlpha = Math.min(1, p * 4);\n ctx.fillStyle = i === peak ? best : bar;\n ctx.beginPath(); ctx.roundRect(x, base - h, bw, h, bw / 2); ctx.fill();\n ctx.globalAlpha = Math.min(0.8, p * 3);\n ctx.fillStyle = bar; ctx.fillText('JFMAMJJASOND'[i], x + bw / 2, base + 42);\n }\n ctx.globalAlpha = 1;\n});\n"
},
{
"inputs": {
"accent": "#FF5A36"
},
"adapter": "canvas-2d",
"layerId": "custom-2",
"javascript": "// The year as a ring: 52 week ticks light up as the arc sweeps once around. A pure function of time (seek-safe).\nconst ctx = context;\njsoncut.onFrame(() => {\n const W = jsoncut.width, H = jsoncut.height, t = jsoncut.time;\n const p = jsoncut.ease('ease-in-out', Math.max(0, Math.min(1, (t - 0.3) / 1.7)));\n ctx.clearRect(0, 0, W, H);\n const cx = W / 2, cy = H / 2, r = Math.min(W, H) / 2 - 40, line = 46;\n ctx.lineCap = 'round';\n ctx.lineWidth = line; ctx.strokeStyle = 'rgba(243,238,228,0.10)';\n ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();\n for (let i = 0; i < 52; i++) {\n const a = -Math.PI / 2 + (i + 0.5) / 52 * Math.PI * 2, lit = (i + 0.5) / 52 < p;\n ctx.strokeStyle = lit ? 'rgba(169,194,166,0.95)' : 'rgba(243,238,228,0.16)'; ctx.lineWidth = 6;\n ctx.beginPath(); ctx.moveTo(cx + Math.cos(a) * (r - 62), cy + Math.sin(a) * (r - 62)); ctx.lineTo(cx + Math.cos(a) * (r - 88), cy + Math.sin(a) * (r - 88)); ctx.stroke();\n }\n if (p > 0.001) {\n ctx.lineWidth = line; ctx.strokeStyle = String(jsoncut.inputs.accent ?? '#FF5A36');\n const end = -Math.PI / 2 + Math.PI * 2 * p;\n ctx.beginPath(); ctx.arc(cx, cy, r, -Math.PI / 2, end); ctx.stroke();\n ctx.fillStyle = 'rgba(255,255,255,0.9)';\n ctx.beginPath(); ctx.arc(cx + Math.cos(end) * r, cy + Math.sin(end) * r, line * 0.2, 0, Math.PI * 2); ctx.fill();\n }\n});\n"
}
],
"aspectVariants": [],
"compositionKind": "video",
"canvasBackground": "#000000"
}