From c7f8507f281d99c676ae015489d46986db0453cf Mon Sep 17 00:00:00 2001
From: Yossi Elkrief <elkriefy@gmail.com>
Date: Wed, 17 Jun 2026 23:11:42 +0300
Subject: [PATCH] feat: add RTL support across catalog

---
 .gitignore                                    |  3 +-
 .../blocks/app-showcase/app-showcase.html     | 14 +++++----
 .../blue-sweater-intro-video.html             | 20 +++++++------
 .../chromatic-radial-split.html               |  1 +
 .../blocks/cinematic-zoom/cinematic-zoom.html |  1 +
 .../code-3d-extrude/code-3d-extrude.html      |  1 +
 registry/blocks/code-diff/code-diff.html      |  1 +
 .../blocks/code-highlight/code-highlight.html |  1 +
 registry/blocks/code-morph/code-morph.html    |  1 +
 .../code-particle-assemble.html               |  1 +
 registry/blocks/code-scroll/code-scroll.html  |  1 +
 .../code-shader-dissolve.html                 |  1 +
 .../code-snippet-apple-terminal-basic.html    |  1 +
 ...ode-snippet-apple-terminal-clear-dark.html |  1 +
 ...de-snippet-apple-terminal-clear-light.html |  1 +
 .../code-snippet-apple-terminal-grass.html    |  1 +
 .../code-snippet-apple-terminal-homebrew.html |  1 +
 .../code-snippet-apple-terminal-man-page.html |  1 +
 .../code-snippet-apple-terminal-novel.html    |  1 +
 .../code-snippet-apple-terminal-ocean.html    |  1 +
 .../code-snippet-apple-terminal-pro.html      |  1 +
 ...code-snippet-apple-terminal-red-sands.html |  1 +
 ...snippet-apple-terminal-silver-aerogel.html |  1 +
 ...e-snippet-apple-terminal-solid-colors.html |  1 +
 .../code-snippet-dark-2026.html               |  1 +
 .../code-snippet-dark-modern.html             |  1 +
 .../code-snippet-dark-plus.html               |  1 +
 .../code-snippet-flight.html                  |  1 +
 .../code-snippet-high-contrast-light.html     |  1 +
 .../code-snippet-high-contrast.html           |  1 +
 .../code-snippet-light-2026.html              |  1 +
 .../code-snippet-light-modern.html            |  1 +
 .../code-snippet-light-plus.html              |  1 +
 .../code-snippet-monokai.html                 |  1 +
 .../code-snippet-solarized-light.html         |  1 +
 .../code-snippet-visual-studio-dark.html      |  1 +
 .../code-snippet-visual-studio-light.html     |  1 +
 registry/blocks/code-typing/code-typing.html  |  1 +
 .../cross-warp-morph/cross-warp-morph.html    |  1 +
 registry/blocks/data-chart/data-chart.html    | 17 ++++++++---
 .../domain-warp-dissolve.html                 |  1 +
 .../flash-through-white.html                  |  1 +
 .../flowchart-vertical.html                   |  1 +
 registry/blocks/flowchart/flowchart.html      |  1 +
 registry/blocks/glitch/glitch.html            |  1 +
 .../gravitational-lens.html                   |  1 +
 .../instagram-follow/instagram-follow.html    | 18 ++++++++----
 .../ios26-liquid-glass.html                   | 12 ++++----
 registry/blocks/light-leak/light-leak.html    |  1 +
 .../liquid-glass-context-menu.html            |  6 ++--
 .../liquid-glass-media-controls.html          | 14 +++++----
 .../liquid-glass-notification.html            | 26 +++++++++--------
 .../liquid-glass-widgets.html                 | 15 ++++++----
 .../macos-notification.html                   | 17 ++++++-----
 .../macos-tahoe-liquid-glass.html             |  1 +
 .../north-korea-locked-down.html              |  1 +
 .../nyc-paris-flight/nyc-paris-flight.html    |  1 +
 registry/blocks/reddit-post/reddit-post.html  | 14 ++++++---
 registry/blocks/ridged-burn/ridged-burn.html  |  1 +
 .../blocks/ripple-waves/ripple-waves.html     |  1 +
 registry/blocks/sdf-iris/sdf-iris.html        |  1 +
 registry/blocks/spain-map/spain-map.html      |  1 +
 .../blocks/spotify-card/spotify-card.html     |  6 ++--
 .../blocks/swirl-vortex/swirl-vortex.html     |  1 +
 .../thermal-distortion.html                   |  1 +
 .../blocks/tiktok-follow/tiktok-follow.html   | 16 ++++++----
 .../blocks/transitions-3d/transitions-3d.html |  1 +
 .../transitions-blur/transitions-blur.html    |  1 +
 .../transitions-cover/transitions-cover.html  |  1 +
 .../transitions-destruction.html              |  1 +
 .../transitions-dissolve.html                 |  1 +
 .../transitions-distortion.html               |  1 +
 .../transitions-grid/transitions-grid.html    |  1 +
 .../transitions-light/transitions-light.html  |  1 +
 .../transitions-mechanical.html               |  1 +
 .../transitions-other/transitions-other.html  |  1 +
 .../transitions-push/transitions-push.html    |  1 +
 .../transitions-radial.html                   |  1 +
 .../transitions-scale/transitions-scale.html  |  1 +
 .../blocks/ui-3d-reveal/ui-3d-reveal.html     |  1 +
 .../blocks/us-map-bubble/us-map-bubble.html   |  1 +
 registry/blocks/us-map-flow/us-map-flow.html  |  1 +
 registry/blocks/us-map-hex/us-map-hex.html    |  1 +
 registry/blocks/us-map/us-map.html            |  1 +
 .../vfx-liquid-background.html                | 14 ++++++---
 .../vpn-youtube-spot/vpn-youtube-spot.html    | 10 +++++--
 registry/blocks/whip-pan/whip-pan.html        |  1 +
 registry/blocks/world-map/world-map.html      |  1 +
 registry/blocks/x-post/x-post.html            | 21 ++++++++------
 .../blocks/yt-lower-third/yt-lower-third.html | 13 ++++++---
 .../caption-clip-wipe/caption-clip-wipe.html  |  9 ++++--
 .../components/caption-clip-wipe/demo.html    |  9 ++++--
 .../caption-editorial-emphasis.html           | 17 +++++++----
 .../caption-editorial-emphasis/demo.html      | 17 +++++++----
 .../caption-glitch-rgb.html                   |  1 +
 .../components/caption-glitch-rgb/demo.html   |  1 +
 .../caption-gradient-fill.html                | 23 ++++++++++-----
 .../caption-gradient-fill/demo.html           | 23 ++++++++++-----
 .../caption-highlight/caption-highlight.html  |  5 +++-
 .../components/caption-highlight/demo.html    |  5 +++-
 .../caption-kinetic-slam.html                 |  7 +++--
 .../components/caption-kinetic-slam/demo.html |  7 +++--
 .../caption-neon-glow/caption-neon-glow.html  | 16 ++++++++--
 .../components/caption-neon-glow/demo.html    | 16 ++++++++--
 registry/components/grain-overlay/demo.html   |  1 +
 registry/components/motion-blur/demo.html     |  1 +
 registry/components/shimmer-sweep/demo.html   | 29 ++++++++++++++-----
 .../shimmer-sweep/shimmer-sweep.html          | 24 ++++++++++-----
 registry/components/vignette/demo.html        |  1 +
 109 files changed, 385 insertions(+), 155 deletions(-)

diff --git a/.gitignore b/.gitignore
index 537212a9e5..b3180dc538 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,6 +76,7 @@ packages/producer/src/services/fontData.generated.ts
 docs/plans/
 
 # Local proof / test artifacts
+.a5c/
 qa-artifacts/
 my-video/
 .hyperframes/backup/
@@ -141,4 +142,4 @@ test-outputs/
 docs/superpowers/
 .worktrees
 hyperframes-bench/
-tmp/
\ No newline at end of file
+tmp/
diff --git a/registry/blocks/app-showcase/app-showcase.html b/registry/blocks/app-showcase/app-showcase.html
index 52b7c2d107..2dceaaafaa 100644
--- a/registry/blocks/app-showcase/app-showcase.html
+++ b/registry/blocks/app-showcase/app-showcase.html
@@ -114,7 +114,7 @@
                 </svg>
               </div>
               <div class="left-bottom">
-                <div class="left-tagline" id="s3Tagline">Unleash Full Potential</div>
+                <div class="left-tagline" id="s3Tagline" dir="auto">Unleash Full Potential</div>
                 <div class="left-cta">START NOW</div>
               </div>
             </div>
@@ -131,9 +131,9 @@
               <!-- Header -->
               <div class="center-header">
                 <div class="center-avatar">JM</div>
-                <div class="center-user-info">
-                  <div class="center-name">James Medrano</div>
-                  <div class="center-subtitle">Premium Member</div>
+                <div class="center-user-info" dir="auto">
+                  <div class="center-name" dir="auto">James Medrano</div>
+                  <div class="center-subtitle" dir="auto">Premium Member</div>
                 </div>
                 <div class="center-bell">
                   <svg viewBox="0 0 20 20" width="20" height="20" fill="none">
@@ -523,6 +523,8 @@
         }
         [data-composition-id="app-showcase"] .center-user-info {
           flex: 1;
+          text-align: start;
+          unicode-bidi: plaintext;
         }
         [data-composition-id="app-showcase"] .center-name {
           font-size: 18px;
@@ -554,7 +556,8 @@
           font-size: 15px;
           font-weight: 500;
           color: #7c857c;
-          align-self: flex-start;
+          align-self: self-start;
+          text-align: start;
         }
         [data-composition-id="app-showcase"] .goal-ring-wrap {
           position: relative;
@@ -625,6 +628,7 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
+          text-align: start;
         }
         [data-composition-id="app-showcase"] .progress-title {
           font-size: 15px;
diff --git a/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html b/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
index c96f1c3700..1b323fe907 100644
--- a/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
+++ b/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
@@ -419,7 +419,7 @@
 
       .placeholder {
         position: absolute;
-        left: 54px;
+        inset-inline-start: 54px;
         top: 48px;
         color: var(--muted);
         font-size: 34px;
@@ -429,8 +429,8 @@
 
       .prompt-text {
         position: absolute;
-        left: 54px;
-        right: 56px;
+        inset-inline-start: 54px;
+        inset-inline-end: 56px;
         top: 42px;
         bottom: 110px;
         color: var(--ink);
@@ -438,6 +438,8 @@
         font-weight: 400;
         line-height: 1.16;
         letter-spacing: -0.035em;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       .prompt-text span {
@@ -446,7 +448,7 @@
 
       .panel-plus {
         position: absolute;
-        left: 52px;
+        inset-inline-start: 52px;
         bottom: 44px;
         width: 42px;
         height: 42px;
@@ -470,7 +472,7 @@
 
       .model {
         position: absolute;
-        right: 126px;
+        inset-inline-end: 126px;
         bottom: 48px;
         display: flex;
         align-items: center;
@@ -482,7 +484,7 @@
       }
 
       .panel-empty .model {
-        right: 78px;
+        inset-inline-end: 78px;
       }
 
       .model .muted {
@@ -492,14 +494,14 @@
       .chevron {
         width: 14px;
         height: 14px;
-        border-right: 2px solid var(--muted);
+        border-inline-end: 2px solid var(--muted);
         border-bottom: 2px solid var(--muted);
         transform: rotate(45deg) translateY(-5px);
       }
 
       .send-button {
         position: absolute;
-        right: 42px;
+        inset-inline-end: 42px;
         bottom: 38px;
         display: grid;
         place-items: center;
@@ -523,7 +525,7 @@
 
       .thinking-line {
         position: absolute;
-        left: 54px;
+        inset-inline-start: 54px;
         top: 48px;
         display: flex;
         align-items: center;
diff --git a/registry/blocks/chromatic-radial-split/chromatic-radial-split.html b/registry/blocks/chromatic-radial-split/chromatic-radial-split.html
index cdbd1c5d61..4b64ad2344 100644
--- a/registry/blocks/chromatic-radial-split/chromatic-radial-split.html
+++ b/registry/blocks/chromatic-radial-split/chromatic-radial-split.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/cinematic-zoom/cinematic-zoom.html b/registry/blocks/cinematic-zoom/cinematic-zoom.html
index 6354373481..326441e414 100644
--- a/registry/blocks/cinematic-zoom/cinematic-zoom.html
+++ b/registry/blocks/cinematic-zoom/cinematic-zoom.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index db6ba28ce4..d0adfcea17 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -41,6 +41,7 @@
       data-duration="8"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
index bf482a8779..5ba5b46df9 100644
--- a/registry/blocks/code-diff/code-diff.html
+++ b/registry/blocks/code-diff/code-diff.html
@@ -235,6 +235,7 @@
       data-duration="6"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="bg-field" data-layout-ignore></div>
       <div class="bg-grid" data-layout-ignore></div>
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index 70f7b66a6c..5561db0299 100644
--- a/registry/blocks/code-highlight/code-highlight.html
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -235,6 +235,7 @@
       data-duration="5"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="bg-field" data-layout-ignore></div>
       <div class="bg-grid" data-layout-ignore></div>
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index 23d0b808bd..8b88aed54b 100644
--- a/registry/blocks/code-morph/code-morph.html
+++ b/registry/blocks/code-morph/code-morph.html
@@ -235,6 +235,7 @@
       data-duration="7"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="bg-field" data-layout-ignore></div>
       <div class="bg-grid" data-layout-ignore></div>
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index 5734fdab50..ab9cfca2d8 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -41,6 +41,7 @@
       data-duration="8"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
index 1484f7c02f..bcf63ed3e6 100644
--- a/registry/blocks/code-scroll/code-scroll.html
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -235,6 +235,7 @@
       data-duration="6"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="bg-field" data-layout-ignore></div>
       <div class="bg-grid" data-layout-ignore></div>
diff --git a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
index 45a13c4343..e210b46f6f 100644
--- a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
+++ b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -41,6 +41,7 @@
       data-duration="7"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
diff --git a/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html b/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
index 3d7290423c..c6b3eda7fb 100644
--- a/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
+++ b/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
@@ -147,6 +147,7 @@
       data-composition-id="code-snippet-apple-terminal-basic"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html b/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
index cb909740f0..267dcd8551 100644
--- a/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
+++ b/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
@@ -150,6 +150,7 @@
       data-composition-id="code-snippet-apple-terminal-clear-dark"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html b/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
index 7f3f7769bc..f703335325 100644
--- a/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
+++ b/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
@@ -150,6 +150,7 @@
       data-composition-id="code-snippet-apple-terminal-clear-light"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html b/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
index 4556df094a..b3a7e6a633 100644
--- a/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
+++ b/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
@@ -150,6 +150,7 @@
       data-composition-id="code-snippet-apple-terminal-grass"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html b/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
index b7169c1b8f..7da24fe262 100644
--- a/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
+++ b/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
@@ -155,6 +155,7 @@
       data-composition-id="code-snippet-apple-terminal-homebrew"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html b/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
index 16935d5389..e88053aad6 100644
--- a/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
+++ b/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
@@ -154,6 +154,7 @@
       data-composition-id="code-snippet-apple-terminal-man-page"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html b/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
index 0478047adf..3c3a509f44 100644
--- a/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
+++ b/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
@@ -149,6 +149,7 @@
       data-composition-id="code-snippet-apple-terminal-novel"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html b/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
index d165071494..2001af75c7 100644
--- a/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
+++ b/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
@@ -155,6 +155,7 @@
       data-composition-id="code-snippet-apple-terminal-ocean"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html b/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
index 830fdfef27..6d1b0d60be 100644
--- a/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
+++ b/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
@@ -155,6 +155,7 @@
       data-composition-id="code-snippet-apple-terminal-pro"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html b/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
index fc7240eb9c..c560610345 100644
--- a/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
+++ b/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
@@ -150,6 +150,7 @@
       data-composition-id="code-snippet-apple-terminal-red-sands"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
index 7c56fbd4d7..a820494700 100644
--- a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
+++ b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
@@ -158,6 +158,7 @@
       data-composition-id="code-snippet-apple-terminal-silver-aerogel"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html b/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
index f8164fb0cf..12d946e6f2 100644
--- a/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
+++ b/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
@@ -155,6 +155,7 @@
       data-composition-id="code-snippet-apple-terminal-solid-colors"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="terminal-window">
         <div class="titlebar">
diff --git a/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html b/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
index 944432036f..d3deb67983 100644
--- a/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
+++ b/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-dark-2026"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html b/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
index bc94fb6aeb..fab0eed78b 100644
--- a/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
+++ b/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-dark-modern"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html b/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
index a1049df31a..9c66af717f 100644
--- a/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
+++ b/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-dark-plus"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index 25a700c3c7..67a4c228ae 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -235,6 +235,7 @@
       data-duration="6"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="bg-field" data-layout-ignore></div>
       <div class="bg-grid" data-layout-ignore></div>
diff --git a/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html b/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
index 4d1e6b2abb..9ef4cdd356 100644
--- a/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
+++ b/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-high-contrast-light"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html b/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
index c9b6ece431..d712677b50 100644
--- a/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
+++ b/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-high-contrast"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html b/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html
index 492d930b13..00244f144c 100644
--- a/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html
+++ b/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-light-2026"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html b/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html
index c86428cc19..cec473c9d4 100644
--- a/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html
+++ b/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-light-modern"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html b/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html
index 49d4e44ee0..46fa7d276f 100644
--- a/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html
+++ b/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-light-plus"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-monokai/code-snippet-monokai.html b/registry/blocks/code-snippet-monokai/code-snippet-monokai.html
index d6956a864d..4371dc0799 100644
--- a/registry/blocks/code-snippet-monokai/code-snippet-monokai.html
+++ b/registry/blocks/code-snippet-monokai/code-snippet-monokai.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-monokai"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html b/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
index fd933b0a77..065a8470c6 100644
--- a/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
+++ b/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-solarized-light"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html b/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
index 437dc16874..d4132328e8 100644
--- a/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
+++ b/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-visual-studio-dark"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html b/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
index 982d261993..f580afe17f 100644
--- a/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
+++ b/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
@@ -12,6 +12,7 @@
         data-composition-id="vscode-visual-studio-light"
         data-width="1920"
         data-height="1080"
+        dir="ltr"
       >
         <main class="scene-content">
           <section class="header">
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index 62edf975e1..7b3130831e 100644
--- a/registry/blocks/code-typing/code-typing.html
+++ b/registry/blocks/code-typing/code-typing.html
@@ -235,6 +235,7 @@
       data-duration="5"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div class="bg-field" data-layout-ignore></div>
       <div class="bg-grid" data-layout-ignore></div>
diff --git a/registry/blocks/cross-warp-morph/cross-warp-morph.html b/registry/blocks/cross-warp-morph/cross-warp-morph.html
index 6945d3dd94..c310684772 100644
--- a/registry/blocks/cross-warp-morph/cross-warp-morph.html
+++ b/registry/blocks/cross-warp-morph/cross-warp-morph.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/data-chart/data-chart.html b/registry/blocks/data-chart/data-chart.html
index 328576615d..589a8e002b 100644
--- a/registry/blocks/data-chart/data-chart.html
+++ b/registry/blocks/data-chart/data-chart.html
@@ -109,7 +109,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
 
         [data-composition-id="data-chart"] .header {
           margin-bottom: 40px;
-          text-align: left;
+          text-align: start;
         }
 
         [data-composition-id="data-chart"] .headline {
@@ -117,7 +117,9 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
           font-size: 42px;
           margin: 0;
           padding: 0;
-          clip-path: inset(0 100% 0 0);
+          clip-path: inset(
+            0 var(--chart-reveal-hidden-end, 100%) 0 var(--chart-reveal-hidden-start, 0)
+          );
           white-space: nowrap;
         }
 
@@ -125,7 +127,9 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
           font-size: 16px;
           color: #666;
           margin: 8px 0 16px 0;
-          clip-path: inset(0 100% 0 0);
+          clip-path: inset(
+            0 var(--chart-reveal-hidden-end, 100%) 0 var(--chart-reveal-hidden-start, 0)
+          );
           white-space: nowrap;
         }
 
@@ -167,7 +171,8 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
         [data-composition-id="data-chart"] .source {
           position: absolute;
           bottom: 0;
-          left: 0;
+          inset-inline-start: 0;
+          text-align: start;
           font-size: 11px;
           color: #999;
           opacity: 0;
@@ -209,6 +214,10 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
         (function () {
           const svg = document.querySelector('[data-composition-id="data-chart"] .chart-svg');
           const tl = gsap.timeline({ paused: true });
+          const isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+          const root = document.querySelector('[data-composition-id="data-chart"]');
+          root.style.setProperty("--chart-reveal-hidden-start", isRtl ? "100%" : "0");
+          root.style.setProperty("--chart-reveal-hidden-end", isRtl ? "0" : "100%");
 
           // Data
           const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
diff --git a/registry/blocks/domain-warp-dissolve/domain-warp-dissolve.html b/registry/blocks/domain-warp-dissolve/domain-warp-dissolve.html
index 8a24dc98d2..b7ab61c250 100644
--- a/registry/blocks/domain-warp-dissolve/domain-warp-dissolve.html
+++ b/registry/blocks/domain-warp-dissolve/domain-warp-dissolve.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/flash-through-white/flash-through-white.html b/registry/blocks/flash-through-white/flash-through-white.html
index 930b6e100f..c5380cde57 100644
--- a/registry/blocks/flash-through-white/flash-through-white.html
+++ b/registry/blocks/flash-through-white/flash-through-white.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/flowchart-vertical/flowchart-vertical.html b/registry/blocks/flowchart-vertical/flowchart-vertical.html
index 718d215d50..56a74dbc8f 100644
--- a/registry/blocks/flowchart-vertical/flowchart-vertical.html
+++ b/registry/blocks/flowchart-vertical/flowchart-vertical.html
@@ -35,6 +35,7 @@
       data-height="2560"
       data-start="0"
       data-duration="12"
+      dir="ltr"
     >
       <div class="canvas">
         <svg class="connectors" width="1440" height="2560" viewBox="0 0 1440 2560">
diff --git a/registry/blocks/flowchart/flowchart.html b/registry/blocks/flowchart/flowchart.html
index b841901a99..3bfe376626 100644
--- a/registry/blocks/flowchart/flowchart.html
+++ b/registry/blocks/flowchart/flowchart.html
@@ -35,6 +35,7 @@
       data-height="1080"
       data-start="0"
       data-duration="12"
+      dir="ltr"
     >
       <div class="canvas">
         <svg class="connectors" width="1920" height="1080" viewBox="0 0 1920 1080">
diff --git a/registry/blocks/glitch/glitch.html b/registry/blocks/glitch/glitch.html
index 79fc5206bc..dd1aa92fc3 100644
--- a/registry/blocks/glitch/glitch.html
+++ b/registry/blocks/glitch/glitch.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/gravitational-lens/gravitational-lens.html b/registry/blocks/gravitational-lens/gravitational-lens.html
index 2feb83f7ae..0b729d300b 100644
--- a/registry/blocks/gravitational-lens/gravitational-lens.html
+++ b/registry/blocks/gravitational-lens/gravitational-lens.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/instagram-follow/instagram-follow.html b/registry/blocks/instagram-follow/instagram-follow.html
index d168f4c4b4..7bdcf80642 100644
--- a/registry/blocks/instagram-follow/instagram-follow.html
+++ b/registry/blocks/instagram-follow/instagram-follow.html
@@ -35,7 +35,8 @@
         gap: 30px;
         background: #1a1a1a;
         border-radius: 75px;
-        padding: 25px 40px 25px 25px;
+        padding-block: 25px;
+        padding-inline: 25px 40px;
         box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
       }
 
@@ -52,7 +53,9 @@
         display: flex;
         flex-direction: column;
         gap: 2px;
-        margin-right: 20px;
+        margin-inline-end: 20px;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="instagram-follow"] .name-row {
@@ -67,6 +70,7 @@
         color: #ffffff;
         line-height: 1.3;
         letter-spacing: -0.01em;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="instagram-follow"] .verified-badge {
@@ -86,6 +90,7 @@
         font-weight: 400;
         color: #a0a0a0;
         line-height: 1.3;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="instagram-follow"] .follower-count {
@@ -93,6 +98,7 @@
         font-weight: 400;
         color: #737373;
         line-height: 1.3;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="instagram-follow"] .follow-btn {
@@ -160,16 +166,16 @@
       >
         <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
         <div class="profile-info">
-          <div class="name-row">
-            <div class="display-name">HeyGen</div>
+          <div class="name-row" dir="auto">
+            <div class="display-name" dir="auto">HeyGen</div>
             <span class="verified-badge"
               ><svg viewBox="0 0 40 40" fill="none">
                 <circle cx="20" cy="20" r="20" fill="#0095F6" />
                 <path d="M17.5 27.5L10 20l2.5-2.5 5 5 10-10L30 15 17.5 27.5z" fill="#fff" /></svg
             ></span>
           </div>
-          <div class="handle">@heygen_official</div>
-          <div class="follower-count">47.5K followers</div>
+          <div class="handle" dir="auto">@heygen_official</div>
+          <div class="follower-count" dir="auto">47.5K followers</div>
         </div>
         <div id="follow-btn" class="follow-btn">
           <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
diff --git a/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html b/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
index c2335ceee5..f841cb8ff6 100644
--- a/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
+++ b/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
@@ -174,7 +174,7 @@
       .ios-battery::after {
         content: "";
         position: absolute;
-        right: -3px;
+        inset-inline-end: -3px;
         top: 7px;
         width: 3px;
         height: 7px;
@@ -219,7 +219,7 @@
       .ios-badge {
         position: absolute;
         top: -8px;
-        right: -8px;
+        inset-inline-end: -8px;
         min-width: 24px;
         padding: 3px 7px;
         border-radius: 999px;
@@ -268,22 +268,20 @@
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.72);
         transform: rotate(45deg) translate(-6px, 6px);
-        margin-left: -10px;
+        margin-inline-start: -10px;
       }
       .ios-notification-layer {
         display: none;
         position: absolute;
         z-index: 5;
         top: 82px;
-        left: 15px;
-        right: 15px;
+        inset-inline: 15px;
         height: 222px;
         pointer-events: none;
       }
       .ios-notification-card {
         position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline: 0;
         display: flex;
         align-items: center;
         gap: 10px;
diff --git a/registry/blocks/light-leak/light-leak.html b/registry/blocks/light-leak/light-leak.html
index 8385d63a1a..83b9317aa4 100644
--- a/registry/blocks/light-leak/light-leak.html
+++ b/registry/blocks/light-leak/light-leak.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html b/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
index f931072581..01c0817e68 100644
--- a/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
+++ b/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
@@ -238,6 +238,8 @@
         color: rgb(0, 7, 14);
         cursor: default;
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
+        text-align: start;
+        unicode-bidi: plaintext;
       }
       .menu-item svg {
         width: 22px;
@@ -283,7 +285,7 @@
         stroke-linejoin: round;
       }
       .menu-kbd {
-        margin-left: auto;
+        margin-inline-start: auto;
         font-size: 14px;
         font-weight: 650;
         color: rgba(0, 7, 14, 0.82);
@@ -292,7 +294,7 @@
       .submenu-preview {
         position: absolute;
         top: 456px;
-        left: 1980px;
+        inset-inline-start: 1980px;
         z-index: 2;
         width: 230px;
         height: 58px;
diff --git a/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html b/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
index ac6b3907f2..4c687337a8 100644
--- a/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
+++ b/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
@@ -235,6 +235,8 @@
         gap: 7px;
         flex: 1;
         min-width: 0;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
       .media-title {
         font-size: 22px;
@@ -279,8 +281,8 @@
         display: flex;
         align-items: center;
         gap: 24px;
-        margin-left: auto;
-        padding-right: 4px;
+        margin-inline-start: auto;
+        padding-inline-end: 4px;
       }
       .transport svg {
         width: 28px;
@@ -329,7 +331,7 @@
       .slider-fill {
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: 34%;
         height: 100%;
         background: #fff;
@@ -342,7 +344,7 @@
         color: rgba(255, 255, 255, 0.9);
         font-variant-numeric: tabular-nums;
         width: 42px;
-        text-align: right;
+        text-align: end;
         text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
       }
       #text-slider {
@@ -392,10 +394,10 @@
       <div id="text-media" class="text-overlay media-text">
         <div class="album-art"><span id="album-sheen" class="album-sheen"></span></div>
         <div class="media-info">
-          <div class="media-title">Midnight Drive</div>
+          <div class="media-title" dir="auto">Midnight Drive</div>
           <div class="media-meta-row">
             <span id="live-dot" class="live-dot"></span>
-            <div class="media-artist">Glass Resonance</div>
+            <div class="media-artist" dir="auto">Glass Resonance</div>
             <div id="sound-wave" class="sound-wave">
               <span></span><span></span><span></span><span></span>
             </div>
diff --git a/registry/blocks/liquid-glass-notification/liquid-glass-notification.html b/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
index 236fb618bf..422c34abee 100644
--- a/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
+++ b/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
@@ -124,6 +124,8 @@
       .notif-body {
         flex: 1;
         min-width: 0;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
       .notif-header {
         display: flex;
@@ -148,9 +150,9 @@
       }
       .notif-progress {
         position: absolute;
-        right: 26px;
+        inset-inline-end: 26px;
         bottom: 15px;
-        left: 168px;
+        inset-inline-start: 168px;
         height: 3px;
         overflow: hidden;
         border-radius: 999px;
@@ -172,7 +174,7 @@
       }
       .notif-actions {
         position: absolute;
-        right: 22px;
+        inset-inline-end: 22px;
         bottom: 13px;
         display: flex;
         gap: 8px;
@@ -190,7 +192,7 @@
       .typing-dots {
         display: inline-flex;
         gap: 3px;
-        margin-left: 5px;
+        margin-inline-start: 5px;
         transform: translateY(-1px);
       }
       .typing-dots span {
@@ -227,12 +229,12 @@
             />
           </div>
           <div class="notif-body">
-            <div class="notif-header">
-              <span class="notif-name">Render complete</span>
+            <div class="notif-header" dir="auto">
+              <span class="notif-name" dir="auto">Render complete</span>
               <span class="status-dot" id="status-dot"></span>
-              <span class="notif-time" id="render-status">rendering</span>
+              <span class="notif-time" id="render-status" dir="auto">rendering</span>
             </div>
-            <div class="notif-text" id="render-copy">
+            <div class="notif-text" id="render-copy" dir="auto">
               Liquid glass preview is encoding with GPU capture.
             </div>
             <div class="notif-progress">
@@ -243,11 +245,11 @@
         <div class="notif-card c2" id="txt2">
           <div class="avatar avatar-kl">M</div>
           <div class="notif-body">
-            <div class="notif-header">
-              <span class="notif-name">Messages</span>
-              <span class="notif-time">now</span>
+            <div class="notif-header" dir="auto">
+              <span class="notif-name" dir="auto">Messages</span>
+              <span class="notif-time" dir="auto">now</span>
             </div>
-            <div class="notif-text">
+            <div class="notif-text" dir="auto">
               Miguel: can it feel alive but still native?
               <span class="typing-dots" id="typing-dots"
                 ><span></span><span></span><span></span
diff --git a/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html b/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html
index 169e013601..8d96c9d93f 100644
--- a/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html
+++ b/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html
@@ -279,6 +279,7 @@
           inset 0 -24px 48px rgba(255, 255, 255, 0.08);
         overflow: hidden;
         text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+        unicode-bidi: plaintext;
       }
       .showcase-icon {
         position: relative;
@@ -299,6 +300,7 @@
         font-weight: 700;
         color: #fff;
         text-align: center;
+        unicode-bidi: plaintext;
         line-height: 1.2;
       }
       .showcase-desc {
@@ -307,6 +309,7 @@
         font-weight: 500;
         color: #fff;
         text-align: center;
+        unicode-bidi: plaintext;
         line-height: 1.5;
         max-width: 380px;
       }
@@ -445,13 +448,13 @@
         <div class="showcase-icon">
           <img class="showcase-logo" src="assets/hyperframes-logo-dark.svg" alt="HyperFrames" />
         </div>
-        <div class="showcase-title">Preview pipeline</div>
-        <div class="showcase-desc">
+        <div class="showcase-title" dir="auto">Preview pipeline</div>
+        <div class="showcase-desc" dir="auto">
           Write HTML, render video. Ship compositions at the speed of code.
         </div>
         <div class="showcase-status">
           <span class="showcase-dot" id="showcase-dot"></span
-          ><span id="showcase-status">Encoding frames</span>
+          ><span id="showcase-status" dir="auto">Encoding frames</span>
         </div>
         <div class="showcase-progress">
           <div id="showcase-progress" class="showcase-progress-fill"></div>
@@ -461,15 +464,15 @@
       <!-- Pill chips -->
       <div id="text-pill1" class="text-overlay pill-text">
         <span class="pill-dot dot-green"></span>
-        <span class="pill-label">Connected</span>
+        <span class="pill-label" dir="auto">Connected</span>
       </div>
       <div id="text-pill2" class="text-overlay pill-text">
         <span class="pill-dot dot-blue"></span>
-        <span class="pill-label">Bluetooth</span>
+        <span class="pill-label" dir="auto">Bluetooth</span>
       </div>
       <div id="text-pill3" class="text-overlay pill-text">
         <span class="pill-dot dot-violet"></span>
-        <span class="pill-label">Focus</span>
+        <span class="pill-label" dir="auto">Focus</span>
       </div>
 
       <div
diff --git a/registry/blocks/macos-notification/macos-notification.html b/registry/blocks/macos-notification/macos-notification.html
index db499016d0..a0ee69f1da 100644
--- a/registry/blocks/macos-notification/macos-notification.html
+++ b/registry/blocks/macos-notification/macos-notification.html
@@ -29,7 +29,7 @@
       [data-composition-id="macos-notification"] .notification-card {
         position: absolute;
         top: 24px;
-        right: 24px;
+        inset-inline-end: 24px;
         width: 380px;
         background: rgba(30, 30, 30, 0.82);
         backdrop-filter: blur(40px);
@@ -61,6 +61,8 @@
       [data-composition-id="macos-notification"] .notification-content {
         flex: 1;
         min-width: 0;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="macos-notification"] .notification-header {
@@ -151,11 +153,11 @@
         </div>
         <div class="notification-content">
           <div class="notification-header">
-            <span class="app-name">HyperFrames</span>
-            <span class="time-label">now</span>
+            <span class="app-name" dir="auto">HyperFrames</span>
+            <span class="time-label" dir="auto">now</span>
           </div>
-          <div class="notification-title">Prompt to replace this title</div>
-          <div class="notification-body">
+          <div class="notification-title" dir="auto">Prompt to replace this title</div>
+          <div class="notification-body" dir="auto">
             Prompt to change this body text, the app icon, and the app name to match your content.
           </div>
         </div>
@@ -167,9 +169,10 @@
 
       var tl = gsap.timeline({ paused: true });
       var notification = document.getElementById("notification");
+      var inlineSign = getComputedStyle(document.documentElement).direction === "rtl" ? -1 : 1;
 
       // Start off-screen to the right
-      gsap.set(notification, { x: 420, opacity: 0 });
+      gsap.set(notification, { x: 420 * inlineSign, opacity: 0 });
 
       // Slide in from right
       tl.to(
@@ -187,7 +190,7 @@
       tl.to(
         notification,
         {
-          x: 420,
+          x: 420 * inlineSign,
           opacity: 0,
           duration: 0.3,
           ease: "power3.in",
diff --git a/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html b/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
index 840d61553f..e76d828ff6 100644
--- a/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
+++ b/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
@@ -418,6 +418,7 @@
       data-start="0"
       data-duration="15"
       data-root="true"
+      dir="ltr"
     >
       <!-- LIVE HTML captured every frame via drawElementImage  -->
       <canvas
diff --git a/registry/blocks/north-korea-locked-down/north-korea-locked-down.html b/registry/blocks/north-korea-locked-down/north-korea-locked-down.html
index bd40ca0099..bb6948699b 100644
--- a/registry/blocks/north-korea-locked-down/north-korea-locked-down.html
+++ b/registry/blocks/north-korea-locked-down/north-korea-locked-down.html
@@ -221,6 +221,7 @@
       data-duration="7"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div id="camera" class="camera">
         <img class="map" src="assets/korea-map.png" alt="" />
diff --git a/registry/blocks/nyc-paris-flight/nyc-paris-flight.html b/registry/blocks/nyc-paris-flight/nyc-paris-flight.html
index 6114986850..3d0b336a8f 100644
--- a/registry/blocks/nyc-paris-flight/nyc-paris-flight.html
+++ b/registry/blocks/nyc-paris-flight/nyc-paris-flight.html
@@ -338,6 +338,7 @@
       data-duration="6"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div
         id="flight-scene"
diff --git a/registry/blocks/reddit-post/reddit-post.html b/registry/blocks/reddit-post/reddit-post.html
index 9938be7a00..38e82acfc7 100644
--- a/registry/blocks/reddit-post/reddit-post.html
+++ b/registry/blocks/reddit-post/reddit-post.html
@@ -62,6 +62,8 @@
         display: flex;
         flex-direction: column;
         gap: 2px;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="reddit-post"] .subreddit-name {
@@ -89,6 +91,8 @@
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="reddit-post"] .post-body {
@@ -101,6 +105,8 @@
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       /* Action bar */
@@ -195,14 +201,14 @@
             </svg>
           </div>
           <div class="post-meta">
-            <span class="subreddit-name">r/hyperframes</span>
-            <span class="post-author">u/placeholder_user &middot; 3h</span>
+            <span class="subreddit-name" dir="auto">r/hyperframes</span>
+            <span class="post-author" dir="auto">u/placeholder_user &middot; 3h</span>
           </div>
         </div>
 
         <!-- Content -->
-        <div class="post-title">Prompt to change this title to whatever you want</div>
-        <div class="post-body">
+        <div class="post-title" dir="auto">Prompt to change this title to whatever you want</div>
+        <div class="post-body" dir="auto">
           Prompt to change this body text, the subreddit, username, and vote count to match your
           content.
         </div>
diff --git a/registry/blocks/ridged-burn/ridged-burn.html b/registry/blocks/ridged-burn/ridged-burn.html
index 94629341cf..f4c2c12033 100644
--- a/registry/blocks/ridged-burn/ridged-burn.html
+++ b/registry/blocks/ridged-burn/ridged-burn.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/ripple-waves/ripple-waves.html b/registry/blocks/ripple-waves/ripple-waves.html
index 27e09015e7..265877b071 100644
--- a/registry/blocks/ripple-waves/ripple-waves.html
+++ b/registry/blocks/ripple-waves/ripple-waves.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/sdf-iris/sdf-iris.html b/registry/blocks/sdf-iris/sdf-iris.html
index 21a13a91d4..bd2a02ab3e 100644
--- a/registry/blocks/sdf-iris/sdf-iris.html
+++ b/registry/blocks/sdf-iris/sdf-iris.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/spain-map/spain-map.html b/registry/blocks/spain-map/spain-map.html
index 28e52d495f..a0c4b990f5 100644
--- a/registry/blocks/spain-map/spain-map.html
+++ b/registry/blocks/spain-map/spain-map.html
@@ -37,6 +37,7 @@
       data-height="1080"
       data-start="0"
       data-duration="12"
+      dir="ltr"
     >
       <div class="map-container">
         <div class="header">
diff --git a/registry/blocks/spotify-card/spotify-card.html b/registry/blocks/spotify-card/spotify-card.html
index 80c8549b74..b3780760a7 100644
--- a/registry/blocks/spotify-card/spotify-card.html
+++ b/registry/blocks/spotify-card/spotify-card.html
@@ -116,6 +116,8 @@
         z-index: 1;
         margin-bottom: 28px;
         padding: 0 8px;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="spotify-card"] .track-name {
@@ -185,8 +187,8 @@
 
         <!-- Track Info -->
         <div class="track-info">
-          <div id="track-name" class="track-name">HyperFrames</div>
-          <div id="artist-name" class="artist-name">HeyGen</div>
+          <div id="track-name" class="track-name" dir="auto">HyperFrames</div>
+          <div id="artist-name" class="artist-name" dir="auto">HeyGen</div>
         </div>
 
         <!-- Spotify Branding -->
diff --git a/registry/blocks/swirl-vortex/swirl-vortex.html b/registry/blocks/swirl-vortex/swirl-vortex.html
index 6b7dc8bf8d..937ba31210 100644
--- a/registry/blocks/swirl-vortex/swirl-vortex.html
+++ b/registry/blocks/swirl-vortex/swirl-vortex.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/thermal-distortion/thermal-distortion.html b/registry/blocks/thermal-distortion/thermal-distortion.html
index ec5c04f027..13df6e983d 100644
--- a/registry/blocks/thermal-distortion/thermal-distortion.html
+++ b/registry/blocks/thermal-distortion/thermal-distortion.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/tiktok-follow/tiktok-follow.html b/registry/blocks/tiktok-follow/tiktok-follow.html
index 631e7ef858..14ef17eda5 100644
--- a/registry/blocks/tiktok-follow/tiktok-follow.html
+++ b/registry/blocks/tiktok-follow/tiktok-follow.html
@@ -35,7 +35,8 @@
         gap: 30px;
         background: #1a1a1a;
         border-radius: 75px;
-        padding: 25px 40px 25px 25px;
+        padding-block: 25px;
+        padding-inline: 25px 40px;
         box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
       }
 
@@ -52,7 +53,9 @@
         display: flex;
         flex-direction: column;
         gap: 2px;
-        margin-right: 20px;
+        margin-inline-end: 20px;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="tiktok-follow"] .display-name {
@@ -61,6 +64,7 @@
         color: #ffffff;
         line-height: 1.3;
         letter-spacing: -0.01em;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="tiktok-follow"] .handle {
@@ -68,6 +72,7 @@
         font-weight: 400;
         color: #a0a0a0;
         line-height: 1.3;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="tiktok-follow"] .follower-count {
@@ -75,6 +80,7 @@
         font-weight: 400;
         color: #737373;
         line-height: 1.3;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="tiktok-follow"] .follow-btn {
@@ -142,9 +148,9 @@
       >
         <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
         <div class="profile-info">
-          <div class="display-name">HeyGen</div>
-          <div class="handle">@heygen.com</div>
-          <div class="follower-count">1,999 followers</div>
+          <div class="display-name" dir="auto">HeyGen</div>
+          <div class="handle" dir="auto">@heygen.com</div>
+          <div class="follower-count" dir="auto">1,999 followers</div>
         </div>
         <div id="follow-btn" class="follow-btn">
           <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
diff --git a/registry/blocks/transitions-3d/transitions-3d.html b/registry/blocks/transitions-3d/transitions-3d.html
index 308b776326..d3453fe770 100644
--- a/registry/blocks/transitions-3d/transitions-3d.html
+++ b/registry/blocks/transitions-3d/transitions-3d.html
@@ -165,6 +165,7 @@
       data-duration="11"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div id="title-card">
         <div class="category">3D Transitions</div>
diff --git a/registry/blocks/transitions-blur/transitions-blur.html b/registry/blocks/transitions-blur/transitions-blur.html
index ed50af942f..032ec42147 100644
--- a/registry/blocks/transitions-blur/transitions-blur.html
+++ b/registry/blocks/transitions-blur/transitions-blur.html
@@ -97,6 +97,7 @@
       data-duration="20"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-cover/transitions-cover.html b/registry/blocks/transitions-cover/transitions-cover.html
index 1d03ae644b..767f43faa7 100644
--- a/registry/blocks/transitions-cover/transitions-cover.html
+++ b/registry/blocks/transitions-cover/transitions-cover.html
@@ -161,6 +161,7 @@
       data-width="1920"
       data-height="1080"
       style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-destruction/transitions-destruction.html b/registry/blocks/transitions-destruction/transitions-destruction.html
index 32807555c3..143900c8cb 100644
--- a/registry/blocks/transitions-destruction/transitions-destruction.html
+++ b/registry/blocks/transitions-destruction/transitions-destruction.html
@@ -97,6 +97,7 @@
       data-duration="14"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-dissolve/transitions-dissolve.html b/registry/blocks/transitions-dissolve/transitions-dissolve.html
index 0c97ee786a..fa2507fa83 100644
--- a/registry/blocks/transitions-dissolve/transitions-dissolve.html
+++ b/registry/blocks/transitions-dissolve/transitions-dissolve.html
@@ -97,6 +97,7 @@
       data-duration="24"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-distortion/transitions-distortion.html b/registry/blocks/transitions-distortion/transitions-distortion.html
index e60f1319ac..449b82a4e8 100644
--- a/registry/blocks/transitions-distortion/transitions-distortion.html
+++ b/registry/blocks/transitions-distortion/transitions-distortion.html
@@ -124,6 +124,7 @@
       data-width="1920"
       data-height="1080"
       style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-grid/transitions-grid.html b/registry/blocks/transitions-grid/transitions-grid.html
index c6e9503120..21fdc4a01c 100644
--- a/registry/blocks/transitions-grid/transitions-grid.html
+++ b/registry/blocks/transitions-grid/transitions-grid.html
@@ -124,6 +124,7 @@
       data-width="1920"
       data-height="1080"
       style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-light/transitions-light.html b/registry/blocks/transitions-light/transitions-light.html
index f5f32b03f5..c58e9ccd51 100644
--- a/registry/blocks/transitions-light/transitions-light.html
+++ b/registry/blocks/transitions-light/transitions-light.html
@@ -161,6 +161,7 @@
       data-width="1920"
       data-height="1080"
       style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-mechanical/transitions-mechanical.html b/registry/blocks/transitions-mechanical/transitions-mechanical.html
index ec0547f7b7..010e478bb2 100644
--- a/registry/blocks/transitions-mechanical/transitions-mechanical.html
+++ b/registry/blocks/transitions-mechanical/transitions-mechanical.html
@@ -97,6 +97,7 @@
       data-duration="15"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-other/transitions-other.html b/registry/blocks/transitions-other/transitions-other.html
index cc905c4caf..d0d2f8e963 100644
--- a/registry/blocks/transitions-other/transitions-other.html
+++ b/registry/blocks/transitions-other/transitions-other.html
@@ -97,6 +97,7 @@
       data-duration="20"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-push/transitions-push.html b/registry/blocks/transitions-push/transitions-push.html
index bb96cb3fa8..bef641311d 100644
--- a/registry/blocks/transitions-push/transitions-push.html
+++ b/registry/blocks/transitions-push/transitions-push.html
@@ -97,6 +97,7 @@
       data-duration="24"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/transitions-radial/transitions-radial.html b/registry/blocks/transitions-radial/transitions-radial.html
index bd6aaf0334..396d436e29 100644
--- a/registry/blocks/transitions-radial/transitions-radial.html
+++ b/registry/blocks/transitions-radial/transitions-radial.html
@@ -158,6 +158,7 @@
       data-duration="20"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <div id="title-card">
         <div class="category">Radial Transitions</div>
diff --git a/registry/blocks/transitions-scale/transitions-scale.html b/registry/blocks/transitions-scale/transitions-scale.html
index 797c6b7edf..b6affd090f 100644
--- a/registry/blocks/transitions-scale/transitions-scale.html
+++ b/registry/blocks/transitions-scale/transitions-scale.html
@@ -97,6 +97,7 @@
       data-duration="15"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <!-- Title Card -->
       <div id="title-card">
diff --git a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
index 7707480b56..473741ed13 100644
--- a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
+++ b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
@@ -34,6 +34,7 @@
       data-height="1080"
       data-start="0"
       data-duration="13"
+      dir="ltr"
     >
       <!-- Background: Figma outer canvas dark -->
       <div class="bg-base"></div>
diff --git a/registry/blocks/us-map-bubble/us-map-bubble.html b/registry/blocks/us-map-bubble/us-map-bubble.html
index 943269a942..f6418978a4 100644
--- a/registry/blocks/us-map-bubble/us-map-bubble.html
+++ b/registry/blocks/us-map-bubble/us-map-bubble.html
@@ -37,6 +37,7 @@
       data-height="1080"
       data-start="0"
       data-duration="12"
+      dir="ltr"
     >
       <div class="map-container">
         <div class="header">
diff --git a/registry/blocks/us-map-flow/us-map-flow.html b/registry/blocks/us-map-flow/us-map-flow.html
index 1805d7c3a5..abadb03a51 100644
--- a/registry/blocks/us-map-flow/us-map-flow.html
+++ b/registry/blocks/us-map-flow/us-map-flow.html
@@ -38,6 +38,7 @@
       data-height="1080"
       data-start="0"
       data-duration="12"
+      dir="ltr"
     >
       <div class="flow-header">
         <h1 class="flow-headline">Interstate Flow Connections</h1>
diff --git a/registry/blocks/us-map-hex/us-map-hex.html b/registry/blocks/us-map-hex/us-map-hex.html
index 3d8ec4faf7..e65d566dc1 100644
--- a/registry/blocks/us-map-hex/us-map-hex.html
+++ b/registry/blocks/us-map-hex/us-map-hex.html
@@ -35,6 +35,7 @@
       data-height="1080"
       data-start="0"
       data-duration="10"
+      dir="ltr"
     >
       <div class="map-header">
         <h1 class="map-headline">Median Household Income by State</h1>
diff --git a/registry/blocks/us-map/us-map.html b/registry/blocks/us-map/us-map.html
index 3a8c59a3b6..7ed2a428bb 100644
--- a/registry/blocks/us-map/us-map.html
+++ b/registry/blocks/us-map/us-map.html
@@ -37,6 +37,7 @@
       data-height="1080"
       data-start="0"
       data-duration="12"
+      dir="ltr"
     >
       <div class="map-container">
         <div class="header">
diff --git a/registry/blocks/vfx-liquid-background/vfx-liquid-background.html b/registry/blocks/vfx-liquid-background/vfx-liquid-background.html
index c0f1b7a026..479fd32fdc 100644
--- a/registry/blocks/vfx-liquid-background/vfx-liquid-background.html
+++ b/registry/blocks/vfx-liquid-background/vfx-liquid-background.html
@@ -369,12 +369,16 @@
               "
             ></div>
             <div>
-              <div style="font-size: 22px; font-weight: 700">Sarah Chen</div>
-              <div style="font-size: 16px; color: #71767b">@sarahchen</div>
+              <div style="font-size: 22px; font-weight: 700; unicode-bidi: plaintext" dir="auto">
+                Sarah Chen
+              </div>
+              <div style="font-size: 16px; color: #71767b; unicode-bidi: plaintext" dir="auto">
+                @sarahchen
+              </div>
             </div>
             <div
               style="
-                margin-left: auto;
+                margin-inline-start: auto;
                 padding: 8px 20px;
                 border-radius: 20px;
                 background: #1d9bf0;
@@ -399,7 +403,9 @@
             "
           >
             <div style="width: 44px; height: 44px; border-radius: 50%; background: #1e293b"></div>
-            <span style="font-size: 20px; color: #71767b">What's happening?</span>
+            <span style="font-size: 20px; color: #71767b; unicode-bidi: plaintext" dir="auto">
+              What's happening?
+            </span>
           </div>
 
           <!-- Post 1 -->
diff --git a/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html b/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html
index ca0cdf5c81..0ce2b6e827 100644
--- a/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html
+++ b/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html
@@ -43,7 +43,7 @@
 
       .headline {
         position: absolute;
-        left: 118px;
+        inset-inline-start: 118px;
         top: 104px;
         width: 580px;
         display: flex;
@@ -51,6 +51,8 @@
         gap: 2px;
         z-index: 2;
         pointer-events: none;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       .headline span {
@@ -76,7 +78,7 @@
 
       .ambient-word {
         position: absolute;
-        right: 78px;
+        inset-inline-end: 78px;
         bottom: 64px;
         color: rgba(17, 17, 17, 0.05);
         font-size: 208px;
@@ -190,6 +192,8 @@
         line-height: 1;
         font-weight: 900;
         letter-spacing: 0;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       .avatar {
@@ -227,7 +231,7 @@
       .search-icon::after {
         content: "";
         position: absolute;
-        right: -8px;
+        inset-inline-end: -8px;
         bottom: -5px;
         width: 9px;
         height: 3px;
diff --git a/registry/blocks/whip-pan/whip-pan.html b/registry/blocks/whip-pan/whip-pan.html
index d1ea5aa1c0..cbe4ffe533 100644
--- a/registry/blocks/whip-pan/whip-pan.html
+++ b/registry/blocks/whip-pan/whip-pan.html
@@ -26,6 +26,7 @@
       data-duration="4"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <style>
         [data-composition-id="main"] {
diff --git a/registry/blocks/world-map/world-map.html b/registry/blocks/world-map/world-map.html
index 4e451c217b..4ed6b4bfa7 100644
--- a/registry/blocks/world-map/world-map.html
+++ b/registry/blocks/world-map/world-map.html
@@ -159,6 +159,7 @@
       data-height="1080"
       data-start="0"
       data-duration="14"
+      dir="ltr"
     >
       <h1 class="headline">Global GDP per Capita</h1>
       <p class="subtitle">Nominal GDP per capita, 2024 IMF estimates</p>
diff --git a/registry/blocks/x-post/x-post.html b/registry/blocks/x-post/x-post.html
index fa81aa7c3b..b42a52cad1 100644
--- a/registry/blocks/x-post/x-post.html
+++ b/registry/blocks/x-post/x-post.html
@@ -45,8 +45,7 @@
         content: "";
         position: absolute;
         bottom: 0;
-        left: 0;
-        right: 0;
+        inset-inline: 0;
         height: 80px;
         background: linear-gradient(to top, rgba(29, 155, 240, 0.08), transparent);
         pointer-events: none;
@@ -80,6 +79,8 @@
         flex-direction: column;
         gap: 2px;
         flex: 1;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="x-post"] .name-row {
@@ -112,7 +113,7 @@
       [data-composition-id="x-post"] .x-logo {
         position: absolute;
         top: 2px;
-        right: 0;
+        inset-inline-end: 0;
         width: 32px;
         height: 32px;
       }
@@ -134,6 +135,8 @@
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
         overflow: hidden;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="x-post"] .hashtag {
@@ -163,7 +166,7 @@
         align-items: center;
         flex: 1;
         justify-content: space-between;
-        padding-right: 60px;
+        padding-inline-end: 60px;
       }
 
       [data-composition-id="x-post"] .metrics-right {
@@ -219,8 +222,8 @@
             </svg>
           </div>
           <div class="user-info">
-            <div class="name-row">
-              <span class="display-name">Hyperframes</span>
+            <div class="name-row" dir="auto">
+              <span class="display-name" dir="auto">Hyperframes</span>
               <span class="verified-badge">
                 <svg viewBox="0 0 22 22" fill="none">
                   <circle cx="11" cy="11" r="11" fill="#1d9bf0" />
@@ -231,7 +234,7 @@
                 </svg>
               </span>
             </div>
-            <span class="handle">@hyperframes</span>
+            <span class="handle" dir="auto">@hyperframes</span>
           </div>
           <div class="x-logo">
             <svg viewBox="0 0 24 24" fill="#e7e9ea">
@@ -243,13 +246,13 @@
         </div>
 
         <!-- Tweet body: prompt to replace with your content -->
-        <div class="tweet-body">
+        <div class="tweet-body" dir="auto">
           Prompt to replace this text with your tweet. Change the display name, handle, timestamp,
           and engagement counts to match your content. <span class="hashtag">#YourHashtag</span>
         </div>
 
         <!-- Timestamp: prompt to replace -->
-        <div class="timestamp">1:10 PM &middot; Apr 7, 2026</div>
+        <div class="timestamp" dir="auto">1:10 PM &middot; Apr 7, 2026</div>
 
         <!-- Metrics bar -->
         <div class="metrics-bar">
diff --git a/registry/blocks/yt-lower-third/yt-lower-third.html b/registry/blocks/yt-lower-third/yt-lower-third.html
index b69fbb1a52..2b500fd87b 100644
--- a/registry/blocks/yt-lower-third/yt-lower-third.html
+++ b/registry/blocks/yt-lower-third/yt-lower-third.html
@@ -35,7 +35,8 @@
         gap: 28px;
         background: #ffffff;
         border-radius: 60px;
-        padding: 20px 32px 20px 20px;
+        padding-block: 20px;
+        padding-inline: 20px 32px;
         box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
       }
 
@@ -51,7 +52,9 @@
         display: flex;
         flex-direction: column;
         gap: 2px;
-        margin-right: 20px;
+        margin-inline-end: 20px;
+        text-align: start;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="yt-lower-third"] .channel-name {
@@ -60,6 +63,7 @@
         color: #0f0f0f;
         line-height: 1.3;
         letter-spacing: -0.01em;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="yt-lower-third"] .subscriber-count {
@@ -67,6 +71,7 @@
         font-weight: 400;
         color: #606060;
         line-height: 1.3;
+        unicode-bidi: plaintext;
       }
 
       [data-composition-id="yt-lower-third"] .subscribe-btn {
@@ -134,8 +139,8 @@
       >
         <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
         <div class="channel-info">
-          <div class="channel-name">HeyGen</div>
-          <div class="subscriber-count">82.2K subscribers</div>
+          <div class="channel-name" dir="auto">HeyGen</div>
+          <div class="subscriber-count" dir="auto">82.2K subscribers</div>
         </div>
         <div id="subscribe-btn" class="subscribe-btn">
           <span id="btn-subscribe" class="btn-text btn-text-subscribe">Subscribe</span>
diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index e48662dded..2d17d018d5 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -57,7 +57,7 @@
       .wp-group {
         position: absolute;
         bottom: 120px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -79,6 +79,9 @@
         clip-path: inset(0 100% 0 0);
         will-change: clip-path, color, opacity;
       }
+      :dir(rtl) .wp-word {
+        clip-path: inset(0 0 0 100%);
+      }
     </style>
   </head>
   <body>
@@ -108,6 +111,8 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+        var exitClipPath = isRtl ? "inset(0 100% 0 0)" : "inset(0 0% 0 100%)";
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -225,7 +230,7 @@
           tl.to(
             wordEls,
             {
-              clipPath: "inset(0 0% 0 100%)",
+              clipPath: exitClipPath,
               duration: 0.25,
               stagger: 0.04,
               ease: "power2.in",
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index a519dbfe88..61f9e345aa 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -56,7 +56,7 @@
       .wp-group {
         position: absolute;
         bottom: 120px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -78,6 +78,9 @@
         clip-path: inset(0 100% 0 0);
         will-change: clip-path, color, opacity;
       }
+      :dir(rtl) .wp-word {
+        clip-path: inset(0 0 0 100%);
+      }
     </style>
   </head>
   <body>
@@ -106,6 +109,8 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+        var exitClipPath = isRtl ? "inset(0 100% 0 0)" : "inset(0 0% 0 100%)";
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -223,7 +228,7 @@
           tl.to(
             wordEls,
             {
-              clipPath: "inset(0 0% 0 100%)",
+              clipPath: exitClipPath,
               duration: 0.25,
               stagger: 0.04,
               ease: "power2.in",
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index b90b987289..dee60f7256 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -57,7 +57,7 @@
       .safe-zone {
         position: absolute;
         top: 580px;
-        left: 60px;
+        inset-inline-start: 60px;
         width: 1800px;
         height: 430px;
         display: flex;
@@ -67,7 +67,7 @@
 
       .caption-block {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         opacity: 0;
         transform-origin: 0% 0%;
@@ -367,6 +367,9 @@
       })();
 
       window.__timelines = window.__timelines || {};
+      var isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+      var inlineStartOrigin = isRtl ? "100% 100%" : "0% 100%";
+      var inlineEnterX = isRtl ? 1920 : -1920;
       var tl = gsap.timeline({ paused: true });
 
       var allEls = BLOCKS.map(function (_, i) {
@@ -390,7 +393,7 @@
         block.line1.forEach(function (pair, wi) {
           var wordEl = document.getElementById("b" + bi + "L1w" + wi);
           var wordStart = W[pair[0]].start;
-          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: inlineStartOrigin }, start);
           tl.to(
             wordEl,
             { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
@@ -405,14 +408,18 @@
           var l2El = document.getElementById("b" + bi + "L2");
           if (hasEmphasis) {
             var l2Start = W[block.line2[0][0]].start;
-            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.set(l2El, { opacity: 0, x: inlineEnterX }, start);
             tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
           } else {
             tl.set(l2El, { opacity: 1 }, start);
             block.line2.forEach(function (pair, wi) {
               var wordEl = document.getElementById("b" + bi + "L2w" + wi);
               var wordStart = W[pair[0]].start;
-              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.set(
+                wordEl,
+                { opacity: 0, scale: 1.12, transformOrigin: inlineStartOrigin },
+                start,
+              );
               tl.to(
                 wordEl,
                 { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
diff --git a/registry/components/caption-editorial-emphasis/demo.html b/registry/components/caption-editorial-emphasis/demo.html
index 85067766d3..d8a1c2472b 100644
--- a/registry/components/caption-editorial-emphasis/demo.html
+++ b/registry/components/caption-editorial-emphasis/demo.html
@@ -56,7 +56,7 @@
       .safe-zone {
         position: absolute;
         top: 580px;
-        left: 60px;
+        inset-inline-start: 60px;
         width: 1800px;
         height: 430px;
         display: flex;
@@ -66,7 +66,7 @@
 
       .caption-block {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         opacity: 0;
         transform-origin: 0% 0%;
@@ -365,6 +365,9 @@
       })();
 
       window.__timelines = window.__timelines || {};
+      var isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+      var inlineStartOrigin = isRtl ? "100% 100%" : "0% 100%";
+      var inlineEnterX = isRtl ? 1920 : -1920;
       var tl = gsap.timeline({ paused: true });
 
       var allEls = BLOCKS.map(function (_, i) {
@@ -388,7 +391,7 @@
         block.line1.forEach(function (pair, wi) {
           var wordEl = document.getElementById("b" + bi + "L1w" + wi);
           var wordStart = W[pair[0]].start;
-          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: inlineStartOrigin }, start);
           tl.to(
             wordEl,
             { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
@@ -403,14 +406,18 @@
           var l2El = document.getElementById("b" + bi + "L2");
           if (hasEmphasis) {
             var l2Start = W[block.line2[0][0]].start;
-            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.set(l2El, { opacity: 0, x: inlineEnterX }, start);
             tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
           } else {
             tl.set(l2El, { opacity: 1 }, start);
             block.line2.forEach(function (pair, wi) {
               var wordEl = document.getElementById("b" + bi + "L2w" + wi);
               var wordStart = W[pair[0]].start;
-              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.set(
+                wordEl,
+                { opacity: 0, scale: 1.12, transformOrigin: inlineStartOrigin },
+                start,
+              );
               tl.to(
                 wordEl,
                 { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
index d0da71dc56..8f36e18108 100644
--- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
+++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -111,6 +111,7 @@
       data-fps="30"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <video
         id="gl-video"
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index 0cff82ec3f..e3a23accf1 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -109,6 +109,7 @@
       data-fps="30"
       data-width="1920"
       data-height="1080"
+      dir="ltr"
     >
       <video
         id="gl-video"
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index 1b4ecc900f..fd881e9863 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -42,7 +42,7 @@
       .gr-group {
         position: absolute;
         bottom: 120px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -65,7 +65,7 @@
         background-clip: text;
         color: transparent;
         background-size: 350% 100%;
-        background-position: 100% 0;
+        background-position: var(--gradient-fill-start, 100%) 0;
       }
     </style>
   </head>
@@ -95,6 +95,11 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+        var gradientAngle = isRtl ? "270deg" : "90deg";
+        var gradientStart = isRtl ? "0% 0" : "100% 0";
+        var gradientMid = isRtl ? "55% 0" : "45% 0";
+        var gradientEnd = isRtl ? "100% 0" : "0% 0";
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -154,7 +159,9 @@
         ];
 
         var SIRI_GRAD =
-          "linear-gradient(90deg, " +
+          "linear-gradient(" +
+          gradientAngle +
+          ", " +
           "#fe9f1b 0%, #f76e49 10%, #ff2063 20%, " +
           "#fd56cb 30%, #ef7aff 40%, #fe9f1b 50%, " +
           "white 50.5%, white 100%)";
@@ -183,7 +190,7 @@
             span.style.fontSize = fontSize + "px";
             span.style.background = SIRI_GRAD;
             span.style.backgroundSize = "350% 100%";
-            span.style.backgroundPosition = "100% 0";
+            span.style.backgroundPosition = gradientStart;
             span.style.webkitBackgroundClip = "text";
             span.style.backgroundClip = "text";
             grp.appendChild(span);
@@ -205,15 +212,15 @@
             var el = document.getElementById("gr-w-" + wi);
             var dur = w.end - w.start;
 
-            tl.set(el, { backgroundPosition: "100% 0", scale: 1 }, g.start);
+            tl.set(el, { backgroundPosition: gradientStart, scale: 1 }, g.start);
             tl.set(el, { scale: 1.04 }, w.start);
             tl.fromTo(
               el,
-              { backgroundPosition: "45% 0" },
-              { backgroundPosition: "0% 0", duration: dur, ease: "none" },
+              { backgroundPosition: gradientMid },
+              { backgroundPosition: gradientEnd, duration: dur, ease: "none" },
               w.start,
             );
-            tl.set(el, { backgroundPosition: "100% 0" }, w.end);
+            tl.set(el, { backgroundPosition: gradientStart }, w.end);
             tl.to(el, { scale: 1, duration: 0.15, ease: "power2.out" }, w.end);
           });
 
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index 6ea07aa971..ebfa8c2e49 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -41,7 +41,7 @@
       .gr-group {
         position: absolute;
         bottom: 120px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -64,7 +64,7 @@
         background-clip: text;
         color: transparent;
         background-size: 350% 100%;
-        background-position: 100% 0;
+        background-position: var(--gradient-fill-start, 100%) 0;
       }
     </style>
   </head>
@@ -93,6 +93,11 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var isRtl = getComputedStyle(document.documentElement).direction === "rtl";
+        var gradientAngle = isRtl ? "270deg" : "90deg";
+        var gradientStart = isRtl ? "0% 0" : "100% 0";
+        var gradientMid = isRtl ? "55% 0" : "45% 0";
+        var gradientEnd = isRtl ? "100% 0" : "0% 0";
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -152,7 +157,9 @@
         ];
 
         var SIRI_GRAD =
-          "linear-gradient(90deg, " +
+          "linear-gradient(" +
+          gradientAngle +
+          ", " +
           "#fe9f1b 0%, #f76e49 10%, #ff2063 20%, " +
           "#fd56cb 30%, #ef7aff 40%, #fe9f1b 50%, " +
           "white 50.5%, white 100%)";
@@ -181,7 +188,7 @@
             span.style.fontSize = fontSize + "px";
             span.style.background = SIRI_GRAD;
             span.style.backgroundSize = "350% 100%";
-            span.style.backgroundPosition = "100% 0";
+            span.style.backgroundPosition = gradientStart;
             span.style.webkitBackgroundClip = "text";
             span.style.backgroundClip = "text";
             grp.appendChild(span);
@@ -203,15 +210,15 @@
             var el = document.getElementById("gr-w-" + wi);
             var dur = w.end - w.start;
 
-            tl.set(el, { backgroundPosition: "100% 0", scale: 1 }, g.start);
+            tl.set(el, { backgroundPosition: gradientStart, scale: 1 }, g.start);
             tl.set(el, { scale: 1.04 }, w.start);
             tl.fromTo(
               el,
-              { backgroundPosition: "45% 0" },
-              { backgroundPosition: "0% 0", duration: dur, ease: "none" },
+              { backgroundPosition: gradientMid },
+              { backgroundPosition: gradientEnd, duration: dur, ease: "none" },
               w.start,
             );
-            tl.set(el, { backgroundPosition: "100% 0" }, w.end);
+            tl.set(el, { backgroundPosition: gradientStart }, w.end);
             tl.to(el, { scale: 1, duration: 0.15, ease: "power2.out" }, w.end);
           });
 
diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
index 2617005887..b32fe65e2e 100644
--- a/registry/components/caption-highlight/caption-highlight.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -57,7 +57,7 @@
       .hl-group {
         position: absolute;
         bottom: 140px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -94,6 +94,9 @@
         transform-origin: 0% 50%;
         z-index: -1;
       }
+      :dir(rtl) .hl-word-bg {
+        transform-origin: 100% 50%;
+      }
       .hl-word-text {
         position: relative;
         z-index: 1;
diff --git a/registry/components/caption-highlight/demo.html b/registry/components/caption-highlight/demo.html
index 2236c8b89e..c78e86b8f1 100644
--- a/registry/components/caption-highlight/demo.html
+++ b/registry/components/caption-highlight/demo.html
@@ -56,7 +56,7 @@
       .hl-group {
         position: absolute;
         bottom: 140px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -93,6 +93,9 @@
         transform-origin: 0% 50%;
         z-index: -1;
       }
+      :dir(rtl) .hl-word-bg {
+        transform-origin: 100% 50%;
+      }
       .hl-word-text {
         position: relative;
         z-index: 1;
diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
index 38a6ce013d..cc0430393d 100644
--- a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
+++ b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
@@ -57,7 +57,7 @@
         text-transform: uppercase;
         color: #ffffff;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         text-align: center;
         top: 50%;
@@ -95,6 +95,7 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var inlineSign = getComputedStyle(document.documentElement).direction === "rtl" ? -1 : 1;
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -179,14 +180,14 @@
           } else if (entranceMode === 1) {
             tl.fromTo(
               el,
-              { x: -300, opacity: 0 },
+              { x: -300 * inlineSign, opacity: 0 },
               { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
               w.start,
             );
           } else if (entranceMode === 2) {
             tl.fromTo(
               el,
-              { x: 300, opacity: 0 },
+              { x: 300 * inlineSign, opacity: 0 },
               { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
               w.start,
             );
diff --git a/registry/components/caption-kinetic-slam/demo.html b/registry/components/caption-kinetic-slam/demo.html
index a3d4d73144..32c1b9da6c 100644
--- a/registry/components/caption-kinetic-slam/demo.html
+++ b/registry/components/caption-kinetic-slam/demo.html
@@ -56,7 +56,7 @@
         text-transform: uppercase;
         color: #ffffff;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         text-align: center;
         top: 50%;
@@ -93,6 +93,7 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var inlineSign = getComputedStyle(document.documentElement).direction === "rtl" ? -1 : 1;
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -177,14 +178,14 @@
           } else if (entranceMode === 1) {
             tl.fromTo(
               el,
-              { x: -300, opacity: 0 },
+              { x: -300 * inlineSign, opacity: 0 },
               { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
               w.start,
             );
           } else if (entranceMode === 2) {
             tl.fromTo(
               el,
-              { x: 300, opacity: 0 },
+              { x: 300 * inlineSign, opacity: 0 },
               { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
               w.start,
             );
diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html
index 871a1f7b6c..ccffd7b264 100644
--- a/registry/components/caption-neon-glow/caption-neon-glow.html
+++ b/registry/components/caption-neon-glow/caption-neon-glow.html
@@ -57,7 +57,7 @@
       .ne-group {
         position: absolute;
         bottom: 120px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -107,6 +107,7 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var inlineSign = getComputedStyle(document.documentElement).direction === "rtl" ? -1 : 1;
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -197,7 +198,12 @@
 
           tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
           tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
-          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
+          tl.fromTo(
+            grp,
+            { x: -8 * inlineSign },
+            { x: 0, duration: 0.14, ease: "power3.out" },
+            g.start + 0.05,
+          );
 
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
@@ -222,7 +228,11 @@
             tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
           });
 
-          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.to(
+            grp,
+            { opacity: 0, x: 6 * inlineSign, duration: 0.1, ease: "steps(1)" },
+            g.end - 0.1,
+          );
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
diff --git a/registry/components/caption-neon-glow/demo.html b/registry/components/caption-neon-glow/demo.html
index 0416d344f9..1b8e06478a 100644
--- a/registry/components/caption-neon-glow/demo.html
+++ b/registry/components/caption-neon-glow/demo.html
@@ -56,7 +56,7 @@
       .ne-group {
         position: absolute;
         bottom: 120px;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -105,6 +105,7 @@
     <script>
       (function () {
         window.__timelines = window.__timelines || {};
+        var inlineSign = getComputedStyle(document.documentElement).direction === "rtl" ? -1 : 1;
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
@@ -195,7 +196,12 @@
 
           tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
           tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
-          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
+          tl.fromTo(
+            grp,
+            { x: -8 * inlineSign },
+            { x: 0, duration: 0.14, ease: "power3.out" },
+            g.start + 0.05,
+          );
 
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
@@ -220,7 +226,11 @@
             tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
           });
 
-          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.to(
+            grp,
+            { opacity: 0, x: 6 * inlineSign, duration: 0.1, ease: "steps(1)" },
+            g.end - 0.1,
+          );
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
diff --git a/registry/components/grain-overlay/demo.html b/registry/components/grain-overlay/demo.html
index c4d1aeccf6..8bf230d386 100644
--- a/registry/components/grain-overlay/demo.html
+++ b/registry/components/grain-overlay/demo.html
@@ -27,6 +27,7 @@
       data-width="1920"
       data-height="1080"
       data-duration="5"
+      dir="ltr"
     >
       <!-- Background content to demonstrate the overlay -->
       <div class="demo-bg">
diff --git a/registry/components/motion-blur/demo.html b/registry/components/motion-blur/demo.html
index ebbe8b6643..5de97b027f 100644
--- a/registry/components/motion-blur/demo.html
+++ b/registry/components/motion-blur/demo.html
@@ -183,6 +183,7 @@
       data-height="1080"
       data-start="0"
       data-duration="4"
+      dir="ltr"
     >
       <div class="header">
         <span class="header-title">Motion Blur — Velocity Showcase</span>
diff --git a/registry/components/shimmer-sweep/demo.html b/registry/components/shimmer-sweep/demo.html
index fcaae780d6..90e043a2b6 100644
--- a/registry/components/shimmer-sweep/demo.html
+++ b/registry/components/shimmer-sweep/demo.html
@@ -88,21 +88,30 @@
         .shimmer-sweep-target {
           position: relative;
           display: inline-block;
+          --shimmer-start: -20%;
+          --shimmer-end: 120%;
+        }
+
+        :dir(rtl) .shimmer-sweep-target {
+          --shimmer-start: 120%;
+          --shimmer-end: -20%;
         }
 
         .shimmer-sweep-target .shimmer-mask {
           position: absolute;
           top: 0;
-          left: 0;
+          inset-inline-start: 0;
           width: 100%;
           height: 100%;
           pointer-events: none;
           background: linear-gradient(
             var(--shimmer-angle, 120deg),
             transparent 0%,
-            transparent calc(var(--shimmer-pos, -20%) - var(--shimmer-width, 20%) / 2),
-            var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, -20%),
-            transparent calc(var(--shimmer-pos, -20%) + var(--shimmer-width, 20%) / 2),
+            transparent
+              calc(var(--shimmer-pos, var(--shimmer-start)) - var(--shimmer-width, 20%) / 2),
+            var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, var(--shimmer-start)),
+            transparent
+              calc(var(--shimmer-pos, var(--shimmer-start)) + var(--shimmer-width, 20%) / 2),
             transparent 100%
           );
           mix-blend-mode: overlay;
@@ -121,6 +130,10 @@
           });
 
           const tl = gsap.timeline({ paused: true });
+          const shimmerTarget = document.querySelector(".shimmer-sweep-target");
+          const shimmerStyle = getComputedStyle(shimmerTarget);
+          const shimmerStart = shimmerStyle.getPropertyValue("--shimmer-start").trim();
+          const shimmerEnd = shimmerStyle.getPropertyValue("--shimmer-end").trim();
 
           // Fade in elements
           tl.to(".demo-heading", { opacity: 1, duration: 0.6, ease: "power2.out" }, 0.3);
@@ -130,9 +143,9 @@
           // First shimmer sweep across all targets
           tl.fromTo(
             ".shimmer-sweep-target",
-            { "--shimmer-pos": "-20%" },
+            { "--shimmer-pos": shimmerStart },
             {
-              "--shimmer-pos": "120%",
+              "--shimmer-pos": shimmerEnd,
               duration: 1.2,
               ease: "power2.inOut",
               stagger: 0.15,
@@ -143,9 +156,9 @@
           // Second sweep
           tl.fromTo(
             ".shimmer-sweep-target",
-            { "--shimmer-pos": "-20%" },
+            { "--shimmer-pos": shimmerStart },
             {
-              "--shimmer-pos": "120%",
+              "--shimmer-pos": shimmerEnd,
               duration: 1.0,
               ease: "power2.inOut",
               stagger: 0.1,
diff --git a/registry/components/shimmer-sweep/shimmer-sweep.html b/registry/components/shimmer-sweep/shimmer-sweep.html
index 84d3be4eb9..1c59d356a1 100644
--- a/registry/components/shimmer-sweep/shimmer-sweep.html
+++ b/registry/components/shimmer-sweep/shimmer-sweep.html
@@ -11,27 +11,35 @@
   - --shimmer-width: highlight band width as % (default 20%)
   - --shimmer-angle: sweep angle (default 120deg)
   - Timeline duration/ease: adjust in the script below
+  - RTL: animate from --shimmer-start to --shimmer-end; defaults flip in rtl
 -->
 
 <style>
   .shimmer-sweep-target {
     position: relative;
     display: inline-block;
+    --shimmer-start: -20%;
+    --shimmer-end: 120%;
+  }
+
+  :dir(rtl) .shimmer-sweep-target {
+    --shimmer-start: 120%;
+    --shimmer-end: -20%;
   }
 
   .shimmer-sweep-target .shimmer-mask {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     background: linear-gradient(
       var(--shimmer-angle, 120deg),
       transparent 0%,
-      transparent calc(var(--shimmer-pos, -20%) - var(--shimmer-width, 20%) / 2),
-      var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, -20%),
-      transparent calc(var(--shimmer-pos, -20%) + var(--shimmer-width, 20%) / 2),
+      transparent calc(var(--shimmer-pos, var(--shimmer-start)) - var(--shimmer-width, 20%) / 2),
+      var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, var(--shimmer-start)),
+      transparent calc(var(--shimmer-pos, var(--shimmer-start)) + var(--shimmer-width, 20%) / 2),
       transparent 100%
     );
     mix-blend-mode: overlay;
@@ -54,11 +62,13 @@
 <!--
   Timeline integration example (add to your composition's GSAP timeline):
 
-  // Single sweep from left to right
+  // Single sweep from reading start to reading end
+  const shimmerTarget = document.querySelector(".shimmer-sweep-target");
+  const shimmerStyle = getComputedStyle(shimmerTarget);
   tl.fromTo(".shimmer-sweep-target", {
-    "--shimmer-pos": "-20%",
+    "--shimmer-pos": shimmerStyle.getPropertyValue("--shimmer-start").trim(),
   }, {
-    "--shimmer-pos": "120%",
+    "--shimmer-pos": shimmerStyle.getPropertyValue("--shimmer-end").trim(),
     duration: 1.2,
     ease: "power2.inOut",
     stagger: 0.15,
diff --git a/registry/components/vignette/demo.html b/registry/components/vignette/demo.html
index d96e7ef03e..2d2d31f403 100644
--- a/registry/components/vignette/demo.html
+++ b/registry/components/vignette/demo.html
@@ -28,6 +28,7 @@
       data-width="1920"
       data-height="1080"
       data-duration="5"
+      dir="ltr"
     >
       <!-- Backdrop: a layered "cinematic still" — a warm key light at upper-left,
            a teal rim light at lower-right, and a soft global glow. The vignette