> For the complete documentation index, see [llms.txt](https://capsule-video.gitbook.io/cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://capsule-video.gitbook.io/cloud/scripts-1/advanced-scripting/animated-overlays.md).

# Adding Alpha Transparent Videos

You can easily add animated overlays to your script using either H.264 or H.265 video files. Before you start, create your overlay in a video editor and make sure to export at the same resolution as your script. Hypno supports alpha transparency with H.264 and H.265 video files. Follow the export directions below. 

### Adding an Animated Overlay with H.264 

H.264 files do not render transparency, so in order to add video animations as overlays, you'll need to provide the script with two files: one normal export (RGB), and one with just the alpha channel. 

We recommend using Adobe Media Encoder which has a "Render Alpha Channel Only" Option in Export Settings. 

![](/files/-M1RJQsRqKxWMTSSUlpo)

Once you have [imported](/cloud/scripts-1/getting-started-with-nyx.md#importing-media-previewing-and-testing) your video files to your project, you'll add them to the your timeline, putting your alpha track behind the main video and the RGB track in front of the main video. Then, you set the alpha track as the `matte` key when setting up the RGB clip in `buildTimeline`. See the code and NYX examples below. 

```javascript
import * as hypno from './stl.js'

// Animated Overlay Demo H.264 RGB+ALPHA

const alphaTrack = composition.track("alpha")
const mainTrack = composition.track("main")
const rgbTrack = composition.track("rgb")

let runtime = 150 //setting a global duration to 5 seconds

hypno.buildTimeline({

    fps: 30,
    resolution: new Vector(960, 1280),
    clips: [
        {
            start: 0,
            duration: runtime,
            track: alphaTrack,
            asset: new Asset("./graphics_alpha.mp4")
        },
        {
            // we're going to omit the asset key so the 
            // track defaults to the camera input
            start: 0,
            duration: runtime,
            track: mainTrack
        },
        {
            start: 0,
            duration: runtime,
            track: rgbTrack,
            matte: alphaTrack,
            asset: new Asset("./graphics.mp4")
        }
    ]
})
```

{% embed url="<https://vimeo.com/398034810/679929ee78>" %}

Here's a project file of the code above if you want to try it out in NYX:

{% file src="/files/-M2ZWar5pjy43S2qpQ5d" %}

### Adding an Animated Overlay with H.265 (HVEC)

Hypno script also supports H.265, a new video codec that can render transparency. Adobe does not support the H.265 video format, but you can easily convert your graphics to H.265 using Apple's [Compressor](https://apps.apple.com/us/app/compressor/id424390742?mt=12) app.&#x20;

To add an animated overlay using an H.265 file, first you will need to [import](/cloud/scripts-1/getting-started-with-nyx.md#importing-media-previewing-and-testing) your video file to your project. Then, you'll add it to the your timeline, putting your overlay track in front of the main video track. Lastly, you'll set the `alpha` key to true when setting up the overlay clip in the `clips` array to account for the H.265 alpha channel. See the code below. &#x20;

```javascript
const mainTrack = composition.track("main")
const overlayTrack = composition.track("overlay")

let runtime = 150 //setting a global duration to 5 seconds

hypno.buildTimeline({

    fps: 30,
    resolution: new Vector(960, 1280),
    clips: [
        {
            // we're going to omit the asset key so the 
            // track defaults to the camera input
            start: 0,
            duration: runtime,
            track: mainTrack
        },
        {
            start: 0,
            duration: runtime,
            track: overlayTrack,
            alpha: true,
            asset: new Asset("./graphics.mp4")
        }
    ]
})
```