{ "id": "pm-015-tapwise-launch-film", "css": "", "fps": 30, "html": "
Tapwise
Your phone is the terminal
Café Lumen
€24.90
€24.90
Tap to pay
Paid
Today
€1,284
€1,284
+€24.90 · Card ··4021 · 14:02
+€8.50 · Card ··7710 · 13:48
+€42.00 · Card ··1139 · 13:31
Launching
14 October
Tapwise
tapwise.example
", "name": "Tapwise · Launch film", "width": 1080, "format": "jsoncut-html", "height": 1350, "values": {}, "version": 1, "duration": 15, "safeArea": { "top": 0, "left": 0, "right": 0, "bottom": 0 }, "variables": [], "customBlocks": [ { "css": "canvas{display:block;width:100%;height:100%}", "html": "", "inputs": { "seed": 57, "color": "#1A2140", "phase": 0.94, "speed": 0.3, "accent": "#2C3770", "amount": 14, "effect": "grid", "overlay": true, "variant": 1, "intensity": 1.45, "background": "transparent", "timingMode": "clip" }, "adapter": "canvas-2d", "layerId": "custom-1", "javascript": "\nconst canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});\nconst W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs,TAU=Math.PI*2;\nconst hash=n=>{const x=Math.sin(n*91.731+Number(p.seed||1)*17.17)*43758.5453;return x-Math.floor(x)};\nconst mix=(a,b,t)=>a+(b-a)*t;\nconst intensity=Math.max(.8,Math.min(2.2,Number(p.intensity||1.45))),visible=alpha=>Math.min(1,alpha*intensity);\nconst point=(x,y,r,color,alpha=1)=>{ctx.globalAlpha=visible(alpha);ctx.fillStyle=color;ctx.beginPath();ctx.arc(x,y,r,0,TAU);ctx.fill()};\nconst line=(points,color,width=1,alpha=1,close=false)=>{ctx.globalAlpha=visible(alpha);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.beginPath();points.forEach(([x,y],i)=>ctx[i?'lineTo':'moveTo'](x,y));if(close)ctx.closePath();ctx.stroke()};\nconst frame=(inset,radius,color,width=1,alpha=1,dash=[],dashOffset=0)=>{const x=Math.max(0,inset),w=Math.max(1,W-x*2),h=Math.max(1,H-x*2);ctx.globalAlpha=visible(alpha);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.setLineDash(dash);ctx.lineDashOffset=dashOffset;ctx.beginPath();ctx.roundRect(x,x,w,h,Math.min(radius,w/2,h/2));ctx.stroke();ctx.setLineDash([])};\nconst perimeterPoint=(distance,inset=0)=>{const x=Math.max(0,inset),w=Math.max(1,W-x*2),h=Math.max(1,H-x*2),length=2*(w+h),d=((distance%length)+length)%length;if(d {\n ctx.strokeStyle = c;\n ctx.globalAlpha = .32;\n const horizon = H * .42;\n for (let i = -14; i <= 14; i++)\n line([[W / 2 + i * 12, horizon], [W / 2 + i * W * .13, H]], i % 5 ? a : c, 1, .25);\n for (let i = 0; i < 20; i++) {\n const q = (i / 20 + t * .16) % 1, y = horizon + (H - horizon) * q * q;\n line([[0, y], [W, y]], i % 6 ? a : c, 1, .2 + q * .35);\n }\n });\nfunction clean(){ctx.setTransform(1,0,0,1,0,0);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.filter='none';ctx.shadowBlur=0;ctx.shadowColor='transparent';ctx.setLineDash([]);ctx.clearRect(0,0,W,H);ctx.fillStyle=String(p.background||'#090A0E');ctx.fillRect(0,0,W,H)}\nfunction draw(ms){\n clean();\n const t=ms/1000*Number(p.speed||1)+Number(p.phase||0),n=Math.max(6,Number(p.amount||30)),c=String(p.color||'#8B5CF6'),a=String(p.accent||'#FF9418'),v=Number(p.variant||0);\n renderEffect({ctx,W,H,t,p,TAU,hash,mix,line,point,frame,perimeterPoint,n,c,a,v});\n if(p.overlay!==false){ctx.save();ctx.globalCompositeOperation='screen';ctx.globalAlpha=.14;const rich=ctx.createRadialGradient(W*.38,H*.38,0,W*.5,H*.5,Math.hypot(W,H)*.7);rich.addColorStop(0,c);rich.addColorStop(.52,'transparent');rich.addColorStop(.72,a);rich.addColorStop(1,'transparent');ctx.fillStyle=rich;ctx.fillRect(0,0,W,H);ctx.restore()}\n ctx.setTransform(1,0,0,1,0,0);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.filter='none';\n}\njsoncut.onFrame(draw);" }, { "css": "canvas{display:block;width:100%;height:100%}", "html": "", "inputs": { "seed": 24, "color": "#0B0F1E", "phase": 2.35, "speed": 1.1, "accent": "#7C5CFF", "amount": 60, "effect": "confetti", "overlay": true, "variant": 3, "intensity": 1.45, "background": "transparent", "timingMode": "clip" }, "adapter": "canvas-2d", "layerId": "custom-2", "javascript": "\nconst canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});\nconst W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs,TAU=Math.PI*2;\nconst hash=n=>{const x=Math.sin(n*91.731+Number(p.seed||1)*17.17)*43758.5453;return x-Math.floor(x)};\nconst mix=(a,b,t)=>a+(b-a)*t;\nconst intensity=Math.max(.8,Math.min(2.2,Number(p.intensity||1.45))),visible=alpha=>Math.min(1,alpha*intensity);\nconst point=(x,y,r,color,alpha=1)=>{ctx.globalAlpha=visible(alpha);ctx.fillStyle=color;ctx.beginPath();ctx.arc(x,y,r,0,TAU);ctx.fill()};\nconst line=(points,color,width=1,alpha=1,close=false)=>{ctx.globalAlpha=visible(alpha);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.beginPath();points.forEach(([x,y],i)=>ctx[i?'lineTo':'moveTo'](x,y));if(close)ctx.closePath();ctx.stroke()};\nconst frame=(inset,radius,color,width=1,alpha=1,dash=[],dashOffset=0)=>{const x=Math.max(0,inset),w=Math.max(1,W-x*2),h=Math.max(1,H-x*2);ctx.globalAlpha=visible(alpha);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.setLineDash(dash);ctx.lineDashOffset=dashOffset;ctx.beginPath();ctx.roundRect(x,x,w,h,Math.min(radius,w/2,h/2));ctx.stroke();ctx.setLineDash([])};\nconst perimeterPoint=(distance,inset=0)=>{const x=Math.max(0,inset),w=Math.max(1,W-x*2),h=Math.max(1,H-x*2),length=2*(w+h),d=((distance%length)+length)%length;if(d {\n for (let i = 0; i < n * 2; i++) {\n const x = (hash(i) * W + Math.sin(i + t) * 35 + W) % W, y = (hash(i + 40) * H + t * (42 + hash(i) * 85)) % (H + 50) - 25;\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(t + i);\n ctx.fillStyle = i % 3 === 0 ? a : c;\n ctx.globalAlpha = .75;\n ctx.fillRect(-3 - hash(i) * 3, -8, 6 + hash(i) * 6, 16);\n ctx.restore();\n }\n });\nfunction clean(){ctx.setTransform(1,0,0,1,0,0);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.filter='none';ctx.shadowBlur=0;ctx.shadowColor='transparent';ctx.setLineDash([]);ctx.clearRect(0,0,W,H);ctx.fillStyle=String(p.background||'#090A0E');ctx.fillRect(0,0,W,H)}\nfunction draw(ms){\n clean();\n const t=ms/1000*Number(p.speed||1)+Number(p.phase||0),n=Math.max(6,Number(p.amount||30)),c=String(p.color||'#8B5CF6'),a=String(p.accent||'#FF9418'),v=Number(p.variant||0);\n renderEffect({ctx,W,H,t,p,TAU,hash,mix,line,point,frame,perimeterPoint,n,c,a,v});\n if(p.overlay!==false){ctx.save();ctx.globalCompositeOperation='screen';ctx.globalAlpha=.14;const rich=ctx.createRadialGradient(W*.38,H*.38,0,W*.5,H*.5,Math.hypot(W,H)*.7);rich.addColorStop(0,c);rich.addColorStop(.52,'transparent');rich.addColorStop(.72,a);rich.addColorStop(1,'transparent');ctx.fillStyle=rich;ctx.fillRect(0,0,W,H);ctx.restore()}\n ctx.setTransform(1,0,0,1,0,0);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.filter='none';\n}\njsoncut.onFrame(draw);" }, { "css": "canvas{display:block;width:100%;height:100%}", "html": "", "inputs": { "seed": 40, "color": "#5FF5B5", "phase": 1.41, "speed": 0.35, "accent": "#22D98A", "amount": 14, "effect": "topography", "overlay": true, "variant": 4, "intensity": 1.45, "background": "transparent", "timingMode": "clip" }, "adapter": "canvas-2d", "layerId": "custom-3", "javascript": "\nconst canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});\nconst W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs,TAU=Math.PI*2;\nconst hash=n=>{const x=Math.sin(n*91.731+Number(p.seed||1)*17.17)*43758.5453;return x-Math.floor(x)};\nconst mix=(a,b,t)=>a+(b-a)*t;\nconst intensity=Math.max(.8,Math.min(2.2,Number(p.intensity||1.45))),visible=alpha=>Math.min(1,alpha*intensity);\nconst point=(x,y,r,color,alpha=1)=>{ctx.globalAlpha=visible(alpha);ctx.fillStyle=color;ctx.beginPath();ctx.arc(x,y,r,0,TAU);ctx.fill()};\nconst line=(points,color,width=1,alpha=1,close=false)=>{ctx.globalAlpha=visible(alpha);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.beginPath();points.forEach(([x,y],i)=>ctx[i?'lineTo':'moveTo'](x,y));if(close)ctx.closePath();ctx.stroke()};\nconst frame=(inset,radius,color,width=1,alpha=1,dash=[],dashOffset=0)=>{const x=Math.max(0,inset),w=Math.max(1,W-x*2),h=Math.max(1,H-x*2);ctx.globalAlpha=visible(alpha);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.setLineDash(dash);ctx.lineDashOffset=dashOffset;ctx.beginPath();ctx.roundRect(x,x,w,h,Math.min(radius,w/2,h/2));ctx.stroke();ctx.setLineDash([])};\nconst perimeterPoint=(distance,inset=0)=>{const x=Math.max(0,inset),w=Math.max(1,W-x*2),h=Math.max(1,H-x*2),length=2*(w+h),d=((distance%length)+length)%length;if(d {\n for (let y = -30; y < H + 30; y += H / 22) {\n const pts = [];\n for (let x = -10; x <= W + 10; x += 10)\n pts.push([x, y + Math.sin(x * .011 + t * .3 + y * .029) * 27 + Math.sin(x * .026 - t * .18) * 12]);\n line(pts, Math.round(y / H * 10) % 4 ? a : c, 1.4, .12 + Math.max(0, y / H) * .4);\n }\n });\nfunction clean(){ctx.setTransform(1,0,0,1,0,0);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.filter='none';ctx.shadowBlur=0;ctx.shadowColor='transparent';ctx.setLineDash([]);ctx.clearRect(0,0,W,H);ctx.fillStyle=String(p.background||'#090A0E');ctx.fillRect(0,0,W,H)}\nfunction draw(ms){\n clean();\n const t=ms/1000*Number(p.speed||1)+Number(p.phase||0),n=Math.max(6,Number(p.amount||30)),c=String(p.color||'#8B5CF6'),a=String(p.accent||'#FF9418'),v=Number(p.variant||0);\n renderEffect({ctx,W,H,t,p,TAU,hash,mix,line,point,frame,perimeterPoint,n,c,a,v});\n if(p.overlay!==false){ctx.save();ctx.globalCompositeOperation='screen';ctx.globalAlpha=.14;const rich=ctx.createRadialGradient(W*.38,H*.38,0,W*.5,H*.5,Math.hypot(W,H)*.7);rich.addColorStop(0,c);rich.addColorStop(.52,'transparent');rich.addColorStop(.72,a);rich.addColorStop(1,'transparent');ctx.fillStyle=rich;ctx.fillRect(0,0,W,H);ctx.restore()}\n ctx.setTransform(1,0,0,1,0,0);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.filter='none';\n}\njsoncut.onFrame(draw);" } ], "aspectVariants": [], "compositionKind": "video", "canvasBackground": "#0B0F1E", "editabilityTarget": "layered" }