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.

Distortion transitions showcase v1.0.0

Use this resource to add distortion transitions between two scenes

New

  • 458 downloads
  • 151 likes
  • 141 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install distortion-transitions-showcase

First time: connect the CLI with

npx --yes palatekit@latest login

The agent provides a 21-second demo video with three transitions between a scene A and a scene B: an RGB-offset glitch, chromatic aberration and a ripple. The code is readable, so you can lift the transition you want for your own scenes.

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

  • transitions-distortion.html: the 1920x1080 demo, 21 seconds
  • README.md: sequence and parts to reuse
  • registry-item.json: dimensions, duration and target path

Good fit for

  • Choosing a transition effect for an edit
  • Dressing creator videos with a glitch look
  • Learning how to build a transition in GSAP

Not for

  • Discreet, corporate transitions
  • A ready-made effect to drop on your shots with no adaptation

Tags

  • transition
  • glitch
  • distortion
  • gsap
  • demo

About

You say

"Reuse the glitch transition from this template between my two scenes, with red and blue offsets."

A dark navy background with the word ONE large and faint, and 'Scene A' below it.

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

Show more

Prerequisites

You bring
Your own scenes to join
Dependencies
HyperFrames, Node.js, and FFmpeg

How to use it

  1. Copy the HTML into your HyperFrames project.
  2. Find the transition you want in the timeline and reuse it.
  3. Run the preview then render.

Content preview

Files

  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json0.8 KB
  • transitions-distortion.html11.4 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Distortion Transitions » (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.