Wensity

Generative Skeleton Mesh

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
Generative Skeleton Mesh component preview

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.