From 9b0cdd4dea5a46a582348b357f8152b56f27a952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20SAILLANT?=
 <108685187+electron-rare@users.noreply.github.com>
Date: Sun, 29 Mar 2026 21:58:04 +0000
Subject: [PATCH] feat: add WebGL atom background to preview Hero section

- AtomGlitch component integrated as Hero background (25% opacity)
- Respects prefers-reduced-motion
- Preview page now matches post-launch index.astro layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/preview.astro | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/pages/preview.astro b/src/pages/preview.astro
index 1639b04..a68e3d7 100644
--- a/src/pages/preview.astro
+++ b/src/pages/preview.astro
@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
+import AtomGlitch from '@/components/AtomGlitch';
 import '@/styles/global.css';
 import '@/styles/home-workbench.css';
 import SiteHeader from '@/components/SiteHeader.astro';
@@ -27,8 +28,11 @@ const headerItems = [
   <SiteHeader brandHref="#top" items={headerItems} quickHref="#contact" />
 
   <main id="main-content" class="site-shell studio-structure pb-12 pt-3">
-    <section class="structure-grid structure-grid--hero" data-reveal>
-      <div class="structure-cell structure-cell--hero">
+    <section class="structure-grid structure-grid--hero hero-webgl-wrapper" data-reveal>
+      <div class="hero-webgl-bg">
+        <AtomGlitch client:visible />
+      </div>
+      <div class="structure-cell structure-cell--hero hero-webgl-content">
         <Hero />
       </div>
     </section>
@@ -143,3 +147,24 @@ const headerItems = [
     </div>
   </footer>
 </BaseLayout>
+
+<style>
+  .hero-webgl-wrapper {
+    position: relative;
+    overflow: hidden;
+  }
+  .hero-webgl-bg {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    opacity: 0.25;
+    pointer-events: none;
+  }
+  .hero-webgl-content {
+    position: relative;
+    z-index: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hero-webgl-bg { display: none; }
+  }
+</style>