chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,83 @@
+<!--
+  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.
+-->
@@ -0,0 +1,83 @@
+<!--
+  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.
+-->
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-blend-difference",
+  "type": "hyperframes:component",
+  "title": "Blend Difference",
+  "description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
+  "tags": ["text", "text-effect", "effect", "blend-mode", "contrast", "inversion"],
+  "files": [
+    {
+      "path": "caption-blend-difference.html",
+      "target": "compositions/components/caption-blend-difference.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}