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.

Radial transitions: circle iris, diamond, diagonal v1.0.0

Use this resource to switch between scenes with a circular, diamond or diagonal mask

New

  • 501 downloads
  • 201 likes
  • 112 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install radial-transitions

First time: connect the CLI with

npx --yes palatekit@latest login

The agent uses this 20-second showcase block to add radial transitions to your video. Each demo shows scene A giving way to scene B: circle iris, diamond iris, diagonal split. Mask values, durations and easing are readable in the code and copy over as they are.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames
Licence
Apache-2.0

Similar resources

View all

What you get

  • transitions-radial.html: a showcase board of 3 transitions (20 s, 1920 x 1080), readable GSAP code
  • registry-item.json: block metadata
  • README.md: usage guide

Good fit for

  • Chaining scenes in a presentation video
  • Switching sequences in a social media edit
  • Picking one of three transitions before applying it to your own shots

Not for

  • A video that does not use HyperFrames
  • A transition with light or particle effects
  • Real video clips without adapting: the demo uses text scenes

Tags

  • transition
  • mask
  • iris
  • diagonal
  • editing

About

You say

"Use the circle iris from transitions-radial between my intro scene and my product scene, over 0.5 seconds."

A demo board of radial transitions with two scenes, "ONE" and "TWO".

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

Show more

Prerequisites

You bring
Two scenes or shots to chain and The transition choice and its duration
Dependencies
HyperFrames

How to use it

  1. Open the board and pick the transition you like.
  2. Copy its GSAP lines (clipPath mask, duration, easing) into your composition.
  3. Adapt the scene ids to your shots, then render.

Content preview

Files

  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md1.3 KB
  • registry-item.json0.7 KB
  • transitions-radial.html8.6 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Radial 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 apply a transition to my shots?

Replace #scene1 and #scene2 with your two shot containers and keep the lines that animate clipPath and opacity.

How long is a transition?

0.5 seconds for the mask, with a pause before and after in the demo.