3 variants

Thinking Loader

Twinkling pixel loaders for the moment an AI agent is working, laid out as a grid, a diamond or a triangle.

Pixel grid

A 3x3 grid of pixels twinkling on independent cycles, paired with a shimmering label and an optional live timer.

Thinking

usage.tsx

import { ThinkingLoader } from "@/components/registry/thinking-loader";

export function AgentStatus() {
  return <ThinkingLoader showElapsed />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { type CSSProperties, useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type LoaderShape = "pixel" | "circle" | "diamond" | "triangle";
export type LoaderTone = "foreground" | "accent" | "violet" | "neon";

/** Cut with clip-path, not rotation, so a cell's own animation keeps its transform. */
export const SHAPE_STYLE: Record<LoaderShape, CSSProperties> = {
  pixel: { borderRadius: 1 },

130 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/thinking-loader

Pixel diamond

The same twinkle laid out as a diamond, thirteen pixels in rows of one, three, five, three, one.

Planning

usage.tsx

import { PixelDiamond } from "@/components/registry/pixel-diamond";

export function AgentStatus() {
  return <PixelDiamond label="Planning" showElapsed />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { useEffect, useRef } from "react";
import {
  LoaderLabel,
  type LoaderShape,
  type LoaderTone,
  SHAPE_STYLE,
  TONE_CLASS,
} from "@/components/registry/thinking-loader";
import { cn } from "@/lib/utils";

80 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/pixel-diamond

Pixel triangle

Six pixels stacked into a triangle, rows of one, two, three, same rhythm as the grid.

Building

usage.tsx

import { PixelTriangle } from "@/components/registry/pixel-triangle";

export function AgentStatus() {
  return <PixelTriangle label="Building" tone="accent" />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { useEffect, useRef } from "react";
import {
  LoaderLabel,
  type LoaderShape,
  type LoaderTone,
  SHAPE_STYLE,
  TONE_CLASS,
} from "@/components/registry/thinking-loader";
import { cn } from "@/lib/utils";

77 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/pixel-triangle