Update directives-reference.mdx with optional root margin

src/content/docs/en/reference/directives-reference.mdx

@@ -3,6 +3,8 @@ title: Template Directives Reference
 i18nReady: true
 ---
 
+import Since from '~/components/Since.astro';
+
 **Template directives** are a special kind of HTML attribute available inside of any Astro component template (`.astro` files), and some can also be used in `.mdx` files.
 
 Template directives are used to control an element or component's behavior in some way. A template directive could enable some compiler feature that makes your life easier (like using `class:list` instead of `class`). Or, a directive could tell the Astro compiler to do something special with that component (like hydrating with `client:load`).
@@ -141,6 +143,17 @@ Load and hydrate the component JavaScript once the component has entered the use
 <HeavyImageCarousel client:visible />
 ```
 
+#### `client:visible={{rootMargin}}`
+<p><Since v="4.1.0" /></p>
+
+Optionally, a value for `rootMargin` can be passed to the underlying `IntersectionObserver`. When `rootMargin` is specified, the component JavaScript will hydrate when a specified margin (in pixels) around the component enters the viewport, rather than the component itself.
+
+```astro
+<HeavyImageCarousel client:visible={{rootMargin: "200px"}} />
+```
+
+Specifying a `rootMargin` value can reduce layout shifts (CLS), allow more time for a component to hydrate on slower internet connections, and make components interactive sooner, enhancing the stability and responsiveness of the page.
+
 ### `client:media`
 
 - **Priority:** Low
@@ -250,7 +263,7 @@ const message = "Astro is awesome!";
 ```
 
 :::caution
-Using `define:vars` on a `<script>` tag implies the [`is:inline` directive](#isinline), which means your scripts won't be bundled and will be inlined directly into the HTML. 
+Using `define:vars` on a `<script>` tag implies the [`is:inline` directive](#isinline), which means your scripts won't be bundled and will be inlined directly into the HTML.
 
 This is because when Astro bundles a script, it includes and runs the script once even if you include the component containing the script multiple times on one page. `define:vars` requires a script to rerun with each set of values, so Astro creates an inline script instead.