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.

Captions That Invert Against the Image v1.0.0

Use this resource to keep captions readable over a video with a changing background

New

  • 587 downloads
  • 121 likes
  • 106 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install blend-difference-captions

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies a blend mode that inverts the text color against whatever sits behind it: white on dark areas, black on bright areas. It offers three variants (difference, softer exclusion, glowing screen). You get readable captions or titles with no background box or shadow.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (npx hyperframes)
  • Node.js
Licence
Apache-2.0

Similar resources

View all

What you get

  • README.md: usage guide for the effect
  • caption-blend-difference.html: the three CSS classes and a sample setup
  • registry-item.json: component description

Good fit for

  • Captioning a video whose brightness changes a lot
  • Putting a big title over a photo or a varied video
  • Creating an inverted text look for a reel

Not for

  • A solid black video, where the effect is invisible
  • Text that must keep an exact brand color
  • An export where the blend mode is not supported

Tags

  • captions
  • contrast
  • blend mode
  • text
  • readability

About

You say

"Make my captions white with the inversion effect so they stay readable on my beach video."

Uppercase white text whose letters flip to black over the bright areas of the image.

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

Show more

Prerequisites

You bring
Your video and the text to show and A HyperFrames project, or one to create
Dependencies
HyperFrames (npx hyperframes) and Node.js

How to use it

  1. Install the component with npx hyperframes add caption-blend-difference.
  2. Ask the agent to add the blend-difference class to your captions and isolate the composition root.
  3. Check the render on several frames, then run the HyperFrames render.

Content preview

Files

  • caption-blend-difference.html2.8 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.9 KB
  • registry-item.json0.6 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/components/caption-blend-difference
Licence
Apache-2.0

Notice

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

Why doesn't the effect work?

The composition root must have isolation: isolate. Without it, the blend happens against the page instead of the video.

What does it do on color video?

White becomes the complement of the background: a blue background gives orange text, a red one cyan.