hyperframes/docs/catalog/components/caption-blend-difference.mdx

---
title: "Blend Difference"
description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
mode: "frame"
---

import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
import { InstallCommand } from "/snippets/install-command.jsx";

<div className="hf-ve-static-head not-prose">
  <h1>Blend Difference</h1>
  <p>Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background</p>
</div>

<CatalogDetail
  previewSrc="/public/catalog/components/caption-blend-difference.json"
  compositionId="caption-blend-difference"
  compositionSrc="compositions/components/caption-blend-difference.html"
  title="Blend Difference"
  variables={[]}
  meta={{"category":"Typography & Text","badge":"Stable","codeLines":83}}
  attribution={{"path":"registry/components/caption-blend-difference","tags":["text","text-effect","effect","blend-mode","contrast","inversion"]}}
  hasCode
  rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/caption-blend-difference/caption-blend-difference.html"
>

<CatalogSlot slot="code">

```html caption-blend-difference.html
<!--
  Blend Difference — auto-inverting captions via mix-blend-mode.

  Text color inverts per-pixel against whatever is behind it:
  white stays white on dark areas, flips to black on light areas.
  On color video, white inverts to the complement (blue → orange,
  red → cyan, green → magenta).

  Setup:
  1. The composition root (or a shared ancestor of both the video
     and the caption layer) MUST have `isolation: isolate` so the
     blend operates against sibling content, not the page background.
  2. Add class="blend-difference" to any caption container.
  3. Set caption text color to white. The blend mode handles the rest.

  Works on any element — divs, spans, SVG text, even images.

  Customize:
  - --blend-caption-color: base text color (default white)
  - Change blend mode via --blend-mode to 'exclusion' for a softer effect

  Variants:
  - .blend-difference         → standard per-pixel inversion
  - .blend-difference-soft    → exclusion mode, less harsh contrast
  - .blend-difference-screen  → text glows on dark, fades on light
-->

<style>
  .blend-difference {
    mix-blend-mode: var(--blend-mode, difference);
    color: var(--blend-caption-color, white);
    pointer-events: none;
  }

  .blend-difference-soft {
    mix-blend-mode: exclusion;
    color: var(--blend-caption-color, white);
    pointer-events: none;
  }

  .blend-difference-screen {
    mix-blend-mode: screen;
    color: var(--blend-caption-color, white);
    pointer-events: none;
  }
</style>

<!--
  Composition setup example:

  <div data-composition-id="root" ... style="isolation: isolate;">

    <video id="bg" data-start="0" data-duration="30" data-track-index="0"
           src="video.mp4" muted playsinline></video>

    <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; text-transform: uppercase;">
        YOUR CAPTION
      </span>
    </div>
  </div>


  Timeline integration — animate captions normally, blend mode is passive:

  tl.from(".caption", {
    y: 50, opacity: 0, duration: 0.6, ease: "expo.out"
  }, 0.2);


  Notes:
  - isolation: isolate on the composition root is REQUIRED.
    Without it, blend mode composes against the page background
    (usually white or black) and you get no inversion.
  - Works with any GSAP animation — the blend composites every frame.
  - For caption containers with multiple text elements, apply the
    class to the shared parent, not each text element individually.
  - On pure black backgrounds, white text stays white (difference
    of white and black = white). The effect is most visible when
    the background has varied luminance or color.
-->
```

</CatalogSlot>

<CatalogSlot slot="install">

<InstallCommand command="npx hyperframes add caption-blend-difference" item="caption-blend-difference" />

That writes one file: `compositions/components/caption-blend-difference.html`.

</CatalogSlot>

</CatalogDetail>

<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">

## Paste it into your composition

Open `compositions/components/caption-blend-difference.html` and copy what is inside into your own composition.
The file opens with a comment header that walks you through it.

A component has no size or duration of its own. It takes both from the composition
you paste it into.

{/* hf:generated-footer */}

Tagged `text` `text-effect` `effect` `blend-mode` `contrast` `inversion`.

## Related topics

- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
- [Put blocks together into one video](/concepts/compositions)

</div>