Every loading state, beautifully.
One package, every framework.
Production-grade, zero-dependency loading UI toolkit. Pure 60 FPS GPU motion, synchronized timeline clocks, anti-flicker timing, auto-measure DOM wrapping, and frosted glass themes.
See Veilkit in Action
Inspect the smoothness of pure GPU motion. Zero layout thrashing, zero battery drain.
Synchronized 60 FPS skeleton shimmer with smooth anti-flicker reveal into content.
60 FPS Compositor AnimationEverything You Need for Loading States
Built from the ground up to solve layout thrashing, phase desynchronization, and micro-flicker.
Pure GPU Compositor Motion
Animations strictly manipulate hardware-accelerated transform and opacity. Zero layout recalculations, zero paint thrash, and 60 FPS buttery smoothness.
Synchronized Global Clock
Every shimmer on the page synchronizes to a shared timeline phase using negative animation-delay offsets. No matter when elements mount, all light sweeps move in perfect unison.
Anti-Flicker Timing Controller
Fast API calls under 150ms never trigger skeletons, eliminating annoying visual micro-flashes. When loaders do appear, they stay visible for at least 300ms for a serene transition.
45+ Canonical Presets & 5 Shapes
Instant responsive layouts for e-commerce, cards, feeds, dashboards, code blocks, chat, checkouts, and trees with rounded, pill, glass, square, and sharp borders.
Loading Button State Machine
Zero layout-shift button with 16 animation styles (morph-circle, stripes, border-trace), promise tracking, animated checkmark draws, and mobile haptics.
Zero Runtime Dependencies
Pure TypeScript runtime engine. Sub-6 kB core gzip footprint. Framework packages are optional peer dependencies. Compatible with tree-shaking and strict Content Security Policies.
Build Skeletons Matching Your Exact Website Layout
Add elements, tweak dimensions, select animations and shapes. Copy the production code directly into your project in seconds.
✦ GPU-accelerated motion matching layout leaf elements.
import { CustomSkeleton, SkeletonBuilder } from 'veilkit/react';
// Option A: Declarative Custom Layout Component
export function MyWebsiteSkeleton() {
const config = {
animation: 'shimmer',
theme: 'glass',
shape: 'rounded',
gap: 12,
nodes: [
{ type: 'image', width: '100%', height: '160px' },
{ type: 'heading', width: '65%', height: '24px' },
{ type: 'line', width: '90%', height: '14px' },
{ type: 'button', width: '120px', height: '40px' }
],
};
return <CustomSkeleton config={config} />;
}
// Option B: Fluent SkeletonBuilder API
export const builderSkeleton = new SkeletonBuilder({ animation: 'shimmer', shape: 'rounded' })
.rect('100%', '160px')
.heading('65%', '24px')
.lines(2)
.button('120px', '40px')
.build();100% Feature Parity Across Every Platform
Switch frameworks without rewriting loading architecture. Same tokens, same synchronized clocks, same animations, everywhere.
// Next.js & React 19 Client Component
import { Skeleton, SkeletonPreset, LoadingButton, Spinner } from 'veilkit/react';
export function UserDashboard({ user, loading }) {
if (loading) {
return (
<div className="space-y-4">
{/* Preset Skeleton with glass theme */}
<SkeletonPreset name="dashboard" shape="glass" animation="aurora" />
</div>
);
}
return (
<LoadingButton
loadingStyle="morph-circle"
loadingText="Saving Changes..."
successText="Saved!"
onClick={async () => await saveSettings()}
>
Update Profile
</LoadingButton>
);
}How Veilkit compares to the alternatives
Compare Veilkit against traditional loading libraries. Built from the ground up for modern cross-framework applications without compromises.
| Core Feature | ✦ veilkit | react-loading-skeleton | react-content-loader | nprogress | shadcn/ui |
|---|---|---|---|---|---|
Zero Runtime DependenciesAll framework adapters are strictly optional peer dependencies | ✓ Yes | ✕ No | ✕ No | ✓ Yes | ✕ No |
Universal Multi-Framework Parity | React, Vue, Svelte, Angular, Native, Elements, CDN | React only | React & React Native | Vanilla only | React only |
Pure GPU Compositor Motion | Yes (transform & opacity only) | No (animates background-position) | No (SVG clipPath repaint) | No (CSS width transitions) | No (CSS animation) |
Synchronized Global Timeline Clocks | Built-in (Zero Phase Jitter) | No (elements desync) | No (independent phases) | N/A | No |
Anti-Flicker Timing Controller | Built-in (delay & minVisible) | Manual user logic | Manual user logic | No | No |
DOM Auto-Measure Engine | Built-in (<Veil loading>, v-veil) | No | No | N/A | No |
Ready-Made Responsive Presets | 45+ Presets (5 shape styles) | 0 (Primitives only) | Community SVGs | 0 | 0 |
GPU Spinner Loaders | 30 Spinners (Glass & Speed) | 0 | 0 | 1 basic spinner | 0 |
Loading Button State Machine | 16 Styles (Promises & Haptics) | None | None | None | Button + manual spinner |
Built-in Design Themes | 11 Themes (Glass, iOS, Neon) + createTheme | Light / Dark only | Custom SVG colors | 1 theme color | Tailwind muted |
Route Progress Loader | Built-in (Top trickle bar) | None | None | Yes | None |
Static CLI Pre-rendering | npx veilkit capture (Zero-runtime) | No | No | No | No |
Everything You Need to Know
Quick answers to common questions about performance, architecture, and framework integration.
Ready to elevate your loading experience?
Get started with Veilkit in less than two minutes. Zero dependencies, instant setup, every platform.