{
"id": "opus-showcase-04-paper-civilization",
"css": "",
"fps": 30,
"html": "Long ago · Fire
3500 BC · The wheel
3200 BC · Writing
1440 · Printing
1804 · Steam
1879 · Light
1958 · The chip
What will we fold next?
",
"name": "Paper Civilisation · From fire to flight",
"width": 1920,
"format": "jsoncut-html",
"height": 1080,
"values": {},
"version": 1,
"duration": 30,
"safeArea": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
},
"variables": [],
"customBlocks": [
{
"inputs": {
"seed": 4
},
"adapter": "canvas-2d",
"layerId": "custom-1",
"javascript": "// Paper civilisation: a pop-up paper diorama the camera travels through. Every frame derives from jsoncut.time.\nconst ctx = context, W = width, H = height, GROUND = 770, STEP = 1500;\nconst C = { kraft: '#C8A27A', kraftDark: '#A57E57', cream: '#F3E6CF', indigo: '#2C3E73', deep: '#1E2A52', red: '#E2432A',\n mustard: '#E9B44C', teal: '#3E8A86', ink: '#2A2522', brown: '#7A4B2A' };\nconst clamp = v => Math.max(0, Math.min(1, v));\nconst span = (t, a, b) => clamp((t - a) / (b - a));\nconst inOut = v => { v = clamp(v); return v < .5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2; };\nconst outBack = v => { v = clamp(v); const c = 1.9; return 1 + (c + 1) * Math.pow(v - 1, 3) + c * Math.pow(v - 1, 2); };\nconst hash = n => { const q = Math.sin(n * 91.7 + 13.1) * 43758.5453; return q - Math.floor(q); };\nconst hex = h => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];\nconst mixC = (a, b, v) => { const A = hex(a), B = hex(b); return `rgb(${A.map((x, i) => Math.round(x + (B[i] - x) * v)).join(',')})`; };\n\n// paper grain texture, generated once and deterministically\nconst grain = document.createElement('canvas'); grain.width = grain.height = 256;\n{ const g = grain.getContext('2d'); for (let i = 0; i < 9000; i++) { const v = hash(i * 1.7); g.fillStyle = v > .5 ? 'rgba(255,255,255,.5)' : 'rgba(60,35,10,.5)'; g.fillRect(hash(i * 3.3) * 256, hash(i * 5.1) * 256, 1.2, 1.2); } }\nconst grainPattern = ctx.createPattern(grain, 'repeat');\n\nfunction paper(draw, fill, depth = 1) {\n ctx.save();\n ctx.shadowColor = 'rgba(45,25,10,.38)'; ctx.shadowBlur = 10 * depth; ctx.shadowOffsetY = 5 * depth; ctx.shadowOffsetX = 2 * depth;\n ctx.fillStyle = fill; ctx.beginPath(); draw(); ctx.fill();\n ctx.restore();\n ctx.save(); ctx.strokeStyle = 'rgba(255,250,235,.18)'; ctx.lineWidth = 1.5; ctx.beginPath(); draw(); ctx.stroke(); ctx.restore();\n}\nconst rect = (x, y, w, h) => () => ctx.rect(x, y, w, h);\nconst circ = (x, y, r) => () => ctx.arc(x, y, Math.max(0, r), 0, 6.2832);\nconst poly = pts => () => { pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y)); ctx.closePath(); };\n\n// pop-up hinge at the ground line\nfunction popup(x, t0, t, fn) {\n const p = outBack(span(t, t0, t0 + .65));\n if (p <= .001) return;\n ctx.save(); ctx.translate(x, GROUND); ctx.scale(1.32, 1.32 * p); fn(); ctx.restore();\n}\n\n// camera: hold at each station, glide between them\nfunction camX(t) {\n let x = 0;\n for (let i = 1; i <= 6; i++) x += STEP * inOut(span(t, i * 4 - .9, i * 4 + .35));\n return x + Math.sin(t * .4) * 18;\n}\nconst SKY = [[C.deep, C.indigo], [C.red, C.mustard], [C.cream, '#EED9B5'], ['#F6E7C9', C.cream], [C.mustard, '#F1D08A'], [C.red, C.indigo], [C.deep, C.indigo]];\n\nfunction person(x, y, s, col) {\n paper(circ(x, y - 64 * s, 14 * s), col, .6);\n paper(poly([[x - 18 * s, y], [x + 18 * s, y], [x + 10 * s, y - 50 * s], [x - 10 * s, y - 50 * s]]), col, .6);\n}\n\nconst stations = [\n // 0 · fire\n (t, T) => {\n paper(rect(-70, -18, 140, 18), C.brown, .8);\n paper(poly([[-80, -6], [70, -30], [76, -16], [-74, 8]]), C.brown, .8);\n const f = 1 + .08 * Math.sin(t * 13) + .05 * Math.sin(t * 7.3);\n const flame = (s, col) => paper(() => { ctx.moveTo(-46 * s, -20); ctx.quadraticCurveTo(-52 * s, -110 * s * f, 0, -190 * s * f); ctx.quadraticCurveTo(52 * s, -110 * s * f, 46 * s, -20); ctx.closePath(); }, col, .9);\n ctx.save(); ctx.globalCompositeOperation = 'lighter';\n const g = ctx.createRadialGradient(0, -90, 10, 0, -90, 380); g.addColorStop(0, 'rgba(255,170,60,.35)'); g.addColorStop(1, 'rgba(255,120,40,0)');\n ctx.fillStyle = g; ctx.fillRect(-380, -470, 760, 760); ctx.restore();\n flame(1, C.red); flame(.68, C.mustard); flame(.36, C.cream);\n for (let i = 0; i < 12; i++) { const ph = (t * .6 + hash(i)) % 1; paper(rect(-30 + hash(i + 9) * 60 + Math.sin(t * 3 + i) * 14, -180 - ph * 260, 6, 6), C.mustard, .3); }\n person(-230, 0, 1.2, C.ink); person(230, 0, 1.1, C.ink);\n },\n // 1 · wheel\n (t, T) => {\n const x = -260 + clamp((t - T - .4) / 3.6) * 420, rot = (x + 260) / 46;\n paper(rect(x - 150, -150, 300, 80), C.teal, 1);\n paper(rect(x - 170, -170, 340, 22), C.brown, 1);\n for (const wx of [x - 95, x + 95]) {\n paper(circ(wx, -52, 52), C.brown, 1);\n ctx.save(); ctx.translate(wx, -52); ctx.rotate(rot); ctx.strokeStyle = C.cream; ctx.lineWidth = 6;\n for (let s = 0; s < 6; s++) { ctx.rotate(Math.PI / 3); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 42); ctx.stroke(); }\n ctx.restore(); paper(circ(wx, -52, 10), C.mustard, .4);\n }\n person(x + 230, 0, 1, C.indigo);\n },\n // 2 · writing\n (t, T) => {\n paper(() => ctx.roundRect(-330, -330, 240, 310, 24), C.kraftDark, 1.1);\n const marks = Math.floor(clamp((t - T - .5) / 2.6) * 24);\n for (let i = 0; i < marks; i++) { const r = Math.floor(i / 4), c = i % 4; const x = -300 + c * 52, y = -295 + r * 46;\n paper(poly([[x, y], [x + 26, y + 8], [x, y + 16]]), C.ink, .2); }\n const u = inOut(span(t, T + 1.2, T + 3));\n paper(rect(-20, -300, 40 + 330 * u, 250), C.cream, 1);\n paper(circ(-20, -175, 26), C.brown, .6); paper(circ(20 + 330 * u, -175, 26), C.brown, .6);\n ctx.strokeStyle = C.indigo; ctx.lineWidth = 5;\n for (let l = 0; l < 6; l++) { const lw = Math.max(0, Math.min(1, u * 6 - l)) * 260; if (lw > 0) { ctx.beginPath(); ctx.moveTo(40, -265 + l * 36); ctx.lineTo(40 + lw, -265 + l * 36); ctx.stroke(); } }\n },\n // 3 · printing press\n (t, T) => {\n paper(rect(-190, -360, 40, 360), C.indigo, 1.1); paper(rect(150, -360, 40, 360), C.indigo, 1.1);\n paper(rect(-210, -390, 420, 50), C.deep, 1.1);\n const press = Math.max(0, Math.sin((t - T) * 3.2));\n paper(rect(-15, -340, 30, 60 + press * 90), C.mustard, .6);\n paper(rect(-130, -280 + press * 90, 260, 34), C.red, .9);\n paper(rect(-150, -110, 300, 30), C.brown, 1);\n for (let i = 0; i < 6; i++) {\n const ph = ((t - T) * .55 - i * .17); if (ph < 0 || ph > 1) continue;\n const x = 120 + ph * 520, y = -140 - Math.sin(ph * Math.PI) * 300;\n ctx.save(); ctx.translate(x, y); ctx.rotate(ph * 2.4 + i);\n paper(rect(-50, -34, 100, 68), C.cream, .7);\n ctx.fillStyle = C.ink; for (let l = 0; l < 4; l++) ctx.fillRect(-36, -20 + l * 13, 72 - (l % 2) * 20, 5);\n ctx.restore();\n }\n },\n // 4 · steam\n (t, T) => {\n ctx.fillStyle = C.brown; ctx.fillRect(-900, -12, 1800, 8);\n for (let i = -8; i < 9; i++) ctx.fillRect(i * 100, -8, 26, 8);\n const x = -200 + clamp((t - T - .3) / 3.7) * 300;\n paper(rect(x - 220, -170, 300, 120), C.indigo, 1.1);\n paper(rect(x + 80, -240, 130, 190), C.red, 1.1);\n paper(rect(x + 70, -260, 150, 26), C.deep, .8);\n paper(rect(x - 170, -250, 46, 84), C.deep, .9);\n for (const wx of [x - 160, x - 40, x + 100, x + 170]) paper(circ(wx, -40, wx > x + 60 ? 40 : 30), C.ink, .9);\n for (let i = 0; i < 9; i++) {\n const ph = (((t - T) * .7 + i / 9) % 1 + 1) % 1, r = 18 + ph * 60;\n ctx.save(); ctx.globalAlpha = .9 * (1 - ph);\n paper(circ(x - 147 - ph * 160, -270 - ph * 230 + Math.sin(i) * 10, r), C.cream, .4);\n ctx.restore();\n }\n },\n // 5 · electric light\n (t, T) => {\n for (const px of [-560, 0, 560]) paper(rect(px - 10, -420, 20, 420), C.brown, .8);\n ctx.strokeStyle = C.ink; ctx.lineWidth = 4;\n for (const [a, b] of [[-560, 0], [0, 560]]) { ctx.beginPath(); ctx.moveTo(a, -400); ctx.quadraticCurveTo((a + b) / 2, -330, b, -400); ctx.stroke(); }\n const on = span(t, T + 1, T + 1.3);\n for (let h = 0; h < 4; h++) {\n const hx = -520 + h * 300 + (h > 1 ? 120 : 0);\n paper(rect(hx - 70, -150, 140, 150), h % 2 ? C.teal : C.indigo, 1);\n paper(poly([[hx - 90, -150], [hx, -230], [hx + 90, -150]]), C.red, 1);\n const lit = span(t, T + 1.3 + h * .35, T + 1.5 + h * .35);\n paper(rect(hx - 22, -110, 44, 44), mixC(C.deep, C.mustard, lit), .3);\n }\n ctx.save(); ctx.translate(0, -455);\n if (on > 0) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; const g = ctx.createRadialGradient(0, 0, 20, 0, 0, 420);\n g.addColorStop(0, `rgba(255,220,120,${.55 * on})`); g.addColorStop(1, 'rgba(255,200,90,0)'); ctx.fillStyle = g; ctx.fillRect(-420, -420, 840, 840); ctx.restore(); }\n paper(circ(0, 0, 90), mixC('#E8DCC3', '#FFF4CF', on), 1.1);\n paper(rect(-40, 80, 80, 56), C.ink, .8);\n ctx.strokeStyle = mixC(C.brown, C.red, on); ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-26, 60); ctx.lineTo(-14, -10); ctx.lineTo(0, 20); ctx.lineTo(14, -10); ctx.lineTo(26, 60); ctx.stroke();\n ctx.restore();\n },\n // 6 · the chip hatches a paper bird\n (t, T) => {\n const pulse = (t - T) * 1.4;\n ctx.lineWidth = 8; ctx.lineCap = 'round';\n for (let i = 0; i < 10; i++) {\n const a = (i / 10) * 6.283, len = 360 + (i % 3) * 120, x2 = Math.cos(a) * len, y2 = -260 + Math.sin(a) * len * .55;\n ctx.strokeStyle = C.teal; ctx.beginPath(); ctx.moveTo(0, -260); ctx.lineTo(x2, -260); ctx.lineTo(x2, y2); ctx.stroke();\n const q = (pulse + i * .13) % 1; const px = q < .5 ? x2 * q * 2 : x2, py = q < .5 ? -260 : -260 + (y2 + 260) * (q - .5) * 2;\n paper(circ(px, py, 9), C.mustard, .3);\n }\n const crack = inOut(span(t, T + 2.3, T + 3));\n for (const side of [-1, 1]) {\n ctx.save(); ctx.translate(side * crack * 120, crack * 40); ctx.rotate(side * crack * .35);\n paper(() => { ctx.moveTo(0, -400); ctx.lineTo(side * 140, -400); ctx.lineTo(side * 140, -120); ctx.lineTo(0, -120);\n for (let z = 0; z <= 6; z++) ctx.lineTo(z % 2 ? 16 : -16, -120 - z * 46.7); ctx.closePath(); }, C.deep, 1.2);\n for (let p = 0; p < 5; p++) { paper(rect(side * 140, -380 + p * 56, side * 26, 16), C.mustard, .3); }\n ctx.restore();\n }\n const fly = span(t, T + 2.7, T + 6);\n if (fly > 0) {\n const bx = fly * 400, by = -300 - fly * 90 + Math.sin(fly * 6) * 20, s = .4 + outBack(span(t, T + 2.7, T + 3.4)) * .9;\n const flap = Math.sin((t - T) * 9) * .55;\n ctx.save(); ctx.translate(bx, by); ctx.scale(s, s);\n paper(poly([[-120, 10], [0, -20], [130, -60], [30, 30]]), C.red, 1);\n paper(poly([[0, -20], [-20 + flap * 20, -150 + flap * 120], [40, 0]]), '#F06A4E', 1);\n paper(poly([[10, 0], [-80, -120 - flap * 90], [50, -10]]), C.red, 1);\n paper(poly([[130, -60], [150, -110], [160, -70]]), C.red, .6);\n ctx.restore();\n }\n },\n];\n\njsoncut.onFrame(() => {\n const t = jsoncut.time, cam = camX(t), u = Math.min(6, Math.max(0, cam / STEP));\n const i0 = Math.floor(u), f = inOut(u - i0), i1 = Math.min(6, i0 + 1);\n // sky\n const sky = ctx.createLinearGradient(0, 0, 0, GROUND);\n sky.addColorStop(0, mixC(SKY[i0][0], SKY[i1][0], f)); sky.addColorStop(1, mixC(SKY[i0][1], SKY[i1][1], f));\n ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H);\n // stars on night stations\n const night = Math.max(1 - u, 0) + Math.max(u - 5, 0);\n if (night > .02) for (let s = 0; s < 60; s++) { ctx.fillStyle = `rgba(243,230,207,${night * (.4 + .6 * hash(s + 1))})`;\n const x = ((hash(s * 2.1) * 2600 - cam * .05) % 2600 + 2600) % 2600 - 300; ctx.fillRect(x, hash(s * 4.7) * 480, 4, 4); }\n // paper sun / moon disc\n paper(circ(1700 - cam * .03, 160, 64), mixC(u < 1 || u > 5 ? C.cream : C.mustard, C.cream, night), .8);\n // parallax paper hills\n const hills = [[.25, 540, 70, .0025, mixC('#8C6E52', '#6D5A6E', night)], [.55, 610, 55, .004, mixC(C.kraftDark, '#4B4A6B', night)], [1, 690, 34, .006, mixC(C.kraft, '#3B4672', night * .8)]];\n for (const [fac, base, amp, fr, col] of hills) {\n paper(() => { ctx.moveTo(-20, H); for (let x = -20; x <= W + 20; x += 20) ctx.lineTo(x, base + Math.sin((x + cam * fac) * fr) * amp + Math.sin((x + cam * fac) * fr * 2.7) * amp * .3); ctx.lineTo(W + 20, H); ctx.closePath(); }, col, 1.2);\n }\n // stations\n for (let s = 0; s < 7; s++) {\n const sx = s * STEP - cam + W / 2;\n if (sx < -1200 || sx > W + 1200) continue;\n popup(sx, s * 4 - .55, t, () => stations[s](t, s * 4));\n }\n // foreground grass strip\n paper(() => { ctx.moveTo(-20, H); for (let x = -20; x <= W + 20; x += 24) ctx.lineTo(x, 905 + Math.sin((x + cam * 1.3) * .02) * 12 + (Math.floor((x + cam * 1.3) / 24) % 2) * 14); ctx.lineTo(W + 20, H); ctx.closePath(); }, mixC('#6E7F4E', '#2F3A5C', night), 1.4);\n // grain + vignette\n ctx.save(); ctx.globalAlpha = .16; ctx.fillStyle = grainPattern; ctx.fillRect(0, 0, W, H); ctx.restore();\n const v = ctx.createRadialGradient(W / 2, H / 2, H * .4, W / 2, H / 2, W * .75);\n v.addColorStop(0, 'rgba(0,0,0,0)'); v.addColorStop(1, 'rgba(30,15,5,.45)'); ctx.fillStyle = v; ctx.fillRect(0, 0, W, H);\n});\n"
}
],
"aspectVariants": [],
"compositionKind": "video",
"canvasBackground": "#000000",
"editabilityTarget": "hybrid"
}