Skip to content

caption-blend-difference.mdx

Latest commit

 

History

History
79 lines (55 loc) · 2.38 KB

caption-blend-difference.mdx

File metadata and controls

79 lines (55 loc) · 2.38 KB
Raw
title Blend Difference
description 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

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.