beUI Pro para móvil ya está disponible: 50 bloques y pantallas de React Native

AI Thinking Loaders

6 variantes

Six compact pixel and node animations for AI thinking, analysis, and generation states.

Pixel orbit

index.tsx

Pixel orbit animation for compact AI status indicators.

Thinking

TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx

"use client";

import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";

export function OrbitThinkingPreview() {
  return <AIThinkingLoader variant="orbit" />;
}

export function ScanThinkingPreview() {
  return <AIThinkingLoader variant="scan" />;
}

export function WaveThinkingPreview() {
  return <AIThinkingLoader variant="wave" />;
}

export function AssembleThinkingPreview() {
  return <AIThinkingLoader variant="assemble" />;
}

export function DiamondThinkingPreview() {
  return <AIThinkingLoader variant="diamond" />;
}

export function NodesThinkingPreview() {
  return <AIThinkingLoader variant="nodes" />;
}

Grid scan

index.tsx

Grid scan animation for compact AI status indicators.

Analyzing

TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx

"use client";

import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";

export function OrbitThinkingPreview() {
  return <AIThinkingLoader variant="orbit" />;
}

export function ScanThinkingPreview() {
  return <AIThinkingLoader variant="scan" />;
}

export function WaveThinkingPreview() {
  return <AIThinkingLoader variant="wave" />;
}

export function AssembleThinkingPreview() {
  return <AIThinkingLoader variant="assemble" />;
}

export function DiamondThinkingPreview() {
  return <AIThinkingLoader variant="diamond" />;
}

export function NodesThinkingPreview() {
  return <AIThinkingLoader variant="nodes" />;
}

Diagonal wave

index.tsx

Diagonal wave animation for compact AI status indicators.

Creating

TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx

"use client";

import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";

export function OrbitThinkingPreview() {
  return <AIThinkingLoader variant="orbit" />;
}

export function ScanThinkingPreview() {
  return <AIThinkingLoader variant="scan" />;
}

export function WaveThinkingPreview() {
  return <AIThinkingLoader variant="wave" />;
}

export function AssembleThinkingPreview() {
  return <AIThinkingLoader variant="assemble" />;
}

export function DiamondThinkingPreview() {
  return <AIThinkingLoader variant="diamond" />;
}

export function NodesThinkingPreview() {
  return <AIThinkingLoader variant="nodes" />;
}

Assembling tiles

index.tsx

Assembling tiles animation for compact AI status indicators.

Processing

TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx

"use client";

import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";

export function OrbitThinkingPreview() {
  return <AIThinkingLoader variant="orbit" />;
}

export function ScanThinkingPreview() {
  return <AIThinkingLoader variant="scan" />;
}

export function WaveThinkingPreview() {
  return <AIThinkingLoader variant="wave" />;
}

export function AssembleThinkingPreview() {
  return <AIThinkingLoader variant="assemble" />;
}

export function DiamondThinkingPreview() {
  return <AIThinkingLoader variant="diamond" />;
}

export function NodesThinkingPreview() {
  return <AIThinkingLoader variant="nodes" />;
}

Diamond loop

index.tsx

Diamond loop animation for compact AI status indicators.

Reasoning

TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx

"use client";

import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";

export function OrbitThinkingPreview() {
  return <AIThinkingLoader variant="orbit" />;
}

export function ScanThinkingPreview() {
  return <AIThinkingLoader variant="scan" />;
}

export function WaveThinkingPreview() {
  return <AIThinkingLoader variant="wave" />;
}

export function AssembleThinkingPreview() {
  return <AIThinkingLoader variant="assemble" />;
}

export function DiamondThinkingPreview() {
  return <AIThinkingLoader variant="diamond" />;
}

export function NodesThinkingPreview() {
  return <AIThinkingLoader variant="nodes" />;
}

Connected nodes

index.tsx

Connected nodes animation for compact AI status indicators.

Reading docs

TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx

"use client";

import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";

export function OrbitThinkingPreview() {
  return <AIThinkingLoader variant="orbit" />;
}

export function ScanThinkingPreview() {
  return <AIThinkingLoader variant="scan" />;
}

export function WaveThinkingPreview() {
  return <AIThinkingLoader variant="wave" />;
}

export function AssembleThinkingPreview() {
  return <AIThinkingLoader variant="assemble" />;
}

export function DiamondThinkingPreview() {
  return <AIThinkingLoader variant="diamond" />;
}

export function NodesThinkingPreview() {
  return <AIThinkingLoader variant="nodes" />;
}

Instalar

Añade este componente con la CLI de shadcn.

$ bunx --bun shadcn add @beui-pro/