{
"id": "opus-showcase-01-prism-own",
"css": "",
"fps": 30,
"html": "Light
behaves.
it bends.
it splits.
it bounces.
every frame
is a decision.
PRISM
MOTION STUDIO · SHOWREEL 2026
",
"name": "Prism · Light behaves — showreel (own build)",
"width": 1920,
"format": "jsoncut-html",
"height": 1080,
"values": {},
"version": 1,
"duration": 15,
"safeArea": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
},
"variables": [],
"customBlocks": [
{
"inputs": {
"seed": 7
},
"adapter": "canvas-2d",
"layerId": "custom-1",
"javascript": "// Prism showreel light field: one continuous take, every frame derived from jsoncut.time.\nconst ctx = context, W = width, H = height, CX = W / 2, CY = H / 2;\nconst SPEC = ['#FF3D6E', '#FF8A3D', '#FFD84A', '#5CFFA1', '#3DE0FF', '#4D7CFF', '#B45CFF'];\nconst RGB = SPEC.map(h => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)]);\nconst clamp = v => Math.max(0, Math.min(1, v));\nconst smooth = v => { v = clamp(v); return v * v * (3 - 2 * v); };\nconst span = (t, a, b) => clamp((t - a) / (b - a));\nconst outExpo = v => v >= 1 ? 1 : 1 - Math.pow(2, -10 * clamp(v));\nconst outBack = v => { v = clamp(v); const c = 1.6; return 1 + (c + 1) * Math.pow(v - 1, 3) + c * Math.pow(v - 1, 2); };\nconst inOut = v => { v = clamp(v); return v < .5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2; };\nconst mix = (a, b, v) => a + (b - a) * v;\nconst hash = n => { const q = Math.sin(n * 127.1 + 311.7) * 43758.5453; return q - Math.floor(q); };\nconst rgba = (c, a) => `rgba(${c[0]},${c[1]},${c[2]},${Math.max(0, a)})`;\nconst DUST = Array.from({ length: 420 }, (_, i) => ({ x: hash(i * 3.1), y: hash(i * 7.7), s: .4 + hash(i * 1.3) * 1.8, v: .2 + hash(i * 5.9), p: hash(i * 2.2) * 6.28 }));\nconst GRAIN = Array.from({ length: 1400 }, (_, i) => [hash(i * 9.1), hash(i * 4.3), hash(i * 6.7)]);\n\nfunction glow(x, y, r, color, a) {\n const g = ctx.createRadialGradient(x, y, 0, x, y, r);\n g.addColorStop(0, rgba(color, a)); g.addColorStop(.35, rgba(color, a * .35)); g.addColorStop(1, rgba(color, 0));\n ctx.fillStyle = g; ctx.fillRect(x - r, y - r, r * 2, r * 2);\n}\nfunction beamLine(x1, y1, x2, y2, color, a, w) {\n ctx.lineCap = 'round';\n for (const [lw, la] of [[w * 9, .05], [w * 4, .12], [w * 1.6, .45], [w * .6, 1]]) {\n ctx.strokeStyle = rgba(color, a * la); ctx.lineWidth = lw;\n ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();\n }\n}\nfunction polyline(pts, color, a, w) {\n ctx.lineCap = 'round'; ctx.lineJoin = 'round';\n for (const [lw, la] of [[w * 7, .05], [w * 3, .14], [w * 1.2, .5], [w * .45, 1]]) {\n ctx.strokeStyle = rgba(color, a * la); ctx.lineWidth = lw; ctx.beginPath();\n pts.forEach((p, i) => i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])); ctx.stroke();\n }\n}\nfunction prism(cx, cy, size, rotY, rotX) {\n const r = size, d = size * .55, f = 1400;\n const tri = [[0, -r], [-r * .866, r * .5], [r * .866, r * .5]];\n const P = (x, y, z) => {\n const cy_ = Math.cos(rotY), sy = Math.sin(rotY), cx_ = Math.cos(rotX), sx = Math.sin(rotX);\n const x1 = x * cy_ + z * sy, z1 = -x * sy + z * cy_;\n const y1 = y * cx_ - z1 * sx, z2 = y * sx + z1 * cx_;\n const s = f / (f + z2); return [cx + x1 * s, cy + y1 * s];\n };\n return { front: tri.map(([x, y]) => P(x, y, -d)), back: tri.map(([x, y]) => P(x, y, d)) };\n}\nfunction drawPrism(pr, a) {\n const { front, back } = pr;\n const faces = [[front[0], front[1], back[1], back[0]], [front[1], front[2], back[2], back[1]], [front[2], front[0], back[0], back[2]], front, back];\n for (const f of faces) {\n const g = ctx.createLinearGradient(f[0][0], f[0][1], f[2][0], f[2][1]);\n g.addColorStop(0, `rgba(190,200,255,${.07 * a})`); g.addColorStop(1, `rgba(120,90,255,${.025 * a})`);\n ctx.fillStyle = g; ctx.beginPath(); f.forEach((p, j) => j ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])); ctx.closePath(); ctx.fill();\n }\n const edges = [[front[0], front[1]], [front[1], front[2]], [front[2], front[0]], [back[0], back[1]], [back[1], back[2]], [back[2], back[0]], [front[0], back[0]], [front[1], back[1]], [front[2], back[2]]];\n edges.forEach(([p, q], i) => beamLine(p[0], p[1], q[0], q[1], [225, 230, 255], a * (i < 3 ? .95 : .45), 2.2));\n}\n\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n ctx.globalCompositeOperation = 'source-over';\n const bg = ctx.createRadialGradient(CX + Math.sin(t * .3) * 160, CY - 60, 40, CX, CY, W * .75);\n bg.addColorStop(0, '#16123F'); bg.addColorStop(.5, '#0A0827'); bg.addColorStop(1, '#040312');\n ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);\n ctx.globalCompositeOperation = 'lighter';\n\n // A + B: point of light, incoming beam, prism (0 - 6.6 s)\n const ignite = outExpo(span(t, 0, .7)), beamIn = inOut(span(t, .9, 2.2)), unfold = outBack(span(t, 2.2, 3.1));\n const prismAway = inOut(span(t, 5.6, 6.6)), waveMorph = inOut(span(t, 5.5, 6.7));\n const pcx = CX + 40 - prismAway * 260, pcy = CY - 20 + prismAway * 40;\n const rotY = -.55 + Math.sin(t * .55) * .22 + prismAway * 2.6, rotX = .22 + Math.sin(t * .4) * .06;\n const pr = prism(pcx, pcy, 190 * unfold * (1 - prismAway * .9), rotY, rotX);\n const avg = (a, b, c, d) => [(a[0] + b[0] + c[0] + d[0]) / 4, (a[1] + b[1] + c[1] + d[1]) / 4];\n const entry = avg(pr.front[0], pr.front[1], pr.back[0], pr.back[1]);\n const exit = avg(pr.front[0], pr.front[2], pr.back[0], pr.back[2]);\n if (t < 2.6) {\n const pulse = 1 + .12 * Math.sin(t * 9) * (1 - span(t, 0, 2));\n const k = ignite * (1 - smooth(span(t, 2.2, 2.6)));\n glow(CX, CY, 260 * pulse * ignite, [140, 120, 255], .55 * k);\n glow(CX, CY, 70 * pulse, [255, 255, 255], .95 * k);\n const fl = 520 * ignite * (1 + beamIn * .6);\n const g = ctx.createLinearGradient(CX - fl, 0, CX + fl, 0);\n g.addColorStop(0, 'rgba(120,160,255,0)'); g.addColorStop(.5, `rgba(200,220,255,${.7 * k})`); g.addColorStop(1, 'rgba(120,160,255,0)');\n ctx.fillStyle = g; ctx.fillRect(CX - fl, CY - 2, fl * 2, 4); ctx.fillRect(CX - 1.5, CY - fl * .18, 3, fl * .36);\n }\n if (t > .9 && t < 6.8) {\n const tx = t < 2.4 ? CX : entry[0], ty = t < 2.4 ? CY : entry[1];\n beamLine(-80, ty, mix(-80, tx, beamIn), ty, [255, 255, 255], .9 * (1 - prismAway), 3.2);\n if (beamIn > .98 && t < 2.6) glow(CX, CY, 180, [255, 255, 255], .5 * (1 - span(t, 2.2, 2.6)));\n }\n if (unfold > .01 && prismAway < .99) {\n const a = clamp(unfold) * (1 - prismAway);\n drawPrism(pr, a);\n beamLine(entry[0], entry[1], exit[0], exit[1], [255, 250, 235], .55 * a, 2.6);\n glow(entry[0], entry[1], 90, [255, 255, 255], .45 * a);\n }\n\n // Spectrum rays morph into flowing ribbons (3 - 9.7 s)\n const rayIn = outExpo(span(t, 3.05, 4.3)), ribbonsOut = inOut(span(t, 8.75, 9.55));\n const bounce = Math.exp(-Math.pow((t - 7.95) * 3.2, 2));\n if (t > 3 && t < 9.7) {\n for (let i = 0; i < 7; i++) {\n const ang = -.06 + i * .07 + Math.sin(t * .8 + i) * .01, pts = [];\n for (let s = 0; s <= 90; s++) {\n const u = s / 90;\n const rx = exit[0] + u * (W + 160 - exit[0]) * rayIn, ry = exit[1] + Math.tan(ang) * (rx - exit[0]);\n const wx = -120 + u * (W + 240);\n const amp = (70 + 28 * Math.sin(t * .7 + i)) * (1 + bounce * 1.6) * (1 - ribbonsOut);\n const baseY = CY - 30 + (i - 3) * 38 * (1 - ribbonsOut);\n const wy = baseY + amp * Math.sin(wx * .0042 - t * 2.1 + i * .55) + amp * .35 * Math.sin(wx * .011 + t * 1.3 - i);\n pts.push([mix(rx, wx, waveMorph), mix(ry, wy, waveMorph)]);\n }\n polyline(pts, RGB[i], .95 * (1 - ribbonsOut * .55) * (1 - smooth(span(t, 9.25, 9.7))), 3.8 + waveMorph * 1.8);\n }\n if (rayIn > 0 && waveMorph < 1) glow(exit[0], exit[1], 120, [255, 230, 255], .55 * rayIn * (1 - waveMorph));\n }\n\n // Dust motes inside the light\n const dustVis = smooth(span(t, 2, 3.2)) * (1 - smooth(span(t, 8.9, 9.4))) + smooth(span(t, 12.3, 13.4)) * .8;\n if (dustVis > .01) {\n for (let i = 0; i < DUST.length; i++) {\n const d = DUST[i];\n const x = ((d.x * W + t * 26 * d.v) % (W + 40)) - 20, y = ((d.y * H - t * 14 * d.v) % H + H) % H;\n ctx.fillStyle = rgba(i % 3 ? [235, 235, 255] : RGB[i % 7], .55 * (.45 + .55 * Math.sin(t * 2.2 + d.p)) * dustVis);\n ctx.beginPath(); ctx.arc(x, y, d.s, 0, 6.283); ctx.fill();\n }\n }\n\n // Spectral tunnel: ribbons fold into rings and the camera dives (9 - 12 s)\n const tunnelIn = smooth(span(t, 9.0, 9.8)), collapse = inOut(span(t, 11.35, 11.85));\n if (t > 9 && t < 12.1) {\n const u = Math.max(0, t - 9), travel = .22 * u + .1 * u * u, roll = u * .35;\n for (let k = 0; k < 30; k++) {\n const z = 1.02 - (((k / 30 + travel) % 1) + 1) % 1;\n const R = Math.min(1600, 70 / Math.max(.035, z)) * (1 - collapse * .97);\n const a = tunnelIn * smooth((z - .03) / .1) * (1 - smooth((z - .78) / .2));\n if (a < .01) continue;\n const dashes = 5 + (k % 3), rot = roll * (k % 2 ? 1 : -1.3) + k * .7;\n ctx.lineCap = 'round';\n for (let j = 0; j < dashes; j++) {\n const a0 = rot + j * 6.283 / dashes, a1 = a0 + 6.283 / dashes * (.55 + .3 * Math.sin(k + t));\n for (const [lw, la] of [[22, .06], [9, .16], [3.2, .6], [1.2, 1]]) {\n ctx.strokeStyle = rgba(RGB[k % 7], a * la); ctx.lineWidth = lw * (.3 + 1.3 / (z * 4 + .4));\n ctx.beginPath(); ctx.arc(CX, CY, R, a0, a1); ctx.stroke();\n }\n }\n }\n ctx.globalCompositeOperation = 'source-over';\n const hole = ctx.createRadialGradient(CX, CY, 0, CX, CY, 640);\n hole.addColorStop(0, `rgba(4,3,18,${.86 * tunnelIn * (1 - collapse)})`); hole.addColorStop(1, 'rgba(4,3,18,0)');\n ctx.fillStyle = hole; ctx.fillRect(0, 0, W, H);\n ctx.globalCompositeOperation = 'lighter';\n }\n\n // Flash and end-card light (11.7 - 15 s)\n const flash = Math.exp(-Math.pow((t - 11.86) * 7.5, 2));\n if (flash > .01) { ctx.fillStyle = `rgba(235,232,255,${.85 * flash})`; ctx.fillRect(0, 0, W, H); }\n if (t > 11.8) {\n const half = 470 * outExpo(span(t, 11.95, 13.1)), y = 668;\n for (let i = 0; i < 7; i++) beamLine(CX - half + 2 * half * i / 7 + 3, y, CX - half + 2 * half * (i + 1) / 7 - 3, y, RGB[i], .95, 2.4);\n const sweep = span(t, 13.2, 14.6);\n if (sweep > 0 && sweep < 1) glow(CX - half + 2 * half * sweep, y, 90, [255, 255, 255], .55 * Math.sin(sweep * Math.PI));\n drawPrism(prism(CX, CY - 50, 320, -.4 + (t - 12) * .12, .18), .18 * smooth(span(t, 12.2, 13.4)));\n glow(CX, CY - 40, 620, [90, 70, 220], .22 * smooth(span(t, 11.9, 13)));\n }\n\n // Vignette and film grain\n ctx.globalCompositeOperation = 'source-over';\n const v = ctx.createRadialGradient(CX, CY, H * .35, CX, CY, W * .72);\n v.addColorStop(0, 'rgba(0,0,0,0)'); v.addColorStop(1, 'rgba(0,0,8,.62)');\n ctx.fillStyle = v; ctx.fillRect(0, 0, W, H);\n const seed = Math.floor(t * 30);\n for (let i = 0; i < GRAIN.length; i++) {\n const g = GRAIN[(i + seed * 37) % GRAIN.length];\n ctx.fillStyle = g[2] > .5 ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.08)';\n ctx.fillRect((g[0] + seed * .618) % 1 * W, (g[1] + seed * .382) % 1 * H, 2, 2);\n }\n});\n"
}
],
"aspectVariants": [],
"compositionKind": "video",
"canvasBackground": "#000000",
"editabilityTarget": "hybrid"
}