{ "id": "opus-showcase-02-four-seasons", "css": "", "fps": 30, "html": "
THE LONG WAY ROUND
SPRING
SUMMER
AUTUMN
WINTER
", "name": "Four seasons ยท Night train window", "width": 1920, "format": "jsoncut-html", "height": 1080, "values": {}, "version": 1, "duration": 20, "safeArea": { "top": 0, "left": 0, "right": 0, "bottom": 0 }, "variables": [], "customBlocks": [ { "inputs": { "fall": 55, "kind": "petal", "seed": 3, "size": 9, "wind": -170, "count": 46, "colors": [ "#F7B6CA", "#FBD3DF", "#FFFFFF" ] }, "adapter": "canvas-2d", "layerId": "custom-1", "javascript": "// Own weather particles (petals, pollen, leaves, snow). Deterministic: every value derives from jsoncut.time.\nconst ctx = context, W = width, H = height, p = jsoncut.inputs;\nconst hash = n => { const x = Math.sin(n * 127.1 + (p.seed || 1) * 311.7) * 43758.5453; return x - Math.floor(x); };\nconst wrap = (v, m) => ((v % m) + m) % m;\nconst cols = p.colors || ['#FFFFFF'], N = p.count || 60, kind = p.kind || 'snow';\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n ctx.clearRect(0, 0, W, H);\n for (let i = 0; i < N; i++) {\n const a = hash(i), b = hash(i + 99), c = hash(i + 199), d = hash(i + 299);\n const depth = .35 + .65 * c, s = (p.size || 8) * depth;\n let x = wrap(a * (W + 240) + t * (p.wind || -120) * depth, W + 240) - 120;\n let y = wrap(b * (H + 120) + t * (p.fall || 60) * depth, H + 120) - 60;\n x += Math.sin(t * (1 + d) + i) * 22 * depth;\n ctx.save();\n ctx.translate(x, y);\n ctx.globalAlpha = (.5 + .5 * depth) * (p.alpha || 1);\n ctx.fillStyle = cols[i % cols.length];\n if (kind === 'petal') {\n ctx.rotate(t * (1 + d * 2) + i);\n ctx.scale(1, .45 + .55 * Math.abs(Math.sin(t * 3 + i)));\n ctx.beginPath(); ctx.ellipse(0, 0, s, s * .62, 0, 0, 6.283); ctx.fill();\n } else if (kind === 'leaf') {\n ctx.rotate(t * (1.4 + d * 2) + i);\n ctx.scale(.25 + .75 * Math.abs(Math.sin(t * 2.4 + i)), 1);\n ctx.beginPath(); ctx.moveTo(0, -s); ctx.quadraticCurveTo(s * .9, 0, 0, s); ctx.quadraticCurveTo(-s * .9, 0, 0, -s); ctx.fill();\n ctx.strokeStyle = 'rgba(80,30,10,.45)'; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.moveTo(0, -s); ctx.lineTo(0, s); ctx.stroke();\n } else {\n const twinkle = kind === 'pollen' ? .6 + .4 * Math.sin(t * 4 + i * 1.7) : 1;\n if (kind === 'pollen') { ctx.globalAlpha *= .22 * twinkle; ctx.beginPath(); ctx.arc(0, 0, s * 1.8, 0, 6.283); ctx.fill(); ctx.globalAlpha /= .22; }\n ctx.beginPath(); ctx.arc(0, 0, s * .5, 0, 6.283); ctx.fill();\n }\n ctx.restore();\n }\n});\n" }, { "inputs": { "fall": -14, "kind": "pollen", "seed": 5, "size": 7, "wind": -90, "alpha": 0.9, "count": 40, "colors": [ "#FFF4C2", "#FFE27A" ] }, "adapter": "canvas-2d", "layerId": "custom-2", "javascript": "// Own weather particles (petals, pollen, leaves, snow). Deterministic: every value derives from jsoncut.time.\nconst ctx = context, W = width, H = height, p = jsoncut.inputs;\nconst hash = n => { const x = Math.sin(n * 127.1 + (p.seed || 1) * 311.7) * 43758.5453; return x - Math.floor(x); };\nconst wrap = (v, m) => ((v % m) + m) % m;\nconst cols = p.colors || ['#FFFFFF'], N = p.count || 60, kind = p.kind || 'snow';\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n ctx.clearRect(0, 0, W, H);\n for (let i = 0; i < N; i++) {\n const a = hash(i), b = hash(i + 99), c = hash(i + 199), d = hash(i + 299);\n const depth = .35 + .65 * c, s = (p.size || 8) * depth;\n let x = wrap(a * (W + 240) + t * (p.wind || -120) * depth, W + 240) - 120;\n let y = wrap(b * (H + 120) + t * (p.fall || 60) * depth, H + 120) - 60;\n x += Math.sin(t * (1 + d) + i) * 22 * depth;\n ctx.save();\n ctx.translate(x, y);\n ctx.globalAlpha = (.5 + .5 * depth) * (p.alpha || 1);\n ctx.fillStyle = cols[i % cols.length];\n if (kind === 'petal') {\n ctx.rotate(t * (1 + d * 2) + i);\n ctx.scale(1, .45 + .55 * Math.abs(Math.sin(t * 3 + i)));\n ctx.beginPath(); ctx.ellipse(0, 0, s, s * .62, 0, 0, 6.283); ctx.fill();\n } else if (kind === 'leaf') {\n ctx.rotate(t * (1.4 + d * 2) + i);\n ctx.scale(.25 + .75 * Math.abs(Math.sin(t * 2.4 + i)), 1);\n ctx.beginPath(); ctx.moveTo(0, -s); ctx.quadraticCurveTo(s * .9, 0, 0, s); ctx.quadraticCurveTo(-s * .9, 0, 0, -s); ctx.fill();\n ctx.strokeStyle = 'rgba(80,30,10,.45)'; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.moveTo(0, -s); ctx.lineTo(0, s); ctx.stroke();\n } else {\n const twinkle = kind === 'pollen' ? .6 + .4 * Math.sin(t * 4 + i * 1.7) : 1;\n if (kind === 'pollen') { ctx.globalAlpha *= .22 * twinkle; ctx.beginPath(); ctx.arc(0, 0, s * 1.8, 0, 6.283); ctx.fill(); ctx.globalAlpha /= .22; }\n ctx.beginPath(); ctx.arc(0, 0, s * .5, 0, 6.283); ctx.fill();\n }\n ctx.restore();\n }\n});\n" }, { "inputs": { "fall": 80, "kind": "snow", "seed": 9, "size": 7, "wind": -160, "count": 110, "colors": [ "#FFFFFF", "#E6ECFF" ] }, "adapter": "canvas-2d", "layerId": "custom-4", "javascript": "// Own weather particles (petals, pollen, leaves, snow). Deterministic: every value derives from jsoncut.time.\nconst ctx = context, W = width, H = height, p = jsoncut.inputs;\nconst hash = n => { const x = Math.sin(n * 127.1 + (p.seed || 1) * 311.7) * 43758.5453; return x - Math.floor(x); };\nconst wrap = (v, m) => ((v % m) + m) % m;\nconst cols = p.colors || ['#FFFFFF'], N = p.count || 60, kind = p.kind || 'snow';\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n ctx.clearRect(0, 0, W, H);\n for (let i = 0; i < N; i++) {\n const a = hash(i), b = hash(i + 99), c = hash(i + 199), d = hash(i + 299);\n const depth = .35 + .65 * c, s = (p.size || 8) * depth;\n let x = wrap(a * (W + 240) + t * (p.wind || -120) * depth, W + 240) - 120;\n let y = wrap(b * (H + 120) + t * (p.fall || 60) * depth, H + 120) - 60;\n x += Math.sin(t * (1 + d) + i) * 22 * depth;\n ctx.save();\n ctx.translate(x, y);\n ctx.globalAlpha = (.5 + .5 * depth) * (p.alpha || 1);\n ctx.fillStyle = cols[i % cols.length];\n if (kind === 'petal') {\n ctx.rotate(t * (1 + d * 2) + i);\n ctx.scale(1, .45 + .55 * Math.abs(Math.sin(t * 3 + i)));\n ctx.beginPath(); ctx.ellipse(0, 0, s, s * .62, 0, 0, 6.283); ctx.fill();\n } else if (kind === 'leaf') {\n ctx.rotate(t * (1.4 + d * 2) + i);\n ctx.scale(.25 + .75 * Math.abs(Math.sin(t * 2.4 + i)), 1);\n ctx.beginPath(); ctx.moveTo(0, -s); ctx.quadraticCurveTo(s * .9, 0, 0, s); ctx.quadraticCurveTo(-s * .9, 0, 0, -s); ctx.fill();\n ctx.strokeStyle = 'rgba(80,30,10,.45)'; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.moveTo(0, -s); ctx.lineTo(0, s); ctx.stroke();\n } else {\n const twinkle = kind === 'pollen' ? .6 + .4 * Math.sin(t * 4 + i * 1.7) : 1;\n if (kind === 'pollen') { ctx.globalAlpha *= .22 * twinkle; ctx.beginPath(); ctx.arc(0, 0, s * 1.8, 0, 6.283); ctx.fill(); ctx.globalAlpha /= .22; }\n ctx.beginPath(); ctx.arc(0, 0, s * .5, 0, 6.283); ctx.fill();\n }\n ctx.restore();\n }\n});\n" }, { "inputs": {}, "adapter": "canvas-2d", "layerId": "custom-5", "javascript": "// Own tea steam: three soft wisps rising and fading in a loop, derived from jsoncut.time.\nconst ctx = context, W = width, H = height;\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n ctx.clearRect(0, 0, W, H);\n ctx.lineCap = 'round';\n for (let k = 0; k < 3; k++) {\n const ph = (t * .32 + k / 3) % 1;\n const alpha = Math.sin(ph * Math.PI) * .55;\n const baseX = W / 2 + (k - 1) * 18;\n for (const [lw, la] of [[16, .18], [7, .5]]) {\n ctx.strokeStyle = `rgba(255,255,255,${alpha * la})`;\n ctx.lineWidth = lw * (1 - ph * .5);\n ctx.beginPath();\n for (let s = 0; s <= 24; s++) {\n const u = s / 24;\n const y = H - 10 - (u * .55 + ph * .45) * (H - 20);\n const x = baseX + Math.sin(u * 6 + t * 1.6 + k * 2) * (8 + u * 22);\n s ? ctx.lineTo(x, y) : ctx.moveTo(x, y);\n }\n ctx.stroke();\n }\n }\n});\n" }, { "inputs": { "fall": 95, "kind": "leaf", "seed": 7, "size": 22, "wind": -230, "count": 42, "colors": [ "#E07A2F", "#C2412D", "#E8B33C" ] }, "adapter": "canvas-2d", "layerId": "custom-3", "javascript": "// Own weather particles (petals, pollen, leaves, snow). Deterministic: every value derives from jsoncut.time.\nconst ctx = context, W = width, H = height, p = jsoncut.inputs;\nconst hash = n => { const x = Math.sin(n * 127.1 + (p.seed || 1) * 311.7) * 43758.5453; return x - Math.floor(x); };\nconst wrap = (v, m) => ((v % m) + m) % m;\nconst cols = p.colors || ['#FFFFFF'], N = p.count || 60, kind = p.kind || 'snow';\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n ctx.clearRect(0, 0, W, H);\n for (let i = 0; i < N; i++) {\n const a = hash(i), b = hash(i + 99), c = hash(i + 199), d = hash(i + 299);\n const depth = .35 + .65 * c, s = (p.size || 8) * depth;\n let x = wrap(a * (W + 240) + t * (p.wind || -120) * depth, W + 240) - 120;\n let y = wrap(b * (H + 120) + t * (p.fall || 60) * depth, H + 120) - 60;\n x += Math.sin(t * (1 + d) + i) * 22 * depth;\n ctx.save();\n ctx.translate(x, y);\n ctx.globalAlpha = (.5 + .5 * depth) * (p.alpha || 1);\n ctx.fillStyle = cols[i % cols.length];\n if (kind === 'petal') {\n ctx.rotate(t * (1 + d * 2) + i);\n ctx.scale(1, .45 + .55 * Math.abs(Math.sin(t * 3 + i)));\n ctx.beginPath(); ctx.ellipse(0, 0, s, s * .62, 0, 0, 6.283); ctx.fill();\n } else if (kind === 'leaf') {\n ctx.rotate(t * (1.4 + d * 2) + i);\n ctx.scale(.25 + .75 * Math.abs(Math.sin(t * 2.4 + i)), 1);\n ctx.beginPath(); ctx.moveTo(0, -s); ctx.quadraticCurveTo(s * .9, 0, 0, s); ctx.quadraticCurveTo(-s * .9, 0, 0, -s); ctx.fill();\n ctx.strokeStyle = 'rgba(80,30,10,.45)'; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.moveTo(0, -s); ctx.lineTo(0, s); ctx.stroke();\n } else {\n const twinkle = kind === 'pollen' ? .6 + .4 * Math.sin(t * 4 + i * 1.7) : 1;\n if (kind === 'pollen') { ctx.globalAlpha *= .22 * twinkle; ctx.beginPath(); ctx.arc(0, 0, s * 1.8, 0, 6.283); ctx.fill(); ctx.globalAlpha /= .22; }\n ctx.beginPath(); ctx.arc(0, 0, s * .5, 0, 6.283); ctx.fill();\n }\n ctx.restore();\n }\n});\n" } ], "aspectVariants": [], "compositionKind": "video", "canvasBackground": "#000000", "editabilityTarget": "layered" }