Wensity

Animated Loading Skeleton

An organic loading state instead of a spinner, with a slow aurora that breathes in the space where your content will land.

agentic ai interfacesgenerativeskeletonmesh
Animated Loading Skeleton component preview

Overview

Animated Loading Skeleton is a React and Tailwind CSS AI loading state, a skeleton loader that replaces the spinner while a model writes its answer, in Next.js or any React app. Two blurred aurora blobs drift in opposite directions behind a slowly turning halo, and each placeholder line carries its own staggered shimmer. It is pure CSS keyframes on transform with no dependencies, and screen readers hear it as a status. Set lines, height, and speed to match the content it stands in for. Reduced motion holds the aurora still and hides the shimmer for a calm placeholder.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add generative-skeleton-mesh

Usage

Import GenerativeSkeletonMesh from @/components/wensity/generative-skeleton-mesh and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { GenerativeSkeletonMesh } from "@/components/wensity/generative-skeleton-mesh";


export function GenerativeSkeletonMeshDemo() {
  return (
    <div className="space-y-6">
      <GenerativeSkeletonMesh lines={3} speed={0.8} />
      <GenerativeSkeletonMesh lines={5} speed={1.2} className="max-w-md" />
    </div>
  );
}

Props

PropTypeDefaultDescription
linesnumber4Number of skeleton lines to render.
heightnumber-Height override in pixels. Defaults to lines × 28 + 96.
speednumber1Animation speed multiplier. Higher is faster.

Related components

  • AI Prompt Input component preview

    AI Prompt Input

    An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.

  • Voice Reactive Orb component preview

    Voice Reactive Orb

    A breathing voice orb that swells with speech and settles between turns, never jittery and always organic to look at.

  • AI Model Selector component preview

    AI Model Selector

    An AI model selector dropdown that scales out from its trigger and glides the selection pill to whichever model you pick.

  • ChatGPT Orb component preview

    ChatGPT Orb

    Low-power WebGL fractal noise that blooms white ink inside a soft circular mask.

Featured in React AI chat UI components.