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.

Concentric ripple video transition v1.0.0

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

New

  • 515 downloads
  • 128 likes
  • 114 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install ripple-waves-transition

First time: connect the CLI with

npx --yes palatekit@latest login

A 4-second HyperFrames block (1920 x 1080) that moves from scene A to scene B with a WebGL shader. Exponential sine waves with sharp crests and broad troughs distort both scenes in opposite phases. You replace the two sample scenes with your own.

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

  • ripple-waves.html: the composition with the readable transition shader
  • registry-item.json: the HyperFrames install descriptor
  • README.md: usage guide

Good fit for

  • A smooth cut between two shots or sections
  • Brand or product clips with a liquid look
  • Animated slideshow transitions

Not for

  • Render setups without WebGL
  • Subtle transitions with no distortion

Tags

  • transition
  • shader
  • webgl
  • ripple
  • hyperframes

About

You say

"Add the Ripple Waves transition between my intro scene and my product scene."

Transition between a yellow and a blue scene with concentric ripples distorting the frame.

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 with your own
  3. Set the duration and run the render

Content preview

Files

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

Origin and licence

Modified by PalateKit

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

Notice

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

Where do I put my scenes?

In the #s1 (start scene) and #s2 (end scene) elements; the shader captures their render as a texture.

Does it work without WebGL?

No, without WebGL the composition falls back to an empty timeline; you need a WebGL-capable render browser.