Interactive Demo

See CastDOM in action

Watch the difference between loading with a spinner vs. pixel-perfect skeleton screens extracted from real DOM.

$ npm i @lukas_holdings/castdom ⎘

Animation Types

Four CSS-only animation modes. No JavaScript runtime. Respects prefers-reduced-motion.

Shimmer

Default

Gradient highlight sweeps left to right. Classic skeleton loading pattern. Uses background-position keyframes on a linear-gradient.

Pulse

Subtle

Smooth opacity fade between 100% and 40%. Minimal and calm. Great for long loading states where shimmer feels too busy.

Wave

Staggered

Each bone animates with a 50ms staggered delay, creating a cascading wave effect from top to bottom. Feels organic and directional.

None

Static

Static gray placeholders with no animation. Auto-applied when the user has prefers-reduced-motion: reduce enabled. Zero CPU usage.

Before vs. After

Click "Simulate Loading" to see the difference in real time.

Without CastDOM Spinner

Sarah Chen

Senior Product Designer

Building design systems that scale. Currently working on a component library for enterprise dashboards with a focus on accessibility and performance.

Design Systems Accessibility React

—

CLS

—

FCP

—

LCP

With CastDOM Skeleton

Sarah Chen

Senior Product Designer

Building design systems that scale. Currently working on a component library for enterprise dashboards with a focus on accessibility and performance.

Design Systems Accessibility React

—

CLS

—

FCP

—

LCP

Why CastDOM

Extracted from real DOM. Not approximated.

Zero CLS

Skeletons match exact dimensions from your real DOM. No layout shift when content loads. Ever.

</>

SSR-First

Skeletons render server-side as real HTML. Crawlers see structured content. No JavaScript needed to display.

CSS-Only Runtime

The shimmer animation is pure CSS. No JS animation loop. No requestAnimationFrame. Just gradients.

{}

Content-Aware

Detects text, headings, images, avatars, buttons, and inputs. Renders appropriate shapes for each.

⇄

Responsive

Captures at 375px, 768px, and 1280px by default. Each breakpoint gets its own pixel-perfect skeleton.

62% Smaller

Delta-encoded, zigzag varint compressed bone data. Smaller than JSON, smaller than you'd write by hand.