Thinking States

Installation#

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/thinking-states.json

Manual

1. Install the dependencies

   npmpnpmbunyarn

   npm install clsx motion tailwind-merge

2. Add the shared helpers

   Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

   lib/motion.ts

   import type { Transition, Variants } from "motion/react";
   
   /** Durations in seconds. */
   export const duration = {
     instant: 0.1,
     quick: 0.18,
     base: 0.28,
     slow: 0.45,
   } as const;
   
   /** Cubic-bezier curves. */
   export const ease = {
     /** Entering, UI response. */
     out: [0.22, 1, 0.36, 1],
     /** Moving on screen. */
     inOut: [0.65, 0, 0.35, 1],
     /** Sheets and the mobile menu. */
     drawer: [0.32, 0.72, 0, 1],
   } as const;
   
   /** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
   export const ui = {
     press: { scale: 0.96, duration: 0.12 },
     icon: { type: "spring", duration: 0.3, bounce: 0 },
     popover: { duration: 0.18, ease: ease.out },
     modal: { duration: 0.24, ease: ease.out },
     exitFactor: 0.6,
   } as const;
   
   /** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
   export const kinetic = {
     heroLetter: { duration: 0.6, ease: ease.out },
     /** Delay per letter, eased so the wave slows toward the end. */
     heroStep: 0.035,
     reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
     /** Two afterimages: lag in seconds and opacity of each. */
     ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
   } as const;
   
   /** Spring presets. */
   export const spring = {
     snappy: { type: "spring", stiffness: 500, damping: 30 },
     smooth: { type: "spring", stiffness: 260, damping: 26 },
     bouncy: { type: "spring", stiffness: 300, damping: 15 },
   } as const satisfies Record<string, Transition>;
   
   /** Stagger between siblings, in seconds (0.03–0.06). */
   export const stagger = {
     tight: 0.03,
     base: 0.045,
     loose: 0.06,
   } as const;
   
   /** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
   export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.base } },
         exit: { opacity: 0, transition: { duration: duration.quick } },
       };
     }
     return {
       hidden: { opacity: 0, y, filter: "blur(4px)" },
       visible: {
         opacity: 1,
         y: 0,
         filter: "blur(0px)",
         transition: { duration: duration.base, ease: ease.out },
       },
       exit: {
         opacity: 0,
         y: -y / 2,
         filter: "blur(4px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
     };
   }
   
   /** Scale 0.96 → 1 for popovers, menus and dialogs. */
   export function overlayVariants(reduceMotion?: boolean | null): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.quick } },
         exit: { opacity: 0, transition: { duration: duration.instant } },
       };
     }
     return {
       hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
       visible: {
         opacity: 1,
         scale: 1,
         filter: "blur(0px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
       exit: {
         opacity: 0,
         scale: 0.96,
         filter: "blur(2px)",
         transition: { duration: duration.instant + 0.02, ease: ease.out },
       },
     };
   }
   
   /** Parent variants that stagger their children in. */
   export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
     return {
       hidden: {},
       visible: { transition: { staggerChildren: gap, delayChildren } },
       exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
     };
   }

   Show all 113 lines

3. Copy the source

   components/ui/thinking-states/thinking-states.tsx

   "use client";
   
   import { useEffect, useState, type ComponentProps } from "react";
   import { AnimatePresence, motion, useReducedMotion } from "motion/react";
   import { cn } from "@/lib/utils";
   import { duration, ease } from "@/lib/motion";
   import { ShimmerText } from "@/components/ui/shimmer-text/shimmer-text";
   import { SpinnerCheck } from "@/components/ui/spinner-check/spinner-check";
   
   export interface ThinkingStatesProps
     extends Omit<ComponentProps<"div">, "children" | "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"> {
     /** Stage messages, in order, e.g. ["Reading the question", "Searching the docs"]. */
     stages: string[];
     /** Controlled stage index. Without it, stages advance on their own every `interval` ms and stop on the last. */
     index?: number;
     /** Milliseconds per stage when advancing on its own. @default 2000 */
     interval?: number;
     /** Finished: shows a check and `doneLabel`. @default false */
     done?: boolean;
     /** Text shown once done. @default "Done" */
     doneLabel?: string;
     /** Show elapsed seconds after the message. @default true */
     showElapsed?: boolean;
   }
   
   export function ThinkingStates({
     stages,
     index,
     interval = 2000,
     done = false,
     doneLabel = "Done",
     showElapsed = true,
     className,
     ...props
   }: ThinkingStatesProps) {
     const reduceMotion = useReducedMotion();
     const [internal, setInternal] = useState(0);
     const [seconds, setSeconds] = useState(0);
     const current = Math.min(index ?? internal, Math.max(stages.length - 1, 0));
     const message = done ? doneLabel : (stages[current] ?? "");
   
     useEffect(() => {
       if (index !== undefined || done || internal >= stages.length - 1) return;
       const timer = window.setTimeout(() => setInternal((i) => i + 1), interval);
       return () => window.clearTimeout(timer);
     }, [index, done, internal, stages.length, interval]);
   
     useEffect(() => {
       if (done) return;
       const timer = window.setInterval(() => setSeconds((s) => s + 1), 1000);
       return () => window.clearInterval(timer);
     }, [done]);
   
     return (
       <div role="status" className={cn("flex items-center gap-2.5 text-sm", className)} {...props}>
         <SpinnerCheck aria-hidden="true" role="presentation" status={done ? "success" : "loading"} size={16} className="text-muted-foreground" />
         <span className="sr-only">{message}</span>
         <span aria-hidden="true" className="relative grid min-w-0 *:[grid-area:1/1]">
           <AnimatePresence initial={false} mode="popLayout">
             <motion.span
               key={message}
               initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(4px)" }}
               animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
               exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8, filter: "blur(4px)" }}
               transition={{ duration: duration.base, ease: ease.out }}
               className="truncate"
             >
               {done ? <span className="text-foreground">{message}</span> : <ShimmerText>{message}</ShimmerText>}
             </motion.span>
           </AnimatePresence>
         </span>
         {showElapsed ? (
           <span aria-hidden="true" className="shrink-0 text-xs text-muted-foreground tabular-nums">
             {seconds}s
           </span>
         ) : null}
       </div>
     );
   }

   Show all 79 lines

Usage#

import { ThinkingStates } from "@/components/ui/thinking-states/thinking-states";

export function Status({ done }: { done: boolean }) {
  return <ThinkingStates stages={["Reading your question", "Searching the docs", "Writing the answer"]} done={done} />;
}

API reference#

Accessibility#

• A polite status region: each new stage and the final message are announced once.
• The shimmer and spinner are decorative; with reduced motion enabled, stages crossfade and the shimmer becomes a gentle fade.