Once a year, every serious AI engineer ends up in the same room.
So when we put together the opening video for AIE with HyperFrames, we wanted it to feel as big as the event itself.
Here's how we built two shots that pull it off, the sponsor wall and the logo end card.
AIE shared their design system with us, their Design doc and their Frame doc. We took those and turned them into our own Frame doc: a short rulebook of colors, fonts, and overall feel that every shot follows. That's what keeps two separately-built shots looking like the same film.
The rules that mattered most here:
A near-black background, so everything bright on top of it pops.
One green and one gold, used sparingly, color only means something when it's rare.
Bold, tight headlines with a typewriter-style font for the small details.
Sharp, square edges, clean and confident.
Motion that cuts, never fades. The film snaps from beat to beat.
We used our website-to-HyperFrames skill to capture the World's Fair site and pull the real pieces we'd need straight from the source: the sponsor logos, the speaker photos, and the AIE logo. No re-creating anything by hand; we worked from the actual brand assets.
We lay the beats out in order, like a comic strip, so we know what each moment is doing before we build it. The whole film climbs, more people, more companies, more energy. Building to a peak and then a release.
(The early storyboard frames were rough mock-ups, not our final assets, so they're not shown here. The full written storyboard lives in the project folder.)
Simple call here: I knew I wanted sound effects on the zoom-out moments. The visuals are built so those hits land right on the zoom-outs, the pull-back and the whoosh happen together.
This 5×5 wall of leaders made it into the videos, and it was one of the harder compositions to pull off. The building block that flows into the sponsor reveal in the opening film.
All of these sponsors were on the World's Fair website. We knew we wanted a grid animation that would clear away the speaker cards and reveal the brands underneath, then move into a spinning carousel of the big AI names. And we wanted to land on the line "All because of you" because without the people in the room, there'd be no World's Fair at all.
The 5×5 wall of leaders — Pamela Fox dead center
2. The cards clear away to reveal hundreds of sponsor logos
3. The big AI labs lift off the grid
4. …and spin into a carousel of the major names
5. Then we pull back into the line — "All because of you"
6. …and zoom in on "you"
A couple of things that made the motion feel right: the wall opens like a wave (top-left first, rolling across) instead of all at once, and each logo starts appearing just before its face card leaves, so the screen never flashes empty.
▶️ Final output: the sponsor wall, playing (Pamela Fox centered):
![]()
This is the one that closes the film, and it's the one we're proudest of.
It started as our parallax grid animation in our HyperFrames skills pack on GitHub, which I pointed at the AIE logo. The clever part: instead of telling each dot where to go, we let it read the logo's outline and have the nearest dots snap to it — so they look like they find the shape on their own.
We're not shipping this AIE-specific file, you don't need it. Grab the parallax grid animation from our HyperFrames pack and point it at any logo you want; it reads that logo's outline and builds it out of dots, exactly like this.
1. Move 1: dots float up out of the dark
2. Move 2: the dots gather into the AIE logo's outline
3. Move 3: the outline becomes the real logo
4. Move 4: hand off to the HeyGen · HyperFrames sign-off
▶️ Final output: the logo end card, playing:
![]()
You don't have to rebuild any of this, both animations already live in our HyperFrames skills pack on GitHub. Add them with one command:
npx skills add heygen.com/hyperframesThen point the parallax grid at any logo, and the sponsor wall at your own speakers and brands.
Made with HyperFrames. Come find us at the World's Fair.
