diff --git a/apps/typegpu-docs/src/components/Videos.astro b/apps/typegpu-docs/src/components/Videos.astro
index 3acd452755..43bb9d47fe 100644
--- a/apps/typegpu-docs/src/components/Videos.astro
+++ b/apps/typegpu-docs/src/components/Videos.astro
@@ -57,6 +57,7 @@ const videos = [
           title="YouTube video player"
           class={video.iframeClassName ?? ''}
           frameborder="0"
+          credentialless
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           referrerpolicy="strict-origin-when-cross-origin"
           allowfullscreen
diff --git a/apps/typegpu-docs/src/components/landing-examples/HoverExampleIsland.tsx b/apps/typegpu-docs/src/components/landing-examples/HoverExampleIsland.tsx
index 07400ae88a..b34d2491e0 100644
--- a/apps/typegpu-docs/src/components/landing-examples/HoverExampleIsland.tsx
+++ b/apps/typegpu-docs/src/components/landing-examples/HoverExampleIsland.tsx
@@ -82,8 +82,8 @@ export default function HoverExampleIsland({
 
       <div
         ref={rootRef}
-        data-live={isHydrated && isGPUSupported}
-        className="backdrop-blur absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-out group-hover:data-[live=true]:opacity-100"
+        data-visible={isHydrated && isGPUSupported && isActive}
+        className="backdrop-blur absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-out data-[visible=true]:opacity-100"
       >
         <WebGPUErrorBoundary fallback={<></>}>
           {isHydrated && isGPUSupported && isActive ? liveComponent : null}
diff --git a/apps/typegpu-docs/src/env.d.ts b/apps/typegpu-docs/src/env.d.ts
index 17731596ff..2f37184d6a 100644
--- a/apps/typegpu-docs/src/env.d.ts
+++ b/apps/typegpu-docs/src/env.d.ts
@@ -1,3 +1,10 @@
 // oxlint-disable typescript/triple-slash-reference
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+namespace astroHTML.JSX {
+  interface IframeHTMLAttributes {
+    // This attribute exists
+    credentialless?: boolean | undefined;
+  }
+}
diff --git a/apps/typegpu-docs/src/pages/new/index.astro b/apps/typegpu-docs/src/pages/new/index.astro
index cd88d363e2..274a5ab3a1 100644
--- a/apps/typegpu-docs/src/pages/new/index.astro
+++ b/apps/typegpu-docs/src/pages/new/index.astro
@@ -23,14 +23,14 @@ import SecondaryButton from '../../components/SecondaryButton.astro';
   edgeAwareOverscroll
 >
   <div
-    class="flex flex-col items-center text-blue-950 transition-colors duration-300 dark:text-gray-100"
+    class="isolate flex flex-col items-center text-blue-950 transition-colors duration-300 dark:text-gray-100"
   >
     <main class="self-stretch">
       <div
         class="pointer-events-none absolute inset-x-0 top-0 box-border flex items-center justify-end overflow-hidden md:justify-center"
       >
         <div
-          class="flex translate-x-[50%] -translate-y-[25%] justify-end sm:translate-x-[40%] sm:-translate-y-[15%] md:w-full md:max-w-214 md:translate-x-[20%] md:translate-y-0 lg:max-w-[960px]"
+          class="-z-20 flex translate-x-[50%] -translate-y-[25%] justify-end sm:translate-x-[40%] sm:-translate-y-[15%] md:w-full md:max-w-214 md:translate-x-[20%] md:translate-y-0 lg:max-w-[960px]"
         >
           <HeroEffect client:only="react" />
         </div>