{
"id": "pm-003-bold-kinetic-type-showreel",
"css": "",
"fps": 30,
"html": "NOA BRANDT — MOTION DESIGN
MAKE
TYPE
MOVE
TYPE IS
LOUD
KINETIC • KINETIC •
KINETIC • KINETIC •
KINETIC • KINETIC •
KINETIC • KINETIC •
KINETIC • KINETIC •
100
%
of every frame is intent.
NOA\nBRANDT
MOTION DESIGNER
portfolio · noabrandt.example
RHYTHM\nIS LAYOUT
",
"name": "Type Is Loud · Kinetic Showreel",
"width": 1080,
"format": "jsoncut-html",
"height": 1920,
"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": 22,
"color": "#F4F2EC",
"phase": 1.41,
"speed": 0.6,
"accent": "#D7FF3A",
"amount": 70,
"effect": "stars",
"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 for (let i = 0; i < n * 3; i++) {\n const z = (hash(i + 3) + t * (.012 + hash(i) * .025)) % 1, x = W / 2 + (hash(i + 20) - .5) * W * z * 1.8, y = H / 2 + (hash(i + 40) - .5) * H * z * 1.8;\n point(x, y, .4 + z * 3, i % 7 ? a : c, .12 + .88 * z);\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": "#D7FF3A",
"phase": 2.35,
"speed": 1.2,
"accent": "#F4F2EC",
"amount": 90,
"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": 2,
"color": "#D7FF3A",
"phase": 0.47,
"speed": 0.5,
"accent": "#FF3B2F",
"amount": 26,
"effect": "bokeh",
"overlay": true,
"variant": 1,
"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 ctx.globalCompositeOperation = 'screen';\n for (let i = 0; i < n; i++) {\n const x = (hash(i) * W + t * (6 + i % 7) + W) % W, y = hash(i + 80) * H + Math.sin(t * .28 + i) * H * .05, r = 8 + hash(i + 22) * Math.min(W, H) * .08, g = ctx.createRadialGradient(x, y, 0, x, y, r);\n g.addColorStop(0, i % 3 ? c : a);\n g.addColorStop(1, 'transparent');\n ctx.globalAlpha = .18 + .32 * hash(i);\n ctx.fillStyle = g;\n ctx.fillRect(x - r, y - r, r * 2, r * 2);\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": "#000000",
"editabilityTarget": "layered"
}