feat: M3 design enhancements, SEO improvements, JS bug fixes

Website improvements inspired by m3.material.io:
- Fix mouse tracking for CSS ripple effect (--mouse-x/--mouse-y)
- Fix visibility change handler (pause gallery on tab hide)
- Add keyboard accessibility to platform badges
- M3 chip-style navigation for tabs
- Gradient text and glass-morphism fallbacks
- M3 focus-visible states for all interactive elements
- Animated hero gradient background
- Enhanced CTA buttons with M3 filled/tonal variants
- Subtle dot pattern background for content area
- Preload critical resources (fonts, scripts)
- Add og:image dimensions and alt text
- DNS prefetch for Google Tag Manager
- Enhanced llms.txt with all 26+ node types and MCP setup
- PWA manifest: add categories and IARC rating

https://claude.ai/code/session_013iRhSyfUopvUfTTWzfarg7

Author: claude

assets/javascripts/m3-interactions.js

@@ -115,6 +115,18 @@ document.addEventListener('DOMContentLoaded', () => {
     card.addEventListener('mouseleave', handleTiltLeave, { passive: true });
   });
 
+  // ---------------------------------------------------------------------------
+  // 4b. Mouse tracking for CSS ripple effect (--mouse-x, --mouse-y)
+  // ---------------------------------------------------------------------------
+  const RIPPLE_SELECTORS = '.grid.cards > ul > li, .platform-card, .device-section--clickable, .industry-card';
+  document.querySelectorAll(RIPPLE_SELECTORS).forEach((el) => {
+    el.addEventListener('mousemove', (e) => {
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
+      el.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
+    }, { passive: true });
+  });
+
   // ---------------------------------------------------------------------------
   // 5. Smooth scroll for anchor links
   // ---------------------------------------------------------------------------
@@ -165,6 +177,14 @@ document.addEventListener('DOMContentLoaded', () => {
     gallery.addEventListener('touchend', () => {
       autoScrollId = requestAnimationFrame(autoScroll);
     }, { passive: true });
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        if (autoScrollId) { cancelAnimationFrame(autoScrollId); autoScrollId = null; }
+      } else {
+        if (!autoScrollId) { autoScrollId = requestAnimationFrame(autoScroll); }
+      }
+    }, { passive: true });
   }
 
   // ---------------------------------------------------------------------------
@@ -220,7 +240,9 @@ document.addEventListener('DOMContentLoaded', () => {
   // ---------------------------------------------------------------------------
   document.querySelectorAll('.platform-badge').forEach((badge) => {
     badge.style.cursor = 'pointer';
-    badge.addEventListener('click', () => {
+    if (!badge.hasAttribute('tabindex')) badge.setAttribute('tabindex', '0');
+    if (!badge.hasAttribute('role')) badge.setAttribute('role', 'button');
+    const activateBadge = () => {
       const label = badge.textContent.trim().toLowerCase();
       const sections = document.querySelectorAll('.device-section');
       for (const section of sections) {
@@ -234,15 +256,14 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       }
       if (sections.length) sections[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
+    };
+    badge.addEventListener('click', activateBadge);
+    badge.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        activateBadge();
+      }
     });
   });
 
-  // ---------------------------------------------------------------------------
-  // 10. Performance — cleanup on page hide
-  // ---------------------------------------------------------------------------
-  document.addEventListener('visibilitychange', () => {
-    if (document.hidden && gallery) {
-      // Pause animations when tab is hidden
-    }
-  }, { passive: true });
 });

index.html

@@ -18,6 +18,9 @@
         <meta property="og:description" content="Build stunning 3D scenes and augmented reality experiences with Compose. 26+ node types, physics, dynamic sky, fog, reflections. Powered by Google Filament.">
         <meta property="og:site_name" content="SceneView">
         <meta property="og:locale" content="en_US">
+        <meta property="og:image:width" content="1200">
+        <meta property="og:image:height" content="630">
+        <meta property="og:image:alt" content="SceneView - 3D & AR SDK for Android with Jetpack Compose">
 
         <!-- Twitter Card -->
         <meta name="twitter:card" content="summary_large_image">
@@ -77,6 +80,11 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Display:wght@400;500;600;700&display=swap">
 
+    <!-- Preload critical resources -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Google+Sans+Display:wght@400;500;600;700&display=swap" as="style">
+    <link rel="preload" href="assets/javascripts/m3-interactions.js" as="script">
+    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
+
     <!-- Structured Data for SEO -->
     <script type="application/ld+json">
     {

llms-full.txt

@@ -111,7 +111,7 @@ fun MyARScreen() {
 
 ---
 
-## All Node Types (22+)
+## All Node Types (26+)
 
 ### ModelNode — glTF/GLB Models
 ```kotlin
@@ -180,10 +180,38 @@ HitResultNode(xPx = screenCenterX, yPx = screenCenterY) { SphereNode(radius = 0.
 AugmentedImageNode(augmentedImage = image) { ModelNode(...) }
 AugmentedFaceNode(augmentedFace = face, meshMaterialInstance = faceMaterial)
 CloudAnchorNode(anchor = localAnchor, onHosted = { cloudId, state -> })
+GeospatialNode(latitude = 37.7749, longitude = -122.4194, altitude = 0.0)
+DepthNode(depthTexture = depthImage)
+InstantPlacementNode(xPx = centerX, yPx = centerY, approximateDistanceMeters = 2.0f)
+ArrowNode(from = Position(0f), to = Position(1f, 0f, 0f), materialInstance = mat)
 ```
 
 ---
 
+## MCP Server Installation
+
+Install the SceneView MCP server for AI-assisted development:
+
+```bash
+npx -y @sceneview/mcp
+```
+
+Add to your AI assistant's MCP configuration (Claude, Cursor, etc.):
+```json
+{
+  "mcpServers": {
+    "sceneview": {
+      "command": "npx",
+      "args": ["-y", "@sceneview/mcp"]
+    }
+  }
+}
+```
+
+Available MCP tools: `get_sample`, `list_samples`, `get_setup`, `validate_code`, `get_migration_guide`, `get_node_reference`, `get_platform_roadmap`, `get_best_practices`, `get_ar_setup`
+
+---
+
 ## Critical Threading Rules
 
 1. All Filament JNI calls MUST run on main thread
@@ -213,6 +241,11 @@ val chrome = materialLoader.createColorInstance(Color.White, metallic = 1f, roug
 | Learning curve | Low | High | Very High | Very High | Medium |
 | AI tooling (MCP) | Yes | No | No | No | No |
 | Open source | Apache 2.0 | Proprietary | Proprietary | Apache 2.0 | Apache 2.0 |
+| Node types | 26+ | N/A | N/A | Manual | ~10 |
+| Physics | Built-in | Built-in | Built-in | None | None |
+| glTF support | Native | Plugin | Plugin | Manual | Limited |
+| Active maintenance | Yes (2026) | Yes | Yes | Yes | Dormant |
+| Android-first | Yes | No | No | Yes | Yes |
 
 ---
 

llms.txt

@@ -79,7 +79,7 @@ ARScene(
 }
 ```
 
-## Available Node Types
+## Available Node Types (26+)
 
 | Node | Description |
 |------|-------------|
@@ -105,6 +105,33 @@ ARScene(
 | AugmentedImageNode | Real-world image detection |
 | AugmentedFaceNode | Face mesh tracking |
 | CloudAnchorNode | Persistent cross-device anchors |
+| GeospatialNode | ARCore Geospatial API anchors |
+| DepthNode | ARCore depth mesh rendering |
+| InstantPlacementNode | Instant AR placement without plane |
+| HitResultNode | AR hit-test result anchoring |
+| ArrowNode | Directional 3D arrows |
+
+## MCP Server Installation
+
+Install the SceneView MCP server for AI-assisted development with Claude, Cursor, or other AI coding assistants:
+
+```bash
+npx -y @sceneview/mcp
+```
+
+Or add to your AI assistant's MCP configuration:
+```json
+{
+  "mcpServers": {
+    "sceneview": {
+      "command": "npx",
+      "args": ["-y", "@sceneview/mcp"]
+    }
+  }
+}
+```
+
+Available MCP tools: get_sample, list_samples, get_setup, validate_code, get_migration_guide, get_node_reference, get_platform_roadmap, get_best_practices, get_ar_setup
 
 ## Use Cases
 
@@ -119,12 +146,16 @@ ARScene(
 
 ## Why SceneView over alternatives?
 
-| Feature | SceneView | Unity | Unreal | Raw Filament |
-|---------|-----------|-------|--------|-------------|
-| Compose-native | Yes | No | No | No |
-| APK size | ~5MB | ~50MB | ~100MB | ~3MB |
-| Learning curve | Low | High | Very High | Very High |
-| AR support | Built-in | Plugin | Plugin | None |
-| Open source | Apache 2.0 | Proprietary | Proprietary | Apache 2.0 |
-| Android-first | Yes | No | No | Yes |
-| AI-assisted | MCP server | No | No | No |
+| Feature | SceneView | Unity | Unreal | Raw Filament | Rajawali |
+|---------|-----------|-------|--------|-------------|----------|
+| Compose-native | Yes | No | No | No | No |
+| APK size | ~5MB | ~50MB | ~100MB | ~3MB | ~2MB |
+| Learning curve | Low | High | Very High | Very High | Medium |
+| AR support | Built-in | Plugin | Plugin | None | None |
+| Open source | Apache 2.0 | Proprietary | Proprietary | Apache 2.0 | Apache 2.0 |
+| Android-first | Yes | No | No | Yes | Yes |
+| AI-assisted (MCP) | Yes | No | No | No | No |
+| Node types | 26+ | N/A | N/A | Manual | ~10 |
+| Physics | Built-in | Built-in | Built-in | None | None |
+| glTF support | Native | Plugin | Plugin | Manual | Limited |
+| Active maintenance | Yes (2026) | Yes | Yes | Yes | Dormant |

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "SceneView — 3D & AR SDK for Android",
   "short_name": "SceneView",
-  "description": "The #1 open-source 3D & AR SDK for Android. Compose-native scenes powered by Google Filament and ARCore. 22+ node types, physics, AR, and AI-assisted development.",
+  "description": "The #1 open-source 3D & AR SDK for Android. Compose-native scenes powered by Google Filament and ARCore. 26+ node types, physics, AR, and AI-assisted development.",
   "start_url": "/",
   "scope": "/",
   "id": "/",
@@ -10,7 +10,8 @@
   "background_color": "#FEF7FF",
   "theme_color": "#6750A4",
   "orientation": "any",
-  "categories": ["developer tools", "education", "productivity", "utilities"],
+  "categories": ["developer-tools", "3d", "augmented-reality", "education", "productivity"],
+  "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7",
   "icons": [
     {
       "src": "/assets/images/favicon.png",