Thinking Wave Animations

This is the implementation of thinking wave animation purely in CSS that is used in almost all ai apps.

Live DemoCSS Animation

Your text here ....

Source Code

"use client";

export default function Shimmer({ text = "thinking ...", className = "" }) {
  return (
    <div className={`inline-block ${className} select-none`}>
      <div className="relative overflow-hidden">
        {/* Base text */}
        <span className="text-primary/30">{text}</span>

        {/* Shimmering overlay */}
        <div
          className="absolute bg-clip-text text-transparent bg-linear-to-r from-transparent via-black to-transparent z-10 top-0 left-0 right-0 bg-size-[50%_100%] bg-no-repeat"
          style={{
            animation: "wave 1s linear infinite",
          }}>
          <style jsx>{`
            @keyframes wave {
              0% {
                background-position: -150% 0;
              }
              100% {
                background-position: 200% 0;
              }
            }
          `}</style>
          {text}
        </div>
      </div>
    </div>
  );
}

Claude SpriteSprite Animation

Source Code

"use client";

export default function Claude() {
  return (
    <>
      <img
        src={"/claude.svg"}
        className="w-8 h-8 object-cover"
        alt="Claude thinking sprite sheet."
        style={{
          animation: "claude 2.5s steps(15, jump-none) infinite",
        }}
      />
      <style jsx>{`
        @keyframes claude {
          from {
            object-position: 0% 0%;
          }
          to {
            object-position: 0% 100%;
          }
        }
      `}</style>
    </>
  );
}