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.

Gravitational lens shader transition v1.0.0

Use this resource to create a warping video transition between two scenes

New

  • 488 downloads
  • 108 likes
  • 122 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install gravitational-lens-transition

First time: connect the CLI with

npx --yes palatekit@latest login

The agent builds on this HyperFrames block to reproduce a gravitational lens effect in WebGL: the image bends toward a dark center, colors split, then scene B takes over. The file is a demo with two sample scenes and a text panel; the agent swaps the scenes for your content. You get a dramatic 1920x1080 transition.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames
  • WebGL
  • Connection to load GSAP and fonts
Licence
Apache-2.0

Similar resources

View all

What you get

  • gravitational-lens.html: the HyperFrames composition with the WebGL shader (1920x1080, 4 s)
  • registry-item.json: the block metadata
  • README.md: usage guide

Good fit for

  • Linking two sections of a launch video or trailer
  • Testing a dramatic transition before the final edit
  • Creating a pull-in effect for a reveal

Not for

  • A restrained or corporate video
  • A render setup without WebGL
  • A case where you cannot replace the sample scenes and text panel

Tags

  • transition
  • shader
  • webgl
  • distortion
  • hyperframes

About

You say

"Take the gravitational lens transition and replace scenes A and B with my product title, then my logo."

Two colored scenes linked by a distortion pulling the image toward a central point, with a text panel on the right.

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

Show more

Prerequisites

You bring
The content of the two scenes to link and The timing you want for the transition
Dependencies
HyperFrames, WebGL, and Connection to load GSAP and fonts

How to use it

  1. Install the block in the compositions folder of your HyperFrames project.
  2. Ask the agent to replace the sample scenes (#s1, #s2) and remove the right-hand text panel.
  3. Render the video and set the transition timing (between 1 s and 3 s).

Content preview

Files

  • gravitational-lens.html12.4 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md1.1 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/gravitational-lens
Licence
Apache-2.0

Notice

Version modifiée de « Gravitational Lens » (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 file ready to drop onto a video as is?

No, it is a demo: scenes A and B, the grid and the right panel are meant to be replaced with your content.

Which external dependencies?

It loads GSAP and Google Fonts from the internet, so a connection is needed at render time.