Falling bars animation effect intro video template

{
    "timeline": {
        "fonts": [
            {
                "src": "https://templates.shotstack.io/basic/asset/font/barlow-extrabold.ttf"
            },
            {
                "src": "https://templates.shotstack.io/basic/asset/font/barlow-extralight.ttf"
            },
            {
                "src": "https://templates.shotstack.io/basic/asset/font/barlow-regular.ttf"
            }
        ],
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3",
            "effect": "fadeOut"
        },
        "background": "#0036dd",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/logos/news-white.png"
                        },
                        "start": 1.5,
                        "length": 3.5,
                        "fit": "none",
                        "offset": {
                            "y": 0.2
                        },
                        "transition": {
                            "in": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Main Headline</p>",
                            "css": "p { font-family: 'Barlow ExtraBold'; color: #f2f2f2; font-size: 80px; }",
                            "width": 1000,
                            "height": 100
                        },
                        "start": 1.9,
                        "length": 3.1,
                        "offset": {
                            "y": -0.02
                        },
                        "transition": {
                            "in": "slideRight"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Summary copy and more information</p>",
                            "css": "p { font-family: 'Barlow'; color: #f2f2f2; font-size: 60px; }",
                            "width": 1000,
                            "height": 150,
                            "position": "top"
                        },
                        "start": 2.1,
                        "length": 2.9,
                        "offset": {
                            "y": -0.14
                        },
                        "transition": {
                            "in": "slideRight"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p><b>Tel:</b> 999-999-9999</p>",
                            "css": "p { font-family: 'Barlow ExtraLight'; color: #f2f2f2; font-size: 40px; } ",
                            "width": 1000,
                            "height": 50
                        },
                        "start": 2.3,
                        "length": 2.7,
                        "position": "center",
                        "offset": {
                            "y": -0.25
                        },
                        "transition": {
                            "in": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>&nbsp;</p>",
                            "width": 384,
                            "height": 1080,
                            "background": "#dddddd"
                        },
                        "start": 0.0,
                        "length": 1.2,
                        "position": "left",
                        "offset": {
                            "x": 0.0
                        },
                        "transition": {
                            "out": "carouselDownSlow"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>&nbsp;</p>",
                            "width": 384,
                            "height": 1080,
                            "background": "#dddddd"
                        },
                        "start": 0.0,
                        "length": 1.4,
                        "position": "left",
                        "offset": {
                            "x": 0.2
                        },
                        "transition": {
                            "out": "carouselDownSlow"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>&nbsp;</p>",
                            "width": 384,
                            "height": 1080,
                            "background": "#dddddd"
                        },
                        "start": 0.0,
                        "length": 1.6,
                        "position": "left",
                        "offset": {
                            "x": 0.4
                        },
                        "transition": {
                            "out": "carouselDownSlow"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>&nbsp;</p>",
                            "width": 384,
                            "height": 1080,
                            "background": "#dddddd"
                        },
                        "start": 0.0,
                        "length": 1.8,
                        "position": "left",
                        "offset": {
                            "x": 0.6
                        },
                        "transition": {
                            "out": "carouselDownSlow"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>&nbsp;</p>",
                            "width": 384,
                            "height": 1080,
                            "background": "#dddddd"
                        },
                        "start": 0.0,
                        "length": 2,
                        "position": "left",
                        "offset": {
                            "x": 0.8
                        },
                        "transition": {
                            "out": "carouselDownSlow"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "1080"
    }
}

Animated panels create an effect that looks like falling bars. Text and logo is then displayed once the effect finishes.

Open in Studio

No account needed until you render.

Render with your AI assistant

Open in Claude Open in ChatGPT

Add the Shotstack MCP server to your editor, then paste the prompt

Add to Cursor Install in VS Code Other clients

When you want to automate this

One video per row of your data.

1
See it
OutputMP4
Size1920 × 1080 (16:9)
Length5s
Frame ratedefault (25 fps)
Tracks / clips3 / 9
Assets used8 html, 1 image
Soundtrackyes
Merge fieldsnone (edit the JSON)
2
Make it yours

Swap these in the JSON:

  • 8 HTML/text blocks
  • 1 image URL
  • 1 soundtrack URL

To drive it from data, turn any value into a {{ PLACEHOLDER }} merge field.

3
Run it once

Save the JSON above as template.json, then render in the free sandbox:

# Save the JSON above as template.json, then:
curl -X POST https://api.shotstack.io/edit/stage/render \
  -H "x-api-key: $SHOTSTACK_API_KEY" \
  -H "Content-Type: application/json" \
  -d @template.json

# Poll until status is "done", then download response.url
curl https://api.shotstack.io/edit/stage/render/RENDER_ID -H "x-api-key: $SHOTSTACK_API_KEY"
import { readFileSync } from 'node:fs';

const headers = { 'x-api-key': process.env.SHOTSTACK_API_KEY, 'Content-Type': 'application/json' };
const edit = JSON.parse(readFileSync('template.json', 'utf8'));

const { response } = await fetch('https://api.shotstack.io/edit/stage/render', {
  method: 'POST', headers, body: JSON.stringify(edit)
}).then((r) => r.json());

let render;
do {
  await new Promise((r) => setTimeout(r, 3000));
  render = (await fetch(`https://api.shotstack.io/edit/stage/render/${response.id}`, { headers }).then((r) => r.json())).response;
} while (!['done', 'failed'].includes(render.status));

console.log(render.status, render.url);
import json, os, time, requests

headers = {"x-api-key": os.environ["SHOTSTACK_API_KEY"]}
with open("template.json") as f:
    edit = json.load(f)

render_id = requests.post("https://api.shotstack.io/edit/stage/render", json=edit, headers=headers).json()["response"]["id"]

while True:
    render = requests.get(f"https://api.shotstack.io/edit/stage/render/{render_id}", headers=headers).json()["response"]
    if render["status"] in ("done", "failed"):
        break
    time.sleep(3)

print(render["status"], render.get("url"))
npm install -g @shotstack/cli
export SHOTSTACK_API_KEY=your_sandbox_key

shotstack validate template.json          # offline schema check, free
shotstack render template.json --env stage --watch

Sandbox renders are free and watermarked. Production: the v1 endpoint and key. SDKs

4
Automate it

One render is a demo. A video for every row of your data is the workflow.

Paste into Claude, ChatGPT or Cursor — your AI assistant builds the workflow around your data.

Node.js, one render per CSV row, wired to this template. Setup steps in the header.

Guides: Bulk-create from a CSV · Webhooks · Templates endpoint · Render your first video

AI assistants: Markdown () · · · CLI skill: SKILL.md () · MCP server

Common questions

How do I make the Falling bars animation effect intro template my own?

Replace the asset URLs in the JSON with your own files and adjust text, timing or effects on each clip. To generate many variations from data, turn the values you change into merge fields ({{ PLACEHOLDER }}) and pass a merge array with each request.

Can I render this in full HD or 4K for YouTube?

Yes. This template renders 1920×1080 by default. Set output.resolution to "1080" or output.size to a larger 16:9 size in the JSON; the layout scales with it.

Can I use my own photos?

Yes. The template uses 1 image; replace each image asset's src with a public URL of your own file (JPG, PNG or WebP). Keep the timing and effects, or adjust them per clip.

How do I change the text and fonts?

Edit the text on each text asset in the JSON. Fonts come from the timeline fonts list or the asset's font family; add your own font file URL to timeline.fonts to use a brand typeface.

VIEW ALL TEMPLATES

Experience Shotstack for yourself,
with no risk, and generate your first
  video in 5 minutes.

check

Unlimited developer sandbox

check

No credit card required

Try Free arrow Talk to an expert arrow