{ "id": "jsoncut-launch-film", "css": "[data-jc-clip]{box-sizing:border-box}", "fps": 30, "html": "
JsonCut
THE AI STUDIO FOR VIDEO & IMAGE
Turn
one
idea.
1:1
16:9
4:5
9:16
1:1
9:16
16:9
into every
video and image
you need.
Grok Imagine Image
Recraft 4.1
Luma Ray 3.2
Krea 3
Seedance 2.0
PixVerse 6
GPT Image 2.5
Kling 4
Wan 3.0
LTX 2.5
Fabric 1.0
MiniMax H3
Seedance 2.5
Veo 3.1
Nano Banana 2.1
Seedream 5 Pro
Aurora
Muse Image
Ideogram 4.5
FLUX 3
Grok Imagine
Happy Horse 1.1
FLUX 3 Klein
FLUX 3 Video
Qwen Image 3
Gemini Omni Flash
GPT Image 2.5
Eleven Music 2.5
IMAGE · VIDEO · MUSIC · SOUND
Every leading model.
One studio.
Veo · Kling · Seedance · FLUX · GPT Image · Nano Banana · Wan · and more
Waves crashing on dark rocks at golden hour
Veo 3.1
Kling 4
Seedance 2.5
Nano Banana 2.1
01 · 4K
02 · 4K
03 · 4K
04 · 4K
Switch models in one click.
Launch · Spring drop
Animate
Export
Media
All
Images
Videos
Every layer stays editable.
Carry less.
Travel light.
−20%
Background
Photo
Headline
Badge
00:04:12 / 00:20:00
0s
5s
10s
15s
20s
Headline
Hook
Offer
CTA
Product
Bag photo
Trail clip
Motion
Fly in
3D turn
Zoom
Music
Drive · 120 BPM
Sound
Whoosh
Hit
Pop
Sting
Hook
Offer
CTA
Bag photo
Trail clip
Fly in
3D turn
Zoom
Drive · 120 BPM
Whoosh
Hit
Pop
Sting
Headline
Product
Motion
Music
Sound
5 trips.\n1 bag.
Waxed\ncanvas.
Carry\nless.
Go\nfurther.
Shop the\nedit →
Edit every frame.
Every layer. Every keyframe.
Design images.
Build carousels.
480+
sound effects.
Whoosh
Impact
Shutter
Notify
Success
Glitch
Voiceover.
21 voices · 15 languages
Auto captions.
Timed to every spoken word.
Carry less. Go further.
Weniger tragen. Weiter kommen.
Liam · English
Liam · Deutsch
No design skills.
No editing skills.
Just tell the
AI Director.
AI Director
Pro
Make a 20-second launch video for our weekender bag. Bold and fast.
On it. Here’s the plan:
Plan the story
Write the script
Generate visuals · Nano Banana 2.1
Animate six scenes
Add music and sound
Review every frame
Describe a change or a new video…
Your video appears here
Hook
“Carry less.”
Detail
Waxed canvas
Trail
Two days, one bag
Sky
Go further.
Offer
−20% this week
Call to action
Shop the edit
Carry less.
Ready to export
Carry less.
Headline
Photo
Colour
Language
One design.
Every version.
Carry less.
Viaja ligero.
Viaggia leggero.
Podróżuj lekko.
Leve na mala.
Weniger tragen.
Voyage léger.
Reis licht.
Weniger tragen.
Voyage léger.
Reis licht.
Res lätt.
Carry less.
Viaja ligero.
Viaggia leggero.
Podróżuj lekko.
Viaja ligero.
Viaggia leggero.
Podróżuj lekko.
Leve na mala.
Carry less.
Voyage léger.
Reis licht.
Res lätt.
Voyage léger.
Reis licht.
Res lätt.
Carry less.
Viaja ligero.
Viaggia leggero.
Podróżuj lekko.
Leve na mala.
Viaggia leggero.
Podróżuj lekko.
Leve na mala.
Weniger tragen.
Voyage léger.
Reis licht.
Res lätt.
Carry less.
1,000+
versions from one project
Spreadsheets
API
Automations
30+ languages
Works where you already work.
Claude
ChatGPT
Gemini
n8n
Make
MCP
API
Create 8 product videos from my spreadsheet.
jsoncut · render_template × 8
JsonCut
Turn one idea into every
video and image you need.
Start creating free
jsoncut.com
", "name": "JsonCut · Launch film", "width": 1920, "format": "jsoncut-html", "height": 1080, "values": {}, "version": 1, "duration": 60, "safeArea": { "top": 0, "left": 0, "right": 0, "bottom": 0 }, "variables": [], "customBlocks": [ { "css": "canvas{display:block;width:100%;height:100%}", "html": "", "inputs": { "gap": 0.25, "one": "M175 84 H207 L114 413 H82 Z", "two": "M298 84 H330 L238 413 H206 Z", "body": "M45 134 H272 Q333 134 350 180 V188 L455 133 V358 L350 298 V336 Q350 360 326 360 H108 Q45 360 45 296 V210", "draw": 0.12, "glow": 1.79, "shine": 1.94, "slash": 1.3, "drawLength": 1.12 }, "adapter": "canvas-2d", "layerId": "mark", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000,s=Math.min(W,H)/500;ctx.save();ctx.scale(s,s);\nconst ease=x=>{x=Math.max(0,Math.min(1,x));return 1-Math.pow(1-x,3)};\nconst g=ctx.createLinearGradient(40,90,460,410);g.addColorStop(0,'#F75A0C');g.addColorStop(1,'#FBBF24');\nconst glow=t>p.glow?Math.max(0,1-(t-p.glow)/1.1):0;\nctx.shadowColor='rgba(255,110,40,.9)';ctx.shadowBlur=10+46*glow;\nconst d=ease((t-p.draw)/p.drawLength);\nctx.lineWidth=27;ctx.lineJoin='round';ctx.lineCap='round';ctx.strokeStyle=g;\nif(d>0){ctx.setLineDash([1290*d,4000]);ctx.stroke(new Path2D(p.body));ctx.setLineDash([]);}\n[p.one,p.two].forEach((path,i)=>{const k=(t-(p.slash+i*p.gap))/.24;if(k<=0)return;const e=ease(k);ctx.save();ctx.translate(-120*(1-e),-560*(1-e));ctx.globalAlpha=Math.min(1,k*4);ctx.fillStyle=g;ctx.fill(new Path2D(path));ctx.restore();});\nif(t>p.shine&&t", "inputs": { "color": "#FF6B35", "count": 220 }, "adapter": "canvas-2d", "layerId": "hook-streaks", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000;ctx.lineCap='round';\nfor(let i=0;i", "inputs": { "color": "#F7F4EE", "count": 160 }, "adapter": "canvas-2d", "layerId": "skills-streaks", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000;ctx.lineCap='round';\nfor(let i=0;i", "inputs": { "on": "#FF6B35", "off": "rgba(247,244,238,.18)" }, "adapter": "canvas-2d", "layerId": "director-wave", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000,n=64,bw=W/n;for(let i=0;i", "inputs": { "on": "#FF6B35", "to": 3.354, "off": "rgba(247,244,238,.2)", "bars": [ { "t": 0.059, "v": 0 }, { "t": 0.086, "v": 0.19 }, { "t": 0.114, "v": 0.13 }, { "t": 0.142, "v": 0.1 }, { "t": 0.169, "v": 0.47 }, { "t": 0.197, "v": 0.95 }, { "t": 0.224, "v": 0.73 }, { "t": 0.252, "v": 0.51 }, { "t": 0.279, "v": 0.56 }, { "t": 0.307, "v": 0.45 }, { "t": 0.335, "v": 0.58 }, { "t": 0.362, "v": 0.33 }, { "t": 0.39, "v": 0.4 }, { "t": 0.417, "v": 0.54 }, { "t": 0.445, "v": 0.57 }, { "t": 0.472, "v": 0.3 }, { "t": 0.5, "v": 0.26 }, { "t": 0.528, "v": 0.05 }, { "t": 0.555, "v": 0.08 }, { "t": 0.583, "v": 0.18 }, { "t": 0.61, "v": 0.15 }, { "t": 0.638, "v": 0.12 }, { "t": 0.665, "v": 0.16 }, { "t": 0.693, "v": 0.14 }, { "t": 0.721, "v": 0.08 }, { "t": 0.748, "v": 0.03 }, { "t": 0.776, "v": 0.01 }, { "t": 0.803, "v": 0.01 }, { "t": 0.831, "v": 0 }, { "t": 0.858, "v": 0 }, { "t": 0.886, "v": 0 }, { "t": 0.914, "v": 0 }, { "t": 0.941, "v": 0 }, { "t": 0.969, "v": 0 }, { "t": 0.996, "v": 0.07 }, { "t": 1.024, "v": 0.09 }, { "t": 1.051, "v": 0.05 }, { "t": 1.079, "v": 0.36 }, { "t": 1.107, "v": 0.68 }, { "t": 1.134, "v": 0.89 }, { "t": 1.162, "v": 0.91 }, { "t": 1.189, "v": 0.46 }, { "t": 1.217, "v": 0.15 }, { "t": 1.245, "v": 0.11 }, { "t": 1.272, "v": 0.08 }, { "t": 1.3, "v": 0.06 }, { "t": 1.327, "v": 0.36 }, { "t": 1.355, "v": 0.53 }, { "t": 1.382, "v": 0.49 }, { "t": 1.41, "v": 0.52 }, { "t": 1.438, "v": 0.37 }, { "t": 1.465, "v": 0.13 }, { "t": 1.493, "v": 0.05 }, { "t": 1.52, "v": 0.18 }, { "t": 1.548, "v": 0.06 }, { "t": 1.575, "v": 0.12 }, { "t": 1.603, "v": 0.36 }, { "t": 1.631, "v": 0.82 }, { "t": 1.658, "v": 0.75 }, { "t": 1.686, "v": 0.67 }, { "t": 1.713, "v": 0.74 }, { "t": 1.741, "v": 0.3 }, { "t": 1.768, "v": 0.57 }, { "t": 1.796, "v": 0.45 }, { "t": 1.824, "v": 0.36 }, { "t": 1.851, "v": 0.82 }, { "t": 1.879, "v": 0.63 }, { "t": 1.906, "v": 0.12 }, { "t": 1.934, "v": 0.18 }, { "t": 1.961, "v": 0.11 }, { "t": 1.989, "v": 0.16 }, { "t": 2.017, "v": 0.55 }, { "t": 2.044, "v": 0.64 }, { "t": 2.072, "v": 0.61 }, { "t": 2.099, "v": 0.63 }, { "t": 2.127, "v": 0.55 }, { "t": 2.154, "v": 0.08 }, { "t": 2.182, "v": 0.14 }, { "t": 2.21, "v": 0.16 }, { "t": 2.237, "v": 0.12 }, { "t": 2.265, "v": 0.07 }, { "t": 2.292, "v": 0.02 }, { "t": 2.32, "v": 0.03 }, { "t": 2.348, "v": 0.01 }, { "t": 2.375, "v": 0 }, { "t": 2.403, "v": 0 }, { "t": 2.43, "v": 0 }, { "t": 2.458, "v": 0 }, { "t": 2.485, "v": 0 }, { "t": 2.513, "v": 0 }, { "t": 2.541, "v": 0 }, { "t": 2.568, "v": 0 }, { "t": 2.596, "v": 0.09 }, { "t": 2.623, "v": 0.15 }, { "t": 2.651, "v": 1 }, { "t": 2.678, "v": 1 }, { "t": 2.706, "v": 0.8 }, { "t": 2.734, "v": 0.48 }, { "t": 2.761, "v": 0.39 }, { "t": 2.789, "v": 0.19 }, { "t": 2.816, "v": 0.53 }, { "t": 2.844, "v": 0.57 }, { "t": 2.871, "v": 0.55 }, { "t": 2.899, "v": 0.11 }, { "t": 2.927, "v": 0.11 }, { "t": 2.954, "v": 0.48 }, { "t": 2.982, "v": 0.44 }, { "t": 3.009, "v": 0.09 }, { "t": 3.037, "v": 0.1 }, { "t": 3.064, "v": 0.08 }, { "t": 3.092, "v": 0.05 }, { "t": 3.12, "v": 0.04 }, { "t": 3.147, "v": 0.03 }, { "t": 3.175, "v": 0.01 }, { "t": 3.202, "v": 0 }, { "t": 3.23, "v": 0 }, { "t": 3.257, "v": 0 }, { "t": 3.285, "v": 0 }, { "t": 3.313, "v": -1 }, { "t": 3.34, "v": -1 } ], "from": 0.045 }, "adapter": "canvas-2d", "layerId": "voice-wave", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000,n=p.bars.length,bw=W/n;\nfor(let i=0;i=b.t?p.on:p.off;ctx.fillRect(i*bw+1,(H-h)/2,Math.max(1,bw-2),h);}\nconst x=Math.min(W,Math.max(0,(t-p.from)/(p.to-p.from)*W));if(t>p.from&&t", "inputs": { "f": 1.6, "h": 130, "w": 1080, "at": 0.08, "lw": 17, "x0": 34, "x1": 1052, "y0": 70, "y1": 56, "amp": 5, "len": 0.34, "seed": 1.3, "color": "#FF6B35", "flick": 16, "sparks": 14 }, "adapter": "canvas-2d", "layerId": "skills-strike-1", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000,sx=W/p.w,sy=H/p.h;ctx.save();ctx.scale(sx,sy);\nconst k=Math.max(0,Math.min(1,(t-p.at)/p.len));\nif(k<=0){ctx.restore();return;}\nconst ease=x=>x<.5?2*x*x:1-Math.pow(-2*x+2,2)/2,inv=u=>u<.5?Math.sqrt(u/2):1-Math.sqrt((1-u)/2);\nconst e=ease(k),N=180;\nconst at=u=>{const x=p.x0+(p.x1-p.x0)*u;let y=p.y0+(p.y1-p.y0)*u+Math.sin(u*Math.PI*p.f+p.seed)*p.amp+Math.sin(u*Math.PI*p.f*2.7+p.seed*1.7)*p.amp*.4;\nif(u>.9)y-=Math.pow((u-.9)/.1,2)*p.flick;return [x,y];};\nconst width=u=>p.lw*Math.pow(Math.min(1,u/.05),.5)*(1-.5*Math.pow(Math.max(0,(u-.84)/.16),1.3))*(.86+.14*Math.sin(u*23+p.seed));\nconst strands=[[0,1,1],[-.26,.45,.62],[.24,.5,.58]];\nctx.lineCap='round';ctx.lineJoin='round';\n// One blurred pass for the glow (blurring every segment cost 60–100 ms a frame), then the strands sharp on top.\nconst glow=new Path2D();glow.moveTo(...at(0));for(let i=1;i<=N;i++){const u=Math.min(i/N,e);glow.lineTo(...at(u));if(u>=e)break;}\nctx.save();ctx.globalAlpha=.85;ctx.strokeStyle=p.color;ctx.lineWidth=p.lw*.8;ctx.shadowColor='rgba(255,90,30,.9)';ctx.shadowBlur=22*(1-.5*k)+8;ctx.stroke(glow);ctx.restore();\nstrands.forEach(([off,alpha,scale],s)=>{ctx.globalAlpha=alpha;ctx.strokeStyle=p.color;\nfor(let i=1;i<=N;i++){const u0=(i-1)/N;if(u0>=e)break;const u1=Math.min(i/N,e);const [ax,ay]=at(u0),[bx,by]=at(u1);ctx.lineWidth=width(u1)*scale;\nconst o=off*p.lw+Math.sin(u1*41+s*3)*1.2;ctx.beginPath();ctx.moveTo(ax,ay+o);ctx.lineTo(bx,by+o);ctx.stroke();}});\nctx.shadowBlur=0;\nconst [tx,ty]=at(e);\nif(k<1){ctx.globalAlpha=1;ctx.fillStyle='#FFE3C2';ctx.shadowColor='rgba(255,140,60,1)';ctx.shadowBlur=26;ctx.beginPath();ctx.arc(tx,ty,p.lw*.42,0,Math.PI*2);ctx.fill();ctx.shadowBlur=0;}\nfor(let j=0;j.42)continue;\nconst [bx,by]=at(u),a=-Math.PI*.5+(hash(j+p.seed*10)-.5)*2.4,v=160+hash(j+7)*260;\nconst px=bx+Math.cos(a)*v*age-60*age,py=by+Math.sin(a)*v*age+420*age*age;\nctx.globalAlpha=Math.max(0,1-age/.42);ctx.strokeStyle=hash(j+3)<.4?'#FFE3C2':p.color;ctx.lineWidth=2.4;ctx.beginPath();ctx.moveTo(px,py);ctx.lineTo(px-Math.cos(a)*14,py-Math.sin(a)*14+8*age);ctx.stroke();}\nctx.globalAlpha=1;ctx.restore();\n});" }, { "css": "canvas{display:block;width:100%;height:100%}", "html": "", "inputs": { "f": 2.1, "h": 130, "w": 1130, "at": 0.08, "lw": 17, "x0": 30, "x1": 1104, "y0": 56, "y1": 72, "amp": 6, "len": 0.34, "seed": 4.1, "color": "#FF6B35", "flick": 14, "sparks": 14 }, "adapter": "canvas-2d", "layerId": "skills-strike-2", "javascript": "const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d',{alpha:true});const W=canvas.width=jsoncut.width,H=canvas.height=jsoncut.height,p=jsoncut.inputs;const hash=n=>{const x=Math.sin(n*91.731)*43758.5453;return x-Math.floor(x)};jsoncut.onFrame((ms)=>{ctx.clearRect(0,0,W,H);\nconst t=ms/1000,sx=W/p.w,sy=H/p.h;ctx.save();ctx.scale(sx,sy);\nconst k=Math.max(0,Math.min(1,(t-p.at)/p.len));\nif(k<=0){ctx.restore();return;}\nconst ease=x=>x<.5?2*x*x:1-Math.pow(-2*x+2,2)/2,inv=u=>u<.5?Math.sqrt(u/2):1-Math.sqrt((1-u)/2);\nconst e=ease(k),N=180;\nconst at=u=>{const x=p.x0+(p.x1-p.x0)*u;let y=p.y0+(p.y1-p.y0)*u+Math.sin(u*Math.PI*p.f+p.seed)*p.amp+Math.sin(u*Math.PI*p.f*2.7+p.seed*1.7)*p.amp*.4;\nif(u>.9)y-=Math.pow((u-.9)/.1,2)*p.flick;return [x,y];};\nconst width=u=>p.lw*Math.pow(Math.min(1,u/.05),.5)*(1-.5*Math.pow(Math.max(0,(u-.84)/.16),1.3))*(.86+.14*Math.sin(u*23+p.seed));\nconst strands=[[0,1,1],[-.26,.45,.62],[.24,.5,.58]];\nctx.lineCap='round';ctx.lineJoin='round';\n// One blurred pass for the glow (blurring every segment cost 60–100 ms a frame), then the strands sharp on top.\nconst glow=new Path2D();glow.moveTo(...at(0));for(let i=1;i<=N;i++){const u=Math.min(i/N,e);glow.lineTo(...at(u));if(u>=e)break;}\nctx.save();ctx.globalAlpha=.85;ctx.strokeStyle=p.color;ctx.lineWidth=p.lw*.8;ctx.shadowColor='rgba(255,90,30,.9)';ctx.shadowBlur=22*(1-.5*k)+8;ctx.stroke(glow);ctx.restore();\nstrands.forEach(([off,alpha,scale],s)=>{ctx.globalAlpha=alpha;ctx.strokeStyle=p.color;\nfor(let i=1;i<=N;i++){const u0=(i-1)/N;if(u0>=e)break;const u1=Math.min(i/N,e);const [ax,ay]=at(u0),[bx,by]=at(u1);ctx.lineWidth=width(u1)*scale;\nconst o=off*p.lw+Math.sin(u1*41+s*3)*1.2;ctx.beginPath();ctx.moveTo(ax,ay+o);ctx.lineTo(bx,by+o);ctx.stroke();}});\nctx.shadowBlur=0;\nconst [tx,ty]=at(e);\nif(k<1){ctx.globalAlpha=1;ctx.fillStyle='#FFE3C2';ctx.shadowColor='rgba(255,140,60,1)';ctx.shadowBlur=26;ctx.beginPath();ctx.arc(tx,ty,p.lw*.42,0,Math.PI*2);ctx.fill();ctx.shadowBlur=0;}\nfor(let j=0;j.42)continue;\nconst [bx,by]=at(u),a=-Math.PI*.5+(hash(j+p.seed*10)-.5)*2.4,v=160+hash(j+7)*260;\nconst px=bx+Math.cos(a)*v*age-60*age,py=by+Math.sin(a)*v*age+420*age*age;\nctx.globalAlpha=Math.max(0,1-age/.42);ctx.strokeStyle=hash(j+3)<.4?'#FFE3C2':p.color;ctx.lineWidth=2.4;ctx.beginPath();ctx.moveTo(px,py);ctx.lineTo(px-Math.cos(a)*14,py-Math.sin(a)*14+8*age);ctx.stroke();}\nctx.globalAlpha=1;ctx.restore();\n});" } ], "aspectVariants": [], "compositionKind": "video", "canvasBackground": "#090A0D", "editabilityTarget": "layered" }