Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Cinematic zoom transition v1.0.0

Use this resource to cut between two shots with a cinematic zoom blur

New

  • 463 downloads
  • 140 likes
  • 195 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install cinematic-zoom-transition

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies a WebGL shader that zooms the outgoing scene outward and the incoming one inward, with a radial blur and an offset of each colour channel. The block comes in a demo frame with its prompt, which you remove for your own shots.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames
  • Node.js
  • FFmpeg
Licence
Apache-2.0

Similar resources

View all

What you get

  • cinematic-zoom.html: the 1920x1080 demo with the shader, 4 seconds
  • README.md: how it works and settings
  • registry-item.json: dimensions, duration and target path

Good fit for

  • Dynamic cuts between two trailer shots
  • Launch and product presentation videos
  • Edits that want a cinema zoom effect

Not for

  • Sober or very discreet transitions
  • Renders without WebGL (the shader needs it)

Tags

  • transition
  • zoom
  • shader
  • webgl
  • cinema

About

You say

"Use the cinematic zoom transition between my intro scene and my product scene."

A yellow scene B on the left and a purple panel on the right presenting 'Cinematic Zoom' and its prompt.

Template published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
Your two shots to join
Dependencies
HyperFrames, Node.js, and FFmpeg

How to use it

  1. Copy the HTML into your HyperFrames project.
  2. Replace scenes A and B with your shots and remove the demo panel.
  3. Run the preview then render.

Content preview

Files

  • cinematic-zoom.html12.4 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json0.7 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/cinematic-zoom
Licence
Apache-2.0

Notice

Version modifiée de « Cinematic Zoom » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

How do I use it in a HyperFrames project?

Copy the HTML file into your HyperFrames project, at the target path given in registry-item.json, then run the HyperFrames preview and render.

Does it need an internet connection?

Yes for rendering: the HTML loads GSAP from a CDN (jsdelivr) and, depending on the template, Google Fonts.