Add animated brand shader to hero + text-roll CTA

Adapts the Axion hero treatment to Vectorless while keeping our brand:

- components/HeroShader.tsx: WebGL background using
  @paper-design/shaders-react (v0.0.76). Swirl (soft blue-white light
  base) + GrainGradient (blue→pink color flow with built-in grain).
  Recolored to brand blue #1456f0 / pink #ea5ec1. Skips FlutedGlass
  (too "agency" for a dev tool, and absent in this version). The Axion
  spec's Swirl+ChromaFlow+FilmGrain maps to Swirl+GrainGradient here.

- Hero.tsx: layers the shader behind existing content (desktop/lg+
  only via `hidden lg:block`), keeps the CSS radial-gradient as the
  always-on fallback for mobile + prefers-reduced-motion. Content gets
  z-10 to sit above. Headline, document-card mockup, fonts, pink dot
  all unchanged.

- Primary CTA converted to the Axion text-roll hover: two stacked text
  copies that slide up 50% on group-hover (duration-500,
  cubic-bezier(0.25,0.1,0.25,1)), arrow in a white circle rotating -45°.

- HeroShader guards: prefers-reduced-motion disables it, mounts after
  hydration (no SSR/WebGL mismatch), readability mask fades the shader
  toward center.

- next.config.ts: added shader packages to transpilePackages.

Verified: tsc --noEmit clean; `next build` compiled successfully
(the build's only failure was ENOSPC disk space during static export,
unrelated to this change).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: hallelx2

apps/web/components/Hero.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
 import InstallTabs from './InstallTabs';
+import HeroShader from './HeroShader';
 import { useGsapEffect, useScopedRef, gsap } from '@/hooks/useGsap';
 
 export default function Hero() {
@@ -47,10 +49,19 @@ export default function Hero() {
       ref={ref}
       className="relative min-h-[100vh] pt-32 pb-24 px-6 md:px-12 overflow-hidden flex items-center"
     >
-      <div className="absolute inset-0 grid-paper [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)] pointer-events-none" />
+      {/* CSS gradient fallback — always present; the WebGL shader layers
+          on top of it on desktop, and is the only background on mobile /
+          reduced-motion. */}
       <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[1100px] h-[600px] bg-[radial-gradient(ellipse_at_center,rgba(20,86,240,0.10)_0%,rgba(234,94,193,0.05)_40%,transparent_70%)] blur-[40px] pointer-events-none" />
 
-      <div className="hero-canvas relative w-full max-w-[1240px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+      {/* Animated brand shader — desktop only (lg+), recolored blue→pink. */}
+      <div className="hidden lg:block">
+        <HeroShader />
+      </div>
+
+      <div className="absolute inset-0 grid-paper [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)] pointer-events-none" />
+
+      <div className="hero-canvas relative z-10 w-full max-w-[1240px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
         <div className="lg:col-span-7 text-left">
           <div className="hero-chip inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-border-light bg-white/70 backdrop-blur-sm mb-8 shadow-sm">
             <span className="relative flex h-2 w-2">
@@ -110,10 +121,19 @@ export default function Hero() {
           <div className="hero-cta flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-3">
             <Link
               href="/register"
-              className="group relative inline-flex items-center gap-2 bg-bg-dark text-white px-6 py-3.5 rounded-full text-[15px] font-medium hover:bg-black transition-colors"
+              className="group relative inline-flex items-center gap-3 bg-bg-dark text-white pl-6 pr-2 py-2 rounded-full text-[15px] font-medium hover:bg-black transition-colors"
             >
-              Start building free
-              <span className="inline-block transition-transform group-hover:translate-x-1">→</span>
+              {/* Text-roll: two stacked copies, the column slides up 50%
+                  on hover so the second copy rolls into view. */}
+              <span className="inline-flex overflow-hidden h-[24px]">
+                <span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
+                  <span className="flex h-[24px] items-center">Start building free</span>
+                  <span className="flex h-[24px] items-center">Start building free</span>
+                </span>
+              </span>
+              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white">
+                <ArrowRight className="h-4 w-4 text-bg-dark transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-rotate-45" />
+              </span>
             </Link>
             <Link
               href="https://github.com/hallelx2/vectorless"

apps/web/components/HeroShader.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Swirl, GrainGradient } from '@paper-design/shaders-react';
+
+/**
+ * Animated WebGL hero background — adapted from the Axion shader idea
+ * but recolored to Vectorless brand (blue #1456f0 → pink #ea5ec1) and
+ * kept deliberately subtle so the headline and document card stay
+ * readable.
+ *
+ * The Axion spec named Swirl + ChromaFlow + FilmGrain. In the installed
+ * @paper-design/shaders-react (v0.0.76) the equivalent is:
+ *   - Swirl          → soft light base (blue-white)
+ *   - GrainGradient  → brand color flow WITH built-in grain
+ *                      (covers both ChromaFlow's color momentum and
+ *                       FilmGrain's texture in one shader)
+ * We skip FlutedGlass entirely — its refraction reads too "agency"
+ * for a dev tool (and it isn't in this version anyway).
+ *
+ * Guards:
+ *   - Disabled under prefers-reduced-motion (accessibility + battery).
+ *   - Rendered inside the parent's `hidden lg:block` so mobile keeps
+ *     only the lightweight CSS gradient fallback.
+ *   - Mounts after hydration to avoid SSR/WebGL mismatch.
+ */
+export default function HeroShader() {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    if (mq.matches) return;
+    setEnabled(true);
+
+    const onChange = (e: MediaQueryListEvent) => setEnabled(!e.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
+  if (!enabled) return null;
+
+  const fill = { width: '100%', height: '100%' } as const;
+
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      {/* Base flowing light — soft blue/pink-tinted white swirl */}
+      <Swirl
+        className="absolute inset-0 h-full w-full"
+        colorBack="#ffffff"
+        colors={['#ffffff', '#eaf0ff', '#f6ecfb']}
+        bandCount={2}
+        twist={0.3}
+        center={0.2}
+        proportion={0.5}
+        softness={1}
+        speed={0.15}
+        style={fill}
+      />
+
+      {/* Brand color flow + grain — blue→pink wash on white */}
+      <GrainGradient
+        className="absolute inset-0 h-full w-full mix-blend-multiply opacity-70"
+        colorBack="#ffffff"
+        colors={['#1456f0', '#ea5ec1']}
+        shape="wave"
+        softness={1}
+        intensity={0.4}
+        noise={0.15}
+        speed={0.35}
+        style={fill}
+      />
+
+      {/* Readability mask: fade the shader toward center so the headline
+          and CTAs sit on calmer ground. */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_0%,rgba(255,255,255,0.4)_55%,rgba(255,255,255,0.72)_100%)]" />
+    </div>
+  );
+}

apps/web/next.config.ts

@@ -20,7 +20,7 @@ const nextConfig: NextConfig = {
     ],
   },
   // output: 'standalone', // Disabled: requires symlink permissions on Windows
-  transpilePackages: ['motion'],
+  transpilePackages: ['motion', '@paper-design/shaders-react', '@paper-design/shaders'],
   webpack: (config, {dev}) => {
     // HMR is disabled in AI Studio via DISABLE_HMR env var.
     // Do not modify—file watching is disabled to prevent flickering during agent edits.

apps/web/package.json

@@ -15,6 +15,7 @@
     "@hookform/resolvers": "^5.2.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@neondatabase/serverless": "^0.10.0",
+    "@paper-design/shaders-react": "^0.0.76",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",