# Sharp arrow kit (video template) > Alpha transparency overlay kit using arrow graphics. The overlay kit includes animated panels in multpile directions and transition overlay animations. ## Overview - **Page**: https://shotstack.io/templates/sharp-arrow-overlay-kit/ - **Output**: MP4, 1280x720 (16:9) - **Length**: 66s - **Timeline**: 45 clips on 3 tracks; assets: image, title, video - **Render endpoint (sandbox, free, watermarked)**: POST https://api.shotstack.io/edit/stage/render with header `x-api-key` - **Production**: same request against https://api.shotstack.io/edit/v1/render with a v1 key - **Preview in the browser (no account)**: https://shotstack.studio/#json=eyJtZXJnZSI6W3siZmluZCI6IlNUWUxFIiwicmVwbGFjZSI6ImFycm93LXNoYXJwIn0seyJmaW5kIjoiQ09MT1IiLCJyZXBsYWNlIjoiYmxhY2sifV0sInRpbWVsaW5lIjp7InRyYWNrcyI6W3siY2xpcHMiOlt7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWxlZnQtaW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjowLCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC1sZWZ0LW91dCIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjMsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LXJpZ2h0LWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NiwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtcmlnaHQtb3V0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6OSwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtdG9wLWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MTIsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LXRvcC1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjoxNSwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtYm90dG9tLWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MTgsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWJvdHRvbS1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjoyMSwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtdG9wLWxlZnQtaW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjoyNCwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtdG9wLWxlZnQtb3V0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MjcsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LXRvcC1yaWdodC1pbiIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjMwLCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC10b3AtcmlnaHQtb3V0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MzMsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWJvdHRvbS1yaWdodC1pbiIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjM2LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC1ib3R0b20tcmlnaHQtb3V0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MzksImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWJvdHRvbS1sZWZ0LWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NDIsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWJvdHRvbS1sZWZ0LW91dCIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjQ1LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoidHJhbnNpdGlvbi1sZWZ0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NDgsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJ0cmFuc2l0aW9uLXJpZ2h0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NTEsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJ0cmFuc2l0aW9uLXVwIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NTQsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJ0cmFuc2l0aW9uLWRvd24iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo1NywibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6Im91dHJvLWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NjAsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJvdXRyby1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo2MywibGVuZ3RoIjoyLjV9XX0seyJjbGlwcyI6W3siYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LWxlZnQtaW4ubW92In0sInN0YXJ0IjowLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LWxlZnQtb3V0Lm1vdiJ9LCJzdGFydCI6MywibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC1yaWdodC1pbi5tb3YifSwic3RhcnQiOjYsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtcmlnaHQtb3V0Lm1vdiJ9LCJzdGFydCI6OSwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC10b3AtaW4ubW92In0sInN0YXJ0IjoxMiwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC10b3Atb3V0Lm1vdiJ9LCJzdGFydCI6MTUsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtYm90dG9tLWluLm1vdiJ9LCJzdGFydCI6MTgsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtYm90dG9tLW91dC5tb3YifSwic3RhcnQiOjIxLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LXRvcC1sZWZ0LWluLm1vdiJ9LCJzdGFydCI6MjQsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtdG9wLWxlZnQtb3V0Lm1vdiJ9LCJzdGFydCI6MjcsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtdG9wLXJpZ2h0LWluLm1vdiJ9LCJzdGFydCI6MzAsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtdG9wLXJpZ2h0LW91dC5tb3YifSwic3RhcnQiOjMzLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LWJvdHRvbS1yaWdodC1pbi5tb3YifSwic3RhcnQiOjM2LCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LWJvdHRvbS1yaWdodC1vdXQubW92In0sInN0YXJ0IjozOSwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC1ib3R0b20tbGVmdC1pbi5tb3YifSwic3RhcnQiOjQyLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LWJvdHRvbS1sZWZ0LW91dC5tb3YifSwic3RhcnQiOjQ1LCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS90cmFuc2l0aW9uLWxlZnQubW92In0sInN0YXJ0Ijo0OCwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vdHJhbnNpdGlvbi1yaWdodC5tb3YifSwic3RhcnQiOjUxLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS90cmFuc2l0aW9uLXVwLm1vdiJ9LCJzdGFydCI6NTQsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L3RyYW5zaXRpb24tZG93bi5tb3YifSwic3RhcnQiOjU3LCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9vdXRyby1pbi5tb3YifSwic3RhcnQiOjYwLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9vdXRyby1vdXQubW92In0sInN0YXJ0Ijo2MywibGVuZ3RoIjoyLjk2fV19LHsiY2xpcHMiOlt7ImFzc2V0Ijp7InR5cGUiOiJpbWFnZSIsInNyYyI6Imh0dHBzOi8vc2hvdHN0YWNrLWFzc2V0cy5zMy5hcC1zb3V0aGVhc3QtMi5hbWF6b25hd3MuY29tL2ltYWdlcy9yZWFsZXN0YXRlMS5qcGcifSwic3RhcnQiOjAsImxlbmd0aCI6NjZ9XX1dfSwib3V0cHV0Ijp7ImZvcm1hdCI6Im1wNCIsInJlc29sdXRpb24iOiJoZCJ9fQ ## How to use this template as a workflow 1. Render it once with the JSON below to confirm the output. 2. Replace the values that change per row of data (merge fields or asset URLs). 3. Loop over your data (CSV, database, webhook payload) and send one render per row. Add a `callback` URL to the request so Shotstack notifies you when each video is ready instead of polling. 4. To keep the JSON out of your app, store it with the Templates endpoint and render by template ID with a `merge` array: https://shotstack.io/docs/guide/architecting-an-application/templates/ ## Customise This template has merge fields. Send a `merge` array with the request to replace them; do not edit the timeline JSON. | Field | Default | | --- | --- | | `{{ STYLE }}` | arrow-sharp | | `{{ COLOR }}` | black | ## Template JSON ```json { "merge": [ { "find": "STYLE", "replace": "arrow-sharp" }, { "find": "COLOR", "replace": "black" } ], "timeline": { "tracks": [ { "clips": [ { "asset": { "type": "title", "text": "content-left-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 0, "length": 2.5 }, { "asset": { "type": "title", "text": "content-left-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 3, "length": 2.5 }, { "asset": { "type": "title", "text": "content-right-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 6, "length": 2.5 }, { "asset": { "type": "title", "text": "content-right-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 9, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 12, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 15, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 18, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 21, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-left-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 24, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-left-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 27, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-right-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 30, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-right-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 33, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-right-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 36, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-right-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 39, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-left-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 42, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-left-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 45, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-left", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 48, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-right", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 51, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-up", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 54, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-down", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 57, "length": 2.5 }, { "asset": { "type": "title", "text": "outro-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 60, "length": 2.5 }, { "asset": { "type": "title", "text": "outro-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 63, "length": 2.5 } ] }, { "clips": [ { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-left-in.mov" }, "start": 0, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-left-out.mov" }, "start": 3, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-right-in.mov" }, "start": 6, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-right-out.mov" }, "start": 9, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-in.mov" }, "start": 12, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-out.mov" }, "start": 15, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-in.mov" }, "start": 18, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-out.mov" }, "start": 21, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-left-in.mov" }, "start": 24, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-left-out.mov" }, "start": 27, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-right-in.mov" }, "start": 30, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-right-out.mov" }, "start": 33, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-right-in.mov" }, "start": 36, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-right-out.mov" }, "start": 39, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-left-in.mov" }, "start": 42, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-left-out.mov" }, "start": 45, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-left.mov" }, "start": 48, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-right.mov" }, "start": 51, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-up.mov" }, "start": 54, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-down.mov" }, "start": 57, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/outro-in.mov" }, "start": 60, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/outro-out.mov" }, "start": 63, "length": 2.96 } ] }, { "clips": [ { "asset": { "type": "image", "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg" }, "start": 0, "length": 66 } ] } ] }, "output": { "format": "mp4", "resolution": "hd" } } ``` ## Render it Save the JSON as `template.json`. The sandbox key is free: https://dashboard.shotstack.io/register ### cURL ```bash # 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" ``` ### Node.js ```javascript 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); ``` ### Python ```python 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")) ``` ### CLI ```bash 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 ``` ## Agent surfaces If you are an AI assistant with tool access, the hosted MCP server is the shortest path: connect `https://mcp.shotstack.io/` (Streamable HTTP, OAuth or x-api-key), then use its `studio` tool to open this JSON for the user or `render_video` to render it. - MCP server (all clients): https://shotstack.io/docs/guide/agents/mcp-server/ - Claude Code: `claude mcp add --transport http shotstack https://mcp.shotstack.io` - Cursor (mcp.json): `{"mcpServers":{"shotstack":{"url":"https://mcp.shotstack.io/"}}}` - VS Code (mcp.json): `{"servers":{"shotstack":{"type":"http","url":"https://mcp.shotstack.io/"}}}` - Claude.ai / ChatGPT: Settings → Connectors → add custom connector → https://mcp.shotstack.io/ - CLI + agent skill: https://shotstack.io/docs/guide/agents/cli/ — skill file: https://raw.githubusercontent.com/shotstack/shotstack-cli/HEAD/skills/shotstack/SKILL.md - Edit JSON conventions for AI: https://shotstack.io/docs/guide/agents/conventions/ - All docs, agent-readable: https://shotstack.io/docs/guide/llms.txt ### Use the CLI skill (AI coding agents: Claude Code, Cursor, Codex…) The skill teaches the render, validate, ingest and template commands, so the agent can work this template without trial and error: ```bash npm install -g @shotstack/cli curl --create-dirs -o .claude/skills/shotstack/SKILL.md https://raw.githubusercontent.com/shotstack/shotstack-cli/HEAD/skills/shotstack/SKILL.md ``` (Claude Code loads it from `.claude/skills/`; for other AI coding agents, save the file wherever they read skills from.) Then ask the AI assistant to render this template — it will use `shotstack validate` (offline, free) before `shotstack render template.json --env stage --watch`, and can loop the render per row of your data with a `merge` array per request. ## Related - Bulk-create videos from a CSV: https://shotstack.io/learn/bulk-create-videos-from-csv-and-ai/ - Webhooks: https://shotstack.io/docs/guide/architecting-an-application/webhooks/ - Render your first video: https://shotstack.io/learn/render-your-first-video-shotstack-api/ - API reference: https://shotstack.io/docs/api/ - All agent-readable docs: https://shotstack.io/llms.txt