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.

Chromatic radial split transition v1.0.0

Use this resource to link two video scenes with a chromatic transition

New

  • 477 downloads
  • 122 likes
  • 229 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install chromatic-radial-split

First time: connect the CLI with

npx --yes palatekit@latest login

A 4-second HyperFrames block (1920 x 1080) that connects scene A to scene B with a WebGL shader. The RGB channels of the outgoing scene spread outward while those of the incoming scene converge toward the center. The result is a dynamic, glitch-like modern look.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (HeyGen)
  • Node.js
  • WebGL-capable browser
Licence
Apache-2.0

Similar resources

View all

What you get

  • chromatic-radial-split.html: the composition with the readable shader
  • registry-item.json: the HyperFrames install descriptor
  • README.md: usage guide

Good fit for

  • Fast-paced teasers and trailers
  • Moves between sections of a product video
  • Music clips or lyric videos

Not for

  • Calm or corporate videos
  • Render setups without WebGL

Tags

  • transition
  • chromatic
  • glitch
  • shader
  • hyperframes

About

You say

"Add a chromatic radial split transition between my two scenes and keep it at 4 seconds."

Transition between a navy and a purple scene with slightly offset color channels.

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

Show more

Prerequisites

You bring
Two scenes to connect (HTML or images)
Dependencies
HyperFrames (HeyGen), Node.js, and WebGL-capable browser

How to use it

  1. Install the block in your HyperFrames project
  2. Replace the content of scenes #s1 and #s2
  3. Run the render

Content preview

Files

  • chromatic-radial-split.html12.4 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json0.8 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Chromatic Radial Split » (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 change the intensity?

Edit the channel offset coefficients in the shader (variable progTrans); the script is readable.

Can I use it with videos?

Yes, as long as they are drawn inside scenes #s1 and #s2, whose render is captured as a texture.