From 0187a82a6f105e404d23542989aed544ad24900a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:59:13 -0400 Subject: [PATCH] fix(registry): transparent backgrounds on all caption components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace opaque backgrounds (#0a0a0a, #000, #000000) with transparent on both html/body and the composition root div for all 15 caption components. Captions are overlays — opaque backgrounds cover the underlying video when loaded as sub-compositions. --- .../components/caption-clip-wipe/caption-clip-wipe.html | 6 +++--- .../caption-editorial-emphasis.html | 4 ++-- .../components/caption-emoji-pop/caption-emoji-pop.html | 4 ++-- .../components/caption-glitch-rgb/caption-glitch-rgb.html | 4 ++-- .../caption-gradient-fill/caption-gradient-fill.html | 4 ++-- .../components/caption-highlight/caption-highlight.html | 6 +++--- .../caption-kinetic-slam/caption-kinetic-slam.html | 6 +++--- .../caption-matrix-decode/caption-matrix-decode.html | 6 +++--- .../components/caption-neon-accent/caption-neon-accent.html | 4 ++-- .../components/caption-neon-glow/caption-neon-glow.html | 6 +++--- .../caption-parallax-layers/caption-parallax-layers.html | 4 ++-- .../caption-particle-burst/caption-particle-burst.html | 6 +++--- .../caption-pill-karaoke/caption-pill-karaoke.html | 4 ++-- registry/components/caption-texture/caption-texture.html | 6 +++--- .../caption-weight-shift/caption-weight-shift.html | 4 ++-- 15 files changed, 37 insertions(+), 37 deletions(-) diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html index 12aee72af..d5ce924e7 100644 --- a/registry/components/caption-clip-wipe/caption-clip-wipe.html +++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0a0a; + background: transparent; } #clip-wipe { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0a0a; + background: transparent; } #wp-video { position: absolute; @@ -43,7 +43,7 @@ .wp-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.45); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html index ef63d346b..e6c8463bf 100644 --- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html +++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html @@ -24,7 +24,7 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000; + background: transparent; font-family: "Inter", sans-serif; } @@ -33,7 +33,7 @@ width: 1920px; height: 1080px; overflow: hidden; - background: #000; + background: transparent; } #bg-video { diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html index edea14a96..d374db201 100644 --- a/registry/components/caption-emoji-pop/caption-emoji-pop.html +++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html @@ -24,7 +24,7 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000000; + background: transparent; font-family: "Gabarito", Arial, sans-serif; } @@ -33,7 +33,7 @@ width: 1920px; height: 1080px; overflow: hidden; - background: #000000; + background: transparent; } #avatar-video { diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html index a694808b0..803580758 100644 --- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html +++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0a0a; + background: transparent; } #caption-glitch-rgb { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0a0a; + background: transparent; } #gl-video { position: absolute; diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html index 0dd542376..e1fa7eae9 100644 --- a/registry/components/caption-gradient-fill/caption-gradient-fill.html +++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0a0a; + background: transparent; } #gradient-fill { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0a0a; + background: transparent; } #gr-container { position: absolute; diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html index 2a53beb2c..3fe66b731 100644 --- a/registry/components/caption-highlight/caption-highlight.html +++ b/registry/components/caption-highlight/caption-highlight.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0a0a; + background: transparent; } #highlight { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0a0a; + background: transparent; } #hl-video { position: absolute; @@ -43,7 +43,7 @@ .hl-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.4); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html index 6331699a5..70ad9359c 100644 --- a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html +++ b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html @@ -20,14 +20,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0a0a; + background: transparent; } #kinetic-slam { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0a0a; + background: transparent; } #kt-video { position: absolute; @@ -40,7 +40,7 @@ .kt-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.45); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html index cccad7e16..7612d2cc9 100644 --- a/registry/components/caption-matrix-decode/caption-matrix-decode.html +++ b/registry/components/caption-matrix-decode/caption-matrix-decode.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000; + background: transparent; } #matrix-decode { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #000; + background: transparent; } #sc-video { position: absolute; @@ -43,7 +43,7 @@ .sc-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.85); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-neon-accent/caption-neon-accent.html b/registry/components/caption-neon-accent/caption-neon-accent.html index cbb6e79e7..7fb537857 100644 --- a/registry/components/caption-neon-accent/caption-neon-accent.html +++ b/registry/components/caption-neon-accent/caption-neon-accent.html @@ -24,7 +24,7 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000000; + background: transparent; font-family: "Montserrat", Arial, sans-serif; } @@ -33,7 +33,7 @@ width: 1920px; height: 1080px; overflow: hidden; - background: #000000; + background: transparent; } #avatar-video { diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html index a75180f0b..9ed23b2df 100644 --- a/registry/components/caption-neon-glow/caption-neon-glow.html +++ b/registry/components/caption-neon-glow/caption-neon-glow.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000; + background: transparent; } #neon-glow { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #000; + background: transparent; } #ne-video { position: absolute; @@ -43,7 +43,7 @@ .ne-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.75); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-parallax-layers/caption-parallax-layers.html b/registry/components/caption-parallax-layers/caption-parallax-layers.html index 6857580e1..1dc01f82a 100644 --- a/registry/components/caption-parallax-layers/caption-parallax-layers.html +++ b/registry/components/caption-parallax-layers/caption-parallax-layers.html @@ -24,7 +24,7 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000; + background: transparent; font-family: "Instrument Serif", serif; } @@ -33,7 +33,7 @@ width: 1920px; height: 1080px; overflow: hidden; - background: #000; + background: transparent; } #bg-video { diff --git a/registry/components/caption-particle-burst/caption-particle-burst.html b/registry/components/caption-particle-burst/caption-particle-burst.html index 0683ec18b..20d98f0a8 100644 --- a/registry/components/caption-particle-burst/caption-particle-burst.html +++ b/registry/components/caption-particle-burst/caption-particle-burst.html @@ -23,14 +23,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0a0a; + background: transparent; } #particle-burst { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0a0a; + background: transparent; } #bs-video { position: absolute; @@ -43,7 +43,7 @@ .bs-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.45); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html index c9e3e71e9..edb348827 100644 --- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html +++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html @@ -24,7 +24,7 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000000; + background: transparent; font-family: "Poppins", Arial, sans-serif; } @@ -33,7 +33,7 @@ width: 1920px; height: 1080px; overflow: hidden; - background: #000000; + background: transparent; } #avatar-video { diff --git a/registry/components/caption-texture/caption-texture.html b/registry/components/caption-texture/caption-texture.html index 2332fd943..4e1c0aae7 100644 --- a/registry/components/caption-texture/caption-texture.html +++ b/registry/components/caption-texture/caption-texture.html @@ -31,14 +31,14 @@ height: 1080px; margin: 0; overflow: hidden; - background: #0a0805; + background: transparent; } #texture-lava { position: relative; width: 1920px; height: 1080px; overflow: hidden; - background: #0a0805; + background: transparent; } #lv-video { position: absolute; @@ -51,7 +51,7 @@ .lv-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.55); + background: transparent; z-index: 1; pointer-events: none; } diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html index 8b3d7f659..17b9a2d07 100644 --- a/registry/components/caption-weight-shift/caption-weight-shift.html +++ b/registry/components/caption-weight-shift/caption-weight-shift.html @@ -24,7 +24,7 @@ height: 1080px; margin: 0; overflow: hidden; - background: #000000; + background: transparent; font-family: "Montserrat", Arial, sans-serif; } @@ -33,7 +33,7 @@ width: 1920px; height: 1080px; overflow: hidden; - background: #000000; + background: transparent; } #avatar-video {