{
"id": "project-f7a712ab-3621-4617-afbc-32f132c72be9",
"css": "",
"fps": 30,
"html": "Sunshare · Energy cooperative
Thank you,
Your 2026 certificate is ready
Amira
CO₂ kept out of the air
compared with power from the grid
1.3 t
Clean energy made
by your panels on the cooperative roof
2,940 kWh
Here is your year on the Sunshare roof.
Sunshare · Energy cooperative
Good morning,
Amira
",
"name": "Sunshare · Personal member video",
"width": 1920,
"format": "jsoncut-html",
"height": 1080,
"values": {
"co2": "1.3 t",
"energy": "2,940 kWh",
"memberName": "Amira"
},
"version": 1,
"duration": 12,
"safeArea": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
},
"variables": [
{
"id": "memberName",
"type": "string",
"label": "Member name",
"default": "Amira"
},
{
"id": "energy",
"type": "string",
"label": "Energy made",
"default": "2,940 kWh"
},
{
"id": "co2",
"type": "string",
"label": "CO₂ saved",
"default": "1.3 t"
}
],
"customBlocks": [
{
"inputs": {
"seed": 1
},
"adapter": "canvas-2d",
"layerId": "custom-1",
"javascript": "// One day over the cooperative's roof: the sky turns from dawn to noon to dusk, the sun travels its arc on the right,\n// the panels catch the light when it is high. Every frame comes from the time alone (seek-safe).\nconst ctx = context;\nconst mix = (a, b, v) => a + (b - a) * v;\nconst hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst col = (a, b, v) => { const x = hex(a), y = hex(b); return `rgb(${x.map((c, i) => Math.round(mix(c, y[i], v))).join(',')})`; };\n// sky keys: time, top, horizon\nconst SKY = [[0, '#1E2A4A', '#E9A27C'], [4.4, '#5089C4', '#F5D3A8'], [8, '#5089C4', '#F7DDB8'], [12, '#2A2142', '#EE8A4E']];\nconst at = (t, i) => { for (let s = 0; s < SKY.length - 1; s++) { const [a, ...ca] = SKY[s], [b, ...cb] = SKY[s + 1]; if (t <= b) { const v = jsoncut.ease('ease-in-out', (t - a) / (b - a)); return col(ca[i], cb[i], v); } } return SKY.at(-1)[i + 1]; };\njsoncut.onFrame(() => {\n const W = jsoncut.width, H = jsoncut.height, t = Math.max(0, Math.min(12, jsoncut.time));\n const horizon = H * 0.74;\n const sky = ctx.createLinearGradient(0, 0, 0, horizon);\n sky.addColorStop(0, at(t, 0)); sky.addColorStop(1, at(t, 1));\n ctx.fillStyle = sky; ctx.fillRect(0, 0, W, horizon);\n // the sun on its arc over the right half\n const p = t / 12, a = Math.PI * (1.12 + 0.76 * p), cx = W * 0.77, cy = horizon + 30, r = H * 0.5;\n const sx = cx + Math.cos(a) * r, sy = cy + Math.sin(a) * r;\n const glow = ctx.createRadialGradient(sx, sy, 0, sx, sy, 260);\n glow.addColorStop(0, 'rgba(255,236,190,0.75)'); glow.addColorStop(1, 'rgba(255,236,190,0)');\n ctx.fillStyle = glow; ctx.fillRect(sx - 260, sy - 260, 520, 520);\n ctx.fillStyle = '#FFF4D6'; ctx.beginPath(); ctx.arc(sx, sy, 54, 0, Math.PI * 2); ctx.fill();\n // ground and the roof line\n ctx.fillStyle = col('#1A1C26', '#2B2A33', Math.sin(Math.PI * p)); ctx.fillRect(0, horizon, W, H - horizon);\n // eight panels in a row, slightly in perspective\n const high = Math.max(0, Math.sin(Math.PI * p));\n for (let row = 0; row < 2; row++) for (let i = 0; i < 7; i++) {\n const w = 132 + row * 18, h = 78 + row * 14, skew = 30 + row * 8, x = W * 0.5 + i * (w + 16) - row * 40, y = horizon + 34 + row * (h + 18);\n ctx.beginPath(); ctx.moveTo(x + skew, y); ctx.lineTo(x + w + skew, y); ctx.lineTo(x + w, y + h); ctx.lineTo(x, y + h); ctx.closePath();\n ctx.fillStyle = col('#1F3B63', '#3A6FB0', high * 0.8); ctx.fill();\n ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 2; ctx.stroke();\n // the glint runs across the row while the sun is high\n const g = ((t * 0.45 - i * 0.07 - row * 0.05) % 1 + 1) % 1, glint = Math.max(0, 1 - Math.abs(g - 0.5) * 6) * high;\n if (glint > 0.01) { ctx.fillStyle = `rgba(255,245,220,${0.55 * glint})`; ctx.fill(); }\n }\n});\n"
}
],
"aspectVariants": [],
"compositionKind": "video",
"canvasBackground": "#000000"
}