[{"data":1,"prerenderedAt":460},["ShallowReactive",2],{"\u002Fdocs\u002Fhow-to-video-templates":3},{"id":4,"title":5,"body":6,"category":448,"date":449,"description":450,"extension":451,"heroImage":452,"meta":453,"navigation":454,"path":455,"readingMinutes":456,"seo":457,"stem":458,"tool":448,"__hash__":459},"docs\u002Fdocs\u002Fhow-to-video-templates.md","How to: build a video template in Studio",{"type":7,"value":8,"toc":437},"minimark",[9,14,29,32,36,43,46,53,57,81,98,101,107,111,117,131,138,142,148,154,192,198,205,215,225,229,232,254,261,275,278,284,288,294,298,305,368,384,388,397,403,419,433],[10,11,13],"h2",{"id":12},"what-you-are-building","What you are building",[15,16,17,18,22,23,28],"p",{},"A video template is not a separate kind of thing. It is a normal Bluepic template with an ",[19,20,21],"strong",{},"animation",": a duration, a frame rate, and one or more properties that change over time. You build it visually in ",[24,25,27],"a",{"href":26},"\u002Fdocs\u002Fbuilding-templates-in-bluepic-studio","Bluepic Studio",", and you render it from your code by changing one field on the request. No timeline export, no second tool.",[15,30,31],{},"This guide takes a static template and animates it, step by step.",[10,33,35],{"id":34},"step-1-design-the-template","Step 1: Design the template",[15,37,38,39,42],{},"Start from a normal template. Add your text, images, and shapes, connect the fields you want to fill from data, and get the layout looking right at rest. If you are new to this, follow ",[24,40,41],{"href":26},"Creating templates in Bluepic Studio"," first, then come back.",[15,44,45],{},"Everything you already know about templates still applies. Animation is something you add on top, not a different mode you design in.",[15,47,48],{},[49,50],"img",{"alt":51,"src":52},"The Bluepic Studio editor: the design canvas, the layer list on the right, and the tools in the top toolbar.","\u002Fscreenshots\u002Fstudio-video-editor.png",[10,54,56],{"id":55},"step-2-switch-the-format-to-video","Step 2: Switch the format to video",[15,58,59,60,63,64,67,68,72,73,76,77,80],{},"Open ",[19,61,62],{},"Project Settings"," (the gear icon, top right) and set the output ",[19,65,66],{},"Format"," to a video format (",[69,70,71],"code",{},"mp4",", ",[69,74,75],{},"mov",", or ",[69,78,79],{},"webm","). Two things happen:",[82,83,84,92],"ul",{},[85,86,87,88,91],"li",{},"An ",[19,89,90],{},"Animation"," section appears in Project Settings.",[85,93,87,94,97],{},[19,95,96],{},"Animate a property"," button appears in the editor toolbar.",[15,99,100],{},"Setting a video format is what tells Studio you intend to animate. You can switch back to a still format at any time.",[15,102,103],{},[49,104],{"alt":105,"src":106},"Project Settings with the format set to MP4 and the Animation section showing Duration and FPS below it.","\u002Fscreenshots\u002Fstudio-video-project-settings.png",[10,108,110],{"id":109},"step-3-set-the-duration-and-frame-rate","Step 3: Set the duration and frame rate",[15,112,113,114,116],{},"In the ",[19,115,90],{}," section of Project Settings (shown above), set:",[82,118,119,125],{},[85,120,121,124],{},[19,122,123],{},"Duration (s)",": how long the clip runs, in seconds.",[85,126,127,130],{},[19,128,129],{},"FPS",": frames per second (24 and 30 are typical).",[15,132,133,134,137],{},"That is the clip's timeline. An 8-second clip at 24fps is 192 frames, and the engine will evaluate your whole template once per frame when it renders. Click ",[19,135,136],{},"Apply",".",[10,139,141],{"id":140},"step-4-turn-a-property-into-an-animation","Step 4: Turn a property into an animation",[15,143,144,145,147],{},"This is the core move. In the top toolbar, click the ",[19,146,96],{}," button (hover a toolbar button to see its name). Studio enters animate mode and highlights the properties that can be animated. Then click the property you want to move.",[15,149,150],{},[49,151],{"alt":152,"src":153},"The \"Animate a property\" button in the top toolbar, with its tooltip.","\u002Fscreenshots\u002Fstudio-video-animate-button.png",[15,155,156,157,160,161,72,164,167,168,72,171,174,175,72,178,72,181,184,185,188,189,137],{},"Only ",[19,158,159],{},"numeric"," properties are animatable, because animation interpolates a number between values: position (",[69,162,163],{},"x",[69,165,166],{},"y","), size (",[69,169,170],{},"width",[69,172,173],{},"height","), the transform values (",[69,176,177],{},"translateX\u002FY",[69,179,180],{},"scaleX\u002FY",[69,182,183],{},"rotate","), and ",[69,186,187],{},"opacity",". Text content and colours are not interpolated this way. You will find these in the element's properties panel on the left, for example under ",[19,190,191],{},"Transforms",[15,193,194],{},[49,195],{"alt":196,"src":197},"An element selected, with its numeric properties (Transforms: Translate, Scale, Rotate) in the left panel.","\u002Fscreenshots\u002Fstudio-video-transforms.png",[15,199,200,201,204],{},"The moment you click a property, Studio ",[19,202,203],{},"freezes its current value as the first keyframe"," and rewrites the property as an expression:",[206,207,212],"pre",{"className":208,"code":210,"language":211},[209],"language-text","position.x = ANIMATE(TIME, LINEAR(0, 750))\n","text",[69,213,210],{"__ignoreMap":214},"",[15,216,217,218,221,222,224],{},"Read that as: \"at ",[69,219,220],{},"TIME"," 0 seconds, ",[69,223,163],{}," is 750.\" Nothing moves yet, because there is only one keyframe. The timeline opens, focused on this property, ready for you to add more.",[10,226,228],{"id":227},"step-5-add-keyframes-on-the-timeline","Step 5: Add keyframes on the timeline",[15,230,231],{},"Now build the motion:",[233,234,235,241,251],"ol",{},[85,236,237,240],{},[19,238,239],{},"Move the playhead"," on the timeline to a later moment, say 2 seconds.",[85,242,243,246,247,250],{},[19,244,245],{},"Change the property's value"," (drag the element, or type a new number). Studio records a ",[19,248,249],{},"new keyframe"," at that time.",[85,252,253],{},"Repeat for each moment you want to pin down.",[15,255,256,257,260],{},"For each keyframe you can choose how the value ",[19,258,259],{},"eases into it",":",[82,262,263,269],{},[85,264,265,268],{},[19,266,267],{},"Linear",": a straight, constant-speed move.",[85,270,271,274],{},[19,272,273],{},"Bezier",": an eased move (slow-in, slow-out, or an overshoot), using a cubic-bezier curve, exactly like CSS easing.",[15,276,277],{},"Between keyframes, the value interpolates. Before the first keyframe and after the last, it holds. Animate as many properties on as many elements as you like; each gets its own track.",[15,279,280],{},[49,281],{"alt":282,"src":283},"The timeline keyframe editor: a property track (image4 · translateX) with keyframes, the Time and Value fields, and the Linear \u002F Bezier interpolation buttons.","\u002Fscreenshots\u002Fstudio-video-timeline.png",[10,285,287],{"id":286},"step-6-preview","Step 6: Preview",[15,289,290,291,293],{},"Scrub the timeline. As you drag, Studio sets ",[69,292,220],{}," and re-evaluates every expression live, so you see the exact frames the render will produce. This preview is instant and free; nothing is rendered server-side yet.",[10,295,297],{"id":296},"step-7-render-the-video-over-the-api","Step 7: Render the video over the API",[15,299,300,301,304],{},"When it looks right, ",[19,302,303],{},"publish"," the template. Now render it from your code exactly like any other template, but ask for a video format:",[206,306,310],{"className":307,"code":308,"language":309,"meta":214,"style":214},"language-bash shiki shiki-themes github-dark","curl -N -X POST \"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\" \\\n  -H \"Authorization: \u003Cyour API key>\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{ \"templateId\": \"\u003Cyour template id>\", \"data\": { }, \"format\": \"mp4\" }'\n","bash",[69,311,312,338,349,359],{"__ignoreMap":214},[313,314,317,321,325,328,332,335],"span",{"class":315,"line":316},"line",1,[313,318,320],{"class":319},"svObZ","curl",[313,322,324],{"class":323},"sDLfK"," -N",[313,326,327],{"class":323}," -X",[313,329,331],{"class":330},"sU2Wk"," POST",[313,333,334],{"class":330}," \"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\"",[313,336,337],{"class":323}," \\\n",[313,339,341,344,347],{"class":315,"line":340},2,[313,342,343],{"class":323},"  -H",[313,345,346],{"class":330}," \"Authorization: \u003Cyour API key>\"",[313,348,337],{"class":323},[313,350,352,354,357],{"class":315,"line":351},3,[313,353,343],{"class":323},[313,355,356],{"class":330}," \"Content-Type: application\u002Fjson\"",[313,358,337],{"class":323},[313,360,362,365],{"class":315,"line":361},4,[313,363,364],{"class":323},"  -d",[313,366,367],{"class":330}," '{ \"templateId\": \"\u003Cyour template id>\", \"data\": { }, \"format\": \"mp4\" }'\n",[15,369,370,371,374,375,379,380,137],{},"Fill ",[69,372,373],{},"data"," with the fields you connected in Step 1, one clip per data row. A still render is 1 credit; a video is metered by length and resolution (",[24,376,378],{"href":377},"\u002Fdocs\u002Fvideo-credits","how video credits work","). For the response shape (video streams progress and returns a hosted URL), see ",[24,381,383],{"href":382},"\u002Fdocs\u002Fone-template-two-outputs","one template, two outputs",[10,385,387],{"id":386},"how-the-animation-works-briefly","How the animation works, briefly",[15,389,390,391,393,394,260],{},"Every keyframe you place is compiled into one expression on the property. The ",[69,392,96],{}," button and the timeline are a visual front end for ",[69,395,396],{},"ANIMATE",[206,398,401],{"className":399,"code":400,"language":211},[209],"ANIMATE(TIME, LINEAR(0, 750), CUBIC(2, 900, …), LINEAR(4, 750))\n",[69,402,400],{"__ignoreMap":214},[15,404,405,407,408,410,411,414,415,418],{},[69,406,396],{}," takes ",[69,409,220],{}," and your keyframes and returns the value at that moment. ",[69,412,413],{},"LINEAR(t, v)"," and ",[69,416,417],{},"CUBIC(t, v, …)"," are the straight and eased keyframes you set on the timeline. You never have to type this; it is what Studio writes as you work.",[15,420,421,422,72,425,428,429,137],{},"If you want the full model, including composition (",[69,423,424],{},"750 + ANIMATE(...)",[69,426,427],{},"840 * ANIMATE(...)",") and how frames are sampled, read ",[24,430,432],{"href":431},"\u002Fdocs\u002Fexpression-engine-over-time","the expression engine over TIME",[434,435,436],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":214,"searchDepth":340,"depth":340,"links":438},[439,440,441,442,443,444,445,446,447],{"id":12,"depth":340,"text":13},{"id":34,"depth":340,"text":35},{"id":55,"depth":340,"text":56},{"id":109,"depth":340,"text":110},{"id":140,"depth":340,"text":141},{"id":227,"depth":340,"text":228},{"id":286,"depth":340,"text":287},{"id":296,"depth":340,"text":297},{"id":386,"depth":340,"text":387},"platform","2026-07-26","A step-by-step guide to turning a Bluepic template into an animated video, visually in Studio. Set a duration, click a property into an animation, keyframe it on the timeline, then render an MP4 over the API.","md","\u002Fdocs-images\u002Fhow-to-video-templates.svg",{},true,"\u002Fdocs\u002Fhow-to-video-templates",7,{"title":5,"description":450},"docs\u002Fhow-to-video-templates","F82tzQm4KFzUIOC3BnY6tXYDPRgi4FwGX14u3IS2YqM",1785414150422]