feat(ai): refresh landing ecosystem animation

Author: AlemTuzlak

src/components/AILibraryHero.tsx

@@ -33,15 +33,16 @@ export function AILibraryHeroBox({
   opacity = 0.9,
   strokeWidth = 3,
   fill = 'url(#glassGradientLarge)',
+  showLogo = true,
   logoSize = 40,
+  centerText = false,
 }: AILibraryHeroBoxProps) {
-  // For centerText, align logo and text higher up; otherwise use normal center
-  const textX = 25 + logoSize
-  const textY = 15 + fontSize
+  const textX = centerText ? width / 2 : 25 + logoSize
+  const textY = height / 2 + fontSize * 0.35
 
   // Position logo to the right of the text, centered vertically
   const logoX = 15
-  const logoY = 15
+  const logoY = height / 2 - logoSize / 2
 
   return (
     <g transform={`translate(${x}, ${y})`}>
@@ -63,21 +64,23 @@ export function AILibraryHeroBox({
           fontFamily="Helvetica"
           fontSize={fontSize}
           fontWeight={fontWeight}
-          textAnchor="start"
+          textAnchor={centerText ? 'middle' : 'start'}
           opacity={opacity * 1.05}
         >
           {label}
         </text>
       )}
-      <image
-        href="/images/logos/logo-color-100.png"
-        x={logoX}
-        y={logoY}
-        width={logoSize}
-        height={logoSize}
-        opacity={opacity}
-        preserveAspectRatio="xMidYMid meet"
-      />
+      {showLogo ? (
+        <image
+          href="/images/logos/logo-color-100.png"
+          x={logoX}
+          y={logoY}
+          width={logoSize}
+          height={logoSize}
+          opacity={opacity}
+          preserveAspectRatio="xMidYMid meet"
+        />
+      ) : null}
     </g>
   )
 }

src/components/AILibraryHeroBox.tsx

@@ -6,6 +6,10 @@ import { useCopyButton } from '~/components/CopyMarkdownButton'
 import { useToast } from '~/components/ToastProvider'
 import { Check, Copy } from 'lucide-react'
 import { Card } from '~/components/Card'
+import {
+  getFrameworkDocsHash,
+  getFrameworkDocsPath,
+} from '~/libraries/frameworkSupport'
 
 export function FrameworkCard({
   framework,
@@ -35,16 +39,8 @@ export function FrameworkCard({
     )
   })
 
-  const hasCustomInstallPath = !!library.installPath
-  const installationPath = library.installPath
-    ? library.installPath
-        .replace('$framework', framework.value)
-        .replace('$libraryId', libraryId)
-    : 'installation'
-
-  // Add framework hash fragment only for default installation pages (when installPath is not defined)
-  // Link component adds the # automatically, so we just pass the value without #
-  const installationHash = !hasCustomInstallPath ? framework.value : undefined
+  const installationPath = getFrameworkDocsPath(framework.value, library)
+  const installationHash = getFrameworkDocsHash(framework.value, library)
 
   return (
     <Card

src/components/FrameworkCard.tsx

@@ -54,68 +54,68 @@ export default function AiLanding() {
             A complete AI ecosystem, not a vendor platform
           </h3>
           <p className="mt-6 text-xl leading-7 opacity-75 max-w-[90vw] sm:max-w-[500px] lg:max-w-[800px]">
-            TanStack AI is a pure open-source ecosystem of libraries and
-            standards, not a service. We connect you directly to the AI
-            providers you choose, with no middleman, no service fees, and no
-            vendor lock-in. Just powerful, type-safe tools built by and for the
-            community.
+            TanStack AI is open-source libraries and AG-UI-compatible standards,
+            not a hosted gateway. Bring your client framework, your server
+            runtime, and the AI providers you trust. There is no middleman, no
+            service fee, and no vendor lock-in, just composable tools built for
+            teams that want to own their AI stack.
           </p>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mx-auto max-w-[90vw] sm:max-w-[600px] lg:max-w-[1200px]">
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Server Agnostic</h4>
+            <h4 className="text-xl font-bold mb-3">Client Agnostic</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Use any backend server you want. Well-documented protocol with
-              libraries for TypeScript, PHP, Python, and more.
+              Use the headless client directly or framework bindings for React,
+              Vue, Solid, Svelte, and Preact.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Client Agnostic</h4>
+            <h4 className="text-xl font-bold mb-3">AG-UI Native</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Vanilla client library (@tanstack/ai-client) or framework
-              integrations for React, Solid, and more coming soon.
+              Client-to-server requests and server-to-client streams use AG-UI,
+              so compatible clients and servers can interoperate.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Service Agnostic</h4>
+            <h4 className="text-xl font-bold mb-3">Server Agnostic</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Connect to OpenAI, Anthropic, Gemini, and Ollama out of the box.
-              Create custom adapters for any provider.
+              Build endpoints in TypeScript, Python, or PHP with portable
+              helpers for AG-UI events, SSE, and provider message formats.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Full Tooling Support</h4>
+            <h4 className="text-xl font-bold mb-3">Provider Agnostic</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Complete support for client and server tools, including tool
-              approvals and execution control.
+              Official adapters cover OpenRouter, OpenAI, Anthropic, Gemini,
+              Ollama, Groq, Grok/xAI, ElevenLabs, and fal.ai.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Thinking & Reasoning</h4>
+            <h4 className="text-xl font-bold mb-3">Typed Tools</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Full support for thinking and reasoning models with
-              thinking/reasoning tokens streamed to clients.
+              Define isomorphic tools once, run them on the client or server,
+              gate them with approvals, and use provider-native tools safely.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Fully Type-Safe</h4>
+            <h4 className="text-xl font-bold mb-3">Model-Aware Types</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Complete type safety across providers, models, and model options
-              from end to end.
+              Provider and model choices narrow options, tools, modalities, and
+              structured outputs at compile time.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Next-Gen DevTools</h4>
+            <h4 className="text-xl font-bold mb-3">Media Generation</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              Amazing developer tools that show you everything happening with
-              your AI connections in real-time.
+              Use stable APIs for image, video, speech, transcription, realtime
+              voice, summarization, and generation hooks.
             </p>
           </div>
           <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Pure Open Source</h4>
+            <h4 className="text-xl font-bold mb-3">Observable Runtime</h4>
             <p className="opacity-90 text-sm leading-relaxed">
-              No hidden service, no fees, no upsells. Community-supported
-              software connecting you directly to your chosen providers.
+              Devtools, debug logging, middleware, and observability hooks show
+              what happened across your AI pipeline.
             </p>
           </div>
         </div>

src/components/landing/AiLanding.tsx

@@ -6,20 +6,20 @@ import {
   SERVICE_GUTTER,
 } from '~/stores/aiLibraryHeroAnimation'
 
-const FRAMEWORKS_COUNT = 4
-const SERVICES_COUNT = 4
-const SERVERS_COUNT = 4
+const FRAMEWORKS_COUNT = 6
+const SERVICES_COUNT = 9
+const SERVERS_COUNT = 3
 
 const MESSAGES = [
   {
     user: 'What makes TanStack AI different?',
     assistant:
-      'TanStack AI is completely agnostic - server agnostic, client agnostic, and service agnostic. Use any backend (TypeScript, PHP, Python), any client (vanilla JS, React, Solid), and any AI service (OpenAI, Anthropic, Gemini, Ollama). We provide the libraries and standards, you choose your stack.',
+      'TanStack AI is completely agnostic - client agnostic, protocol agnostic, server agnostic, and provider agnostic. Use Vanilla, React, Vue, Solid, Svelte, or Preact clients, speak AG-UI on the wire, run TypeScript, Python, or PHP servers, and connect to the providers you choose.',
   },
   {
     user: 'Do you support tools?',
     assistant:
-      'Yes! We have full support for both client and server tooling, including tool approvals. You can execute tools on either side with complete type safety and control.',
+      'Yes. Define tools once, run them on the client or server, require approvals when needed, and use provider-native tools like web search or code execution when the selected model supports them.',
   },
   {
     user: 'What about thinking models?',
@@ -34,12 +34,12 @@ const MESSAGES = [
   {
     user: 'What about developer experience?',
     assistant:
-      'We have next-generation dev tools that show you everything happening with your AI connection in real-time. Debug, inspect, and optimize with complete visibility.',
+      'TanStack AI includes devtools, debug logging, middleware, observability hooks, and AG-UI event streams so you can inspect what happened instead of guessing.',
   },
   {
     user: 'Is this a service I have to pay for?',
     assistant:
-      "No! TanStack AI is pure open source software. We don't have a service to promote or charge for. This is an ecosystem of libraries and standards connecting you with the services you choose - completely community supported.",
+      'No. TanStack AI is open-source software and standards, not a hosted gateway. There is no middleman, no service fee, and no provider lock-in.',
   },
 ]
 
@@ -151,66 +151,65 @@ export function useAILibraryHeroAnimation() {
               : TIMING.rotationSlowBase +
                 (i - (total - 4)) * TIMING.rotationSlowIncrement,
           onComplete: () => {
-            // Phase: Select service
-            store.setPhase(AnimationPhase.SELECTING_SERVICE)
-            const currentService =
-              useAILibraryHeroAnimationStore.getState().selectedService
-            const targetService = getRandomIndex(
-              SERVICES_COUNT,
-              currentService ?? undefined,
-            )
-            const serviceRotations = getRandomRotationCount(6, 3)
-
-            let currentServiceIndex = Math.floor(Math.random() * SERVICES_COUNT)
-
-            const rotateService = (iteration: number) => {
-              if (iteration < serviceRotations - 1) {
-                store.setRotatingService(currentServiceIndex)
-                currentServiceIndex = (currentServiceIndex + 1) % SERVICES_COUNT
-                const delay =
-                  iteration < serviceRotations - 3
-                    ? TIMING.serviceRotationFast
-                    : TIMING.serviceRotationSlowBase +
-                      (iteration - (serviceRotations - 3)) *
-                        TIMING.serviceRotationSlowIncrement
-                addTimeout(() => rotateService(iteration + 1), delay)
-              } else {
-                store.setRotatingService(targetService)
-                addTimeout(() => {
-                  store.setSelectedService(targetService)
-                  store.setRotatingService(null)
-                  const targetX = -(
-                    SERVICE_WIDTH / 2 +
-                    SERVICE_GUTTER / 2 +
-                    targetService * (SERVICE_WIDTH + SERVICE_GUTTER)
-                  )
-                  store.setServiceOffset(targetX)
-
-                  addTimeout(() => {
-                    // Phase: Select server
-                    store.setPhase(AnimationPhase.SELECTING_SERVER)
-                    const targetServer = getRandomIndex(SERVERS_COUNT)
-                    const serverRotations = getRandomRotationCount(8, 4)
-
-                    runRotation({
-                      count: serverRotations,
-                      setRotating: store.setRotatingServer,
-                      setSelected: store.setSelectedServer,
-                      targetIndex: targetServer,
-                      itemCount: SERVERS_COUNT,
-                      getDelay: (i, total) =>
-                        i < total - 4
-                          ? TIMING.rotationFast
-                          : TIMING.rotationSlowBase +
-                            (i - (total - 4)) * TIMING.rotationSlowIncrement,
-                      onComplete,
-                    })
-                  }, TIMING.afterServiceSelection)
-                }, TIMING.afterSelection)
-              }
-            }
-
-            rotateService(0)
+            // Phase: Select server language
+            store.setPhase(AnimationPhase.SELECTING_SERVER)
+            const targetServer = getRandomIndex(SERVERS_COUNT)
+            const serverRotations = getRandomRotationCount(8, 4)
+
+            runRotation({
+              count: serverRotations,
+              setRotating: store.setRotatingServer,
+              setSelected: store.setSelectedServer,
+              targetIndex: targetServer,
+              itemCount: SERVERS_COUNT,
+              getDelay: (i, total) =>
+                i < total - 4
+                  ? TIMING.rotationFast
+                  : TIMING.rotationSlowBase +
+                    (i - (total - 4)) * TIMING.rotationSlowIncrement,
+              onComplete: () => {
+                // Phase: Select provider
+                store.setPhase(AnimationPhase.SELECTING_SERVICE)
+                const currentService =
+                  useAILibraryHeroAnimationStore.getState().selectedService
+                const targetService = getRandomIndex(
+                  SERVICES_COUNT,
+                  currentService ?? undefined,
+                )
+                const serviceRotations = getRandomRotationCount(8, 4)
+
+                let currentServiceIndex = Math.floor(
+                  Math.random() * SERVICES_COUNT,
+                )
+
+                const rotateService = (iteration: number) => {
+                  if (iteration < serviceRotations - 1) {
+                    store.setRotatingService(currentServiceIndex)
+                    currentServiceIndex =
+                      (currentServiceIndex + 1) % SERVICES_COUNT
+                    const delay =
+                      iteration < serviceRotations - 4
+                        ? TIMING.serviceRotationFast
+                        : TIMING.serviceRotationSlowBase +
+                          (iteration - (serviceRotations - 4)) *
+                            TIMING.serviceRotationSlowIncrement
+                    addTimeout(() => rotateService(iteration + 1), delay)
+                  } else {
+                    store.setRotatingService(targetService)
+                    addTimeout(() => {
+                      store.setSelectedService(targetService)
+                      store.setRotatingService(null)
+                      store.setServiceOffset(
+                        -(targetService * (SERVICE_WIDTH + SERVICE_GUTTER)),
+                      )
+                      addTimeout(onComplete, TIMING.afterServiceSelection)
+                    }, TIMING.afterSelection)
+                  }
+                }
+
+                rotateService(0)
+              },
+            })
           },
         })
       }, TIMING.phaseTransition)

src/hooks/useAILibraryHeroAnimation.ts

@@ -15,35 +15,34 @@ export const aiProject = {
   defaultDocs: 'getting-started/overview',
   featureHighlights: [
     {
-      title: 'Multi-Provider Support',
+      title: 'Provider Agnostic',
       icon: <Plug className={twMerge(textStyles)} />,
       description: (
         <div>
-          Support for OpenAI, Anthropic, Ollama, and Google Gemini. Switch
-          providers at runtime without code changes. No vendor lock-in, just
-          clean TypeScript.
+          Official adapters for OpenRouter, OpenAI, Anthropic, Gemini, Ollama,
+          Groq, Grok/xAI, ElevenLabs, and fal.ai. Import only the adapters your
+          app needs.
         </div>
       ),
     },
     {
-      title: 'Unified API',
+      title: 'AG-UI Native Clients',
       icon: <Zap className={twMerge(textStyles)} />,
       description: (
         <div>
-          Same interface across all providers. Standalone functions with
-          automatic type inference from adapters. Framework-agnostic client for
-          any JavaScript environment.
+          A headless client plus React, Vue, Solid, Svelte, and Preact bindings
+          all speak the same AG-UI request and event protocol.
         </div>
       ),
     },
     {
-      title: 'Tool/Function Calling',
+      title: 'Typed Tools & Media',
       icon: <CogsIcon className={twMerge(textStyles)} />,
       description: (
         <div>
-          Automatic execution loop with no manual tool management needed.
-          Type-safe tool definitions with structured outputs and streaming
-          support.
+          Type-safe client/server tools, provider-native tools, structured
+          output, reasoning streams, image, speech, transcription, realtime
+          voice, and video generation.
         </div>
       ),
     },