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.

Shader glitch transition between two scenes v1.0.0

Use this resource to add a glitch transition between two shots of a video

New

  • 523 downloads
  • 246 likes
  • 109 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install glitch-shader-transition

First time: connect the CLI with

npx --yes palatekit@latest login

The agent reuses the file's transition shader to move from one scene to another with scan lines, scrambled blocks, chromatic aberration and brightness flicker. The demo page serves as an implementation example: you replace its scenes with your own content.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (npm: hyperframes)
  • Node.js
  • FFmpeg (MP4 rendering)
Licence
Apache-2.0

Similar resources

View all

What you get

  • glitch.html: the HyperFrames composition (1920×1080, 4 s) with the WebGL transition shader
  • A demo scene with text to replace
  • A block description file (registry-item.json)
  • A preview video and image

Good fit for

  • A bold transition between two shots of a social video
  • A technical or digital look for a launch video
  • Learning to write a WebGL transition for HyperFrames

Not for

  • A soft or discreet transition
  • Audiences sensitive to flicker (tone down the intensity)
  • An environment without WebGL

Tags

  • transition
  • glitch
  • shader
  • webgl

About

You say

"Use the glitch-shader-transition block between my intro shot and my product demo."

A blueprint-style scene on a blue-grey background with a text panel.

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

Show more

Prerequisites

You bring
The two scenes to join and The moment of the transition
Dependencies
HyperFrames (npm: hyperframes), Node.js, and FFmpeg (MP4 rendering)

How to use it

  1. Add the block to your HyperFrames project.
  2. Replace the two demo scenes with your shots.
  3. Preview, tune the glitch intensity, then render.

Content preview

Files

  • glitch.html12.7 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/glitch
Licence
Apache-2.0

Notice

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

Is the glitch adjustable?

Yes: intensity and duration are set in the shader code and the GSAP timeline.

Do I need a graphics card?

The render uses WebGL, so a compatible browser is needed in the rendering environment.