pacer: update pacer marketing (#424)

KevinVandy · web-flow · commit 044f4abde99f · 2025-07-10T08:12:46.000-05:00
* add vue-pacer adapter and update pacer marketing

* update pacer copy

* remove vue from pacer for now

* format
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -41,7 +41,7 @@ const makeHeading =
       <CustomHeading
         Comp={type}
         {...props}
-        className={`${props.className ?? ''} inline-block`}
+        className={`${props.className ?? ''} block`}
       />
     )
 
diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx
@@ -1,8 +1,10 @@
 import { VscPreview, VscWand } from 'react-icons/vsc'
 import { Library } from '.'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
 import { BiBookAlt } from 'react-icons/bi'
+import { GiF1Car } from 'react-icons/gi'
 import { twMerge } from 'tailwind-merge'
+import { FaTimeline } from 'react-icons/fa6'
 
 const repo = 'tanstack/pacer'
 
@@ -13,8 +15,8 @@ export const pacerProject = {
   name: 'TanStack Pacer',
   cardStyles: `shadow-xl shadow-lime-700/20 dark:shadow-lg dark:shadow-lime-500/20 text-lime-500 dark:text-lime-400 border-2 border-transparent hover:border-current`,
   to: '/pacer',
-  tagline: `Framework agnostic debouncing, throttling, and queueing utilities`,
-  description: `Set the pace of interactions in your applications. Limit the rate at which functions can fire, or intelligently queue long-running tasks with Concurrency Control.`,
+  tagline: `Framework agnostic debouncing, throttling, rate limiting, queuing, and batching utilities`,
+  description: `Optimize your application's performance with TanStack Pacer's core primitives: Debouncing, Throttling, Rate Limiting, Queuing, and Batching.`,
   ogImage: 'https://github.com/tanstack/pacer/raw/main/media/repo-header.png',
   badge: 'alpha',
   bgStyle: `bg-lime-700`,
@@ -48,7 +50,7 @@ export const pacerProject = {
   ],
   featureHighlights: [
     {
-      title: 'Framework Agnostic & Type-Safe',
+      title: 'Flexible & Type-Safe',
       icon: <VscWand className={twMerge(textStyles)} />,
       description: (
         <div>
@@ -64,35 +66,35 @@ export const pacerProject = {
       ),
     },
     {
-      title: 'Flexible Rate Limiting Controls',
-      icon: <FaBolt className={twMerge(textStyles)} />,
+      title: 'Optimize Performance',
+      icon: <GiF1Car className={twMerge(textStyles)} />,
       description: (
         <div>
-          Take control of your application's timing with powerful utilities for{' '}
+          Enhance your application's efficiency with flexible utilities for{' '}
           <span className={twMerge('font-semibold', textStyles)}>
-            rate limiting, throttling, and debouncing
+            debouncing, throttling, rate limiting, queuing, and batching
           </span>
-          . Leverage built-in cleanup and cancellation capabilities to help you
-          manage execution timing with precision while preventing memory leaks.
-          Flexible configuration options let you fine-tune the behavior to match
-          your needs.
+          . Reduce unnecessary operations and resource consumption while
+          maintaining smooth user experiences. Built-in cleanup and cancellation
+          capabilities help prevent memory leaks and optimize resource usage.
+          Fine-tune behavior with flexible configuration options to match your
+          specific performance needs.
         </div>
       ),
     },
     {
-      title: 'Async/Sync Queue Management',
-      icon: <FaCogs className={twMerge(textStyles)} />,
+      title: 'Async or Sync',
+      icon: <FaTimeline className={twMerge(textStyles)} />,
       description: (
         <div>
-          Handle complex asynchronous workflows with intelligent queuing and
-          concurrency control.{' '}
+          Choose between async or sync execution for each utility based on your
+          needs.{' '}
           <span className={twMerge('font-semibold', textStyles)}>
-            Manage long-running tasks with FIFO/LIFO ordering, priority queuing,
-            and parallel execution
+            Track success and error states with comprehensive event handling and
+            status reporting
           </span>
-          . Built-in pause, resume and cancel capabilities give you complete
-          control over your queue's lifecycle. Perfect for managing API calls,
-          animations, and other sequential operations.
+          . Perfect for handling both simple synchronous operations and complex
+          task pooling workflows with or without concurrency control.
         </div>
       ),
     },
diff --git a/src/routes/_libraries/pacer.$version.index.tsx b/src/routes/_libraries/pacer.$version.index.tsx
@@ -1,9 +1,6 @@
 import { CgSpinner } from 'react-icons/cg'
-import * as React from 'react'
 import { Link, getRouteApi } from '@tanstack/react-router'
-import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
-import { TbHeartHandshake } from 'react-icons/tb'
 import { FaCheckCircle } from 'react-icons/fa'
 import SponsorPack from '~/components/SponsorPack'
 import { pacerProject } from '~/libraries/pacer'
@@ -42,31 +39,62 @@ export default function PacerVersionIndex() {
             <span>TanStack</span>
             <span className={twMerge(gradientText)}>Pacer</span>
           </h1>
+          <div
+            className={twMerge(
+              'text-sm',
+              'md:text-base font-black',
+              'lg:text-lg align-super text-white animate-bounce uppercase',
+              'dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md',
+              'leading-none whitespace-nowrap'
+            )}
+          >
+            STATUS: ALPHA
+          </div>
           <h2
             className="font-bold text-2xl max-w-md
             md:text-3xl
             lg:text-5xl lg:max-w-2xl"
           >
             <span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
-              Framework agnostic
+              Flexible
             </span>{' '}
-            type-safe rate-limiting and queueing utilities
+            type-safe throttling and queuing utilities
           </h2>
           <p
             className="text opacity-90 max-w-[500px]
             lg:text-xl lg:max-w-[800px]"
           >
-            Take control of your application's timing with TanStack Pacer's{' '}
-            <strong>rate limiting, throttling, and debouncing utilities</strong>
-            . Manage complex async workflows using{' '}
-            <strong>intelligent queuing and concurrency controls</strong> while
-            maintaining full control with built-in pause, resume, and cancel
-            capabilities.
+            Optimize your application's performance with TanStack Pacer's core
+            primitives:{' '}
+            <strong>
+              Debouncing, Throttling, Rate Limiting, Queuing, and Batching
+            </strong>
+            .
+          </p>
+          <p
+            className="text opacity-90 max-w-[500px]
+            lg:text-xl lg:max-w-[800px]"
+          >
+            Choose from multiple layers of abstraction using high-level
+            pre-built hooks or low-level primitives that you can connect to your
+            own state management solutions of choice.
+          </p>
+          <p
+            className="text opacity-90 max-w-[500px]
+            lg:text-xl lg:max-w-[800px]"
+          >
+            TanStack Pacer is built on top of {/* @ts-ignore */}
+            <Link target="_blank" to="/store/latest" className="underline">
+              TanStack Store
+            </Link>{' '}
+            with reactive and subscribable state to make interacting with your
+            state management or persistence solution of choice a breeze, no
+            matter which framework you're using.
           </p>
           <Link
             to="/$libraryId/$version/docs"
             params={{ libraryId: library.id, version }}
-            className={`py-2 px-4 bg-stone-600 text-white rounded uppercase font-extrabold`}
+            className={`py-2 px-4 bg-lime-600 hover:bg-lime-700 text-white rounded uppercase font-extrabold transition-colors`}
           >
             Get Started
           </Link>
@@ -91,17 +119,21 @@ export default function PacerVersionIndex() {
               'Lightweight',
               'Tree-Shaking',
               'Type-Safe',
+              'Framework Agnostic',
+              'Reactive & Subscribable State',
               'Rate Limiting',
               'Throttling',
               'Debouncing',
-              'Queueing',
+              'Queuing',
+              'Batching',
+              'Flush Controls',
               'LIFO/FIFO/Dequeue Ordering',
               'Concurrency Control',
               'Queue Prioritization',
               'Pause/Resume Controls',
               'Cancellation',
               'Abort Controller Support',
-              'Promise Integration',
+              'Async/Sync Execution',
               'Multiple Layers of Abstraction',
             ].map((d, i) => {
               return (
@@ -172,52 +204,6 @@ export default function PacerVersionIndex() {
 
         <LandingPageGad />
 
-        {/* <div className="flex flex-col gap-4">
-          <div className="px-4 sm:px-6 lg:px-8  mx-auto container max-w-3xl sm:text-center">
-            <h3 className="text-3xl text-center leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-2">
-              Take it for a spin!
-            </h3>
-            <p className="my-4 text-xl leading-7 text-gray-600">
-              With just a few lines of code, you can start using powerful rate
-              limiting, throttling, debouncing, and queueing utilities.
-            </p>
-            <div className="flex flex-wrap gap-2 justify-center">
-              {(
-                [
-                  { label: 'React', value: 'react' },
-                  // More adapters coming soon
-                  // { label: 'Solid', value: 'solid' },
-                  // { label: 'Svelte', value: 'svelte' },
-                  // { label: 'Vue', value: 'vue' },
-                  // { label: 'Vanilla', value: 'vanilla' },
-                ] as const
-              ).map((item) => (
-                <button
-                  key={item.value}
-                  className={`inline-block py-2 px-4 rounded text-white uppercase font-extrabold bg-stone-600`}
-                >
-                  {item.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-black">
-          <iframe
-            src={`https://stackblitz.com/github/${pacerProject.repo}/tree/main/examples/react/useDebouncer?embed=1&theme=dark&preset=node&file=src/main.tsx`}
-            title="tanstack/pacer: useDebouncer"
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-            className="shadow-2xl"
-            loading="lazy"
-            style={{
-              width: '100%',
-              height: '80vh',
-              border: '0',
-            }}
-          ></iframe>
-        </div> */}
-
         <div className="flex flex-col gap-4 items-center">
           <div className="font-extrabold text-xl lg:text-2xl">
             Wow, you've come a long way!

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ const makeHeading =`
`41`	`41`	`<CustomHeading`
`42`	`42`	`Comp={type}`
`43`	`43`	`{...props}`
`44`		- className={`${props.className ?? ''} inline-block`}
	`44`	+ className={`${props.className ?? ''} block`}
`45`	`45`	`/>`
`46`	`46`	`)`
`47`	`47`