Blend Difference

Auto-inverting captions using mix-blend-mode: difference — text flips between white and black per-pixel against the background

Blend Difference

Auto-inverting captions using mix-blend-mode: difference — text flips between white and black per-pixel against the background

text effect blend-mode contrast inversion

Install

Terminal

npx hyperframes add caption-blend-difference

How It Works

White text with mix-blend-mode: difference inverts per-pixel against whatever is behind it:

• Dark background → text stays white
• Light background → text flips to black
• Color background → text becomes the complement (blue → orange, red → cyan)

The composition root needs isolation: isolate so the blend operates against sibling content (video, images) rather than the page background.

Variants

Class	Blend Mode	Effect
.blend-difference	difference	Hard per-pixel inversion — maximum contrast
.blend-difference-soft	exclusion	Softer inversion — less harsh on midtones
.blend-difference-screen	screen	Text glows on dark areas, fades on light

Example

<div data-composition-id="root" style="isolation: isolate;">
  <video src="video.mp4" muted playsinline
         data-start="0" data-duration="30" data-track-index="0" />

  <div class="clip blend-difference"
       data-start="0" data-duration="5" data-track-index="1"
       style="position: absolute; inset: 0; z-index: 10;
              display: flex; align-items: center; justify-content: center;">
    <span style="font-size: 120px; font-weight: 800;">
      YOUR CAPTION
    </span>
  </div>
</div>

CSS Custom Properties

Property	Default	Description
--blend-caption-color	white	Base text color before blending
--blend-mode	difference	Override blend mode on .blend-difference

Details

Property	Value
Type	Component

Files

File	Target	Type
caption-blend-difference.html	compositions/components/caption-blend-difference.html	hyperframes:snippet

Usage

Open compositions/components/caption-blend-difference.html and paste its contents into your composition. See the comment header in the file for detailed instructions.