skills.rest
heygen-com
heygen-comOFFICIAL
Explore all skills by this author →
GitHub

cut-the-curve

Implements velocity-matched GSAP transition techniques for HTML-based video scenes.

43.5k|4.2k|Updated Mar 10, 2026
Search Tags:#GSAP#easing#Animation#Hyperframes#Motion Graphics#video transitions#kinetic text
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill cut-the-curve
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cut-the-curve
Source: https://github.com/heygen-com/hyperframes/tree/main/.agents/skills/cut-the-curve
Command: npx skills add https://github.com/heygen-com/hyperframes --skill cut-the-curve

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve?

Video transitions between scenes and text beats often look jarring because motion velocity, direction, and blur do not match across the cut. This Skill provides a catalog of seven parameterized GSAP animation techniques so agents author cinematic, velocity-matched transitions in HyperFrames HTML videos.

Core Features & Use Cases

  • Five seam techniques: zoom-through, inverse zoom-through, cut-the-curve, waterfall cut, and rack-focus blur-cut, each with exact scale, blur, opacity, ease, and duration parameters.
  • Two in-scene techniques: waterfall entry (staggered arrival cascades for title cards) and the nudge curve (three-phase slow-fast-slow group slides).
  • Ready-to-copy GSAP code: worker-authored and registry gsap_template implementations with tuning ranges in examples/gsap-implementation.md.
  • Use Case: When building a 10-second product intro video, use cut-the-curve as the default scene boundary, a waterfall entry for the title card, and an inverse zoom-through for the payoff line.

Quick Start

Read this Skill before authoring any transition, text-beat handoff, kinetic text entry, or group reposition in a HyperFrames video composition.

Frequently Asked Questions about cut-the-curve

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create smooth scene transitions in GSAP video animations?▼

Use the cut-the-curve technique: the outgoing hero accelerates with power4.in over ~12% of frame width, a hard cut lands mid-motion, and the incoming hero continues the same direction with power4.out. Mirrored eases match velocity exactly at the cut.

What is the difference between zoom-through and inverse zoom-through?▼

Zoom-through grows both texts (exit 1 to 1.2, entry 0.75 to 1) for progressing deeper into a thought. Inverse zoom-through shrinks both (exit 1 to 0.8, entry 1.25 to 1) and is reserved for arrival or payoff beats.

How much blur should I use at a transition cut?▼

Use 10px peak blur for text-scale subjects like headlines, and 18-20px only for full-frame surfaces such as windows or screenshots. Apply the same peak blur on both sides at the swap frame, and blur the wrapper element, never children.

Why does my scene transition flash white at the cut?▼

A mid-window cut opens a summed-opacity window below 1, exposing the page background. Fix it by making the #root element opaque with a canvas background color so the stage ground stays painted during the transition.

When should I not use the rack-focus blur-cut?▼

Rack-focus blur-cut is a visible flourish for state swaps of the same surface, not a default boundary. Fire it only at narrative beats, at most once per 8 seconds, and never mid-caption or during a hold.

Related Skills

Explore More Design & Creative Skills→
BertCalmBertCalm
1

architect

Evaluate proposed code changes against XOlokun architecture rules and doctrines.

Community
Advanced
BailipaBailipa
4

hyperframes

Coordinate HTML-based video production with captions, TTS narration, and transitions.

Community
Advanced
hasnaxyzhasnaxyz

remotion

Render JSON timeline specs into Remotion video compositions.

Official
Intermediate
nachopalmerinachopalmeri

css-animations

Provide ready-to-use CSS 2D animation patterns for websites.

Community
Intermediate