Aurora
The blank-page editor, reimagined
For teams who still believe writing should feel like writing — not configuring.
Placeholder shapes with a moving shimmer that mimic the layout of the real content while it loads. The polite alternative to a spinner.
Instead of a spinner that says "something is happening, wait", skeleton loaders show the rough shape of the content that's about to arrive — a tile here, three text lines there, a circle for an avatar — with a soft shimmer sweeping across to indicate liveness. Apps feel faster (perceived performance) because users see the page's bones immediately. Facebook popularized them in 2014, and they're now standard on Slack, YouTube, LinkedIn, every major content app.
Render the same component twice: a skeleton version with empty rectangles + circles that match the real layout's shapes and proportions, and the real content. While loading, show the skeleton. Each placeholder block has a moving gradient background (linear-gradient with three stops, light in the middle) plus background-size: 200% animated horizontally via CSS keyframes. When data is ready, swap from skeleton → real with a quick crossfade. Important: skeletons should mimic the actual layout (3 cards if you'll show 3 cards), not be generic.
Toggle between Loading and Loaded states. Watch the shimmer sweep across the placeholders.
For teams who still believe writing should feel like writing — not configuring.
Forty hours per jacket. The decision that doubled our shipping time on purpose.
What broke at launch, what surprised us, what we'd do differently in batch 13.
Build a skeleton-loader system for a blog-card grid. Render the same 3-card grid in TWO versions inside each card: a .sk-skel skeleton view and a .sk-real loaded view. Skeleton view: a placeholder image block (aspect-ratio:16/10), a small placeholder "tag" pill (64px×20px rounded), 3 placeholder text lines of varying widths (90%, 75%, 60%), and a placeholder meta line. Each placeholder element has class .sk-line/.sk-tag/.sk-img and gets a moving shimmer background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 100%); background-size:200% 100%; animation:shimmer 1.4s linear infinite (background-position from 200% 0 to -200% 0). Card states via parent class .loading or .loaded: .loading shows .sk-skel and hides .sk-real (display:none); .loaded does the opposite. Loaded view shows: gradient-art image (different per card), a colored category tag pill, a serif headline (line-clamped), an excerpt, and a meta byline. Include 3 demo toggle buttons: Loading state / Loaded state / Auto-cycle (alternates every 2 seconds via setInterval).