Skeleton Loading

About this style

Skeleton screens show the shape of a page, pale blocks where images, headings and text will appear, while its content loads. In the early 2010s designers began arguing that this makes waiting feel shorter than a spinner, because people see the layout and its progress at once, and social, news and shopping apps adopted the pattern widely. A soft shimmer passing over the blocks signals that loading is still underway. The best versions match the final layout exactly, so content lands in place without the page jumping.

Make a 10-second skeleton-loading demo: a cabin-stays web app opens as shimmering skeleton screens, then its real content resolves in a staggered diagonal cascade, landing exactly in place.

<inputs>
If I don't give you something, use the default and don't ask.
- App: Larchway, cabin stays (fictional). Search: "Anywhere · Any week · 2 guests". Results: 214 stays.
- Filters: Cabins, Lakefront, A-frames, Treehouses, Off-grid, Sauna, Dog friendly, Ski-in
- Listings (title · place · dates · rating · price per night):
  Cedar A-frame · Lake Tarrow · 12–17 Mar · 4.96 · $184
  Fell bothy with sauna · Harrowgill · 3–8 Apr · 4.91 · $142
  Treehouse over the creek · Wendle Gorge · 19–24 Mar · 4.88 · $206
  Shore cabin · Saltmarrow Bay · 7–12 Apr · 4.93 · $231
  Snowline chalet · Mount Ivrel · 10–15 Mar · 4.97 · $268
  Meadow yurt · Thistlecombe · 24–29 Apr · 4.84 · $96
  Off-grid hut · Pellow Moor · 2–7 May · 4.90 · $118
  Pine lodge for six · Fenmarrow Woods · 15–20 May · 4.95 · $322
- Length: 10 seconds.
</inputs>

<direction>
- Palette: stage sage #CDD5C6; window #FBFAF7 with a 24px radius and a soft shadow (0 30px 80px rgba(30,40,28,0.18)); ink #1C1E1B; secondary #6C6F68; skeleton base #ECE9E2; shimmer highlight #F8F6F1; rust #C4532D for the search button and saved hearts; chip borders #DEDAD1.
- Type: Inter 400–700 with tabular figures: logo 30px/700, search 22px/500, chips 20px/500, card titles 22px/600, place and dates 20px/400 in secondary, rating 20px/600, price 22px/700 with "night" in 20px/400.
- Layout: a 1680×920 window at (120, 80) with 48px side padding: an 80px header (a drawn larch-tree mark and "Larchway" at left, a 640×56 search pill centered with a 44px rust round button, a 44px avatar at right); a chips row at window y 104–152 with "214 stays" right-aligned on it; then a 4×2 grid of 372px-wide cards from window y 184 with 32px gaps: a 372×210 photo with an 18px radius, then the title, the place · dates line and a row with the rating and the price.
- Skeletons are the layout: every skeleton block has its element's final box (radius, height, line height); text bars run 60–90% of the line width with seeded variation, last lines shorter; chips are pills of their final widths, the avatar a circle, photos full size. So resolving causes zero layout shift.
- Shimmer: one diagonal highlight band (tilted 20°, 280px wide, base → highlight → base) sweeps left to right across the whole window in window coordinates, so it passes through every block as one continuous light, never each block on its own timer. Each pass takes 1.2s on cubic-bezier(0.4, 0, 0.2, 1); passes start at 0.6s and 2.1s.
- Photos, painted once at load into canvases: each card's photo is its own procedural landscape: a sky gradient, a sun or moon disc, three seeded fBm ridge silhouettes paling with distance, a lake with broken reflection streaks or a snowfield or a meadow, seeded pine silhouettes of stacked triangles, and a small cabin with one warm lit window. Eight palettes: dawn rose, teal dusk, snow blue, autumn amber, deep forest, golden meadow, misty grey-green, evening violet.
- Resolve, per card with a 60ms internal stagger: the photo block first fills with that photo's average color (0.15s), then the photo fades in over it while sharpening from a 16px blur to 0 and scaling 1.03 → 1 over 0.45s; then each text bar shrinks to its text's true width while the text fades up 4px (0.3s, cubic-bezier(0.2, 0, 0, 1)); a heart outline pops in at the photo's top-right. Cards resolve in a diagonal wave from top-left to bottom-right, delay = (column + row) × 110ms. Resolved blocks no longer catch the shimmer.
- Premium: skeletons that are the layout, one light sweeping through them all, content landing exactly in place in a calm cascade. Cheap: a spinner, grey boxes of the wrong size, content that pops in and shoves the page.
Banned: spinners or progress bars, layout shift, real brand names, photo files, skeletons pulsing in opacity, gradients outside the shimmer and the photos, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the sage stage; the window rises 24px with every block a skeleton.
- 0.6–2.8s: the shimmer sweeps across twice.
- 2.8–3.4s: the header resolves (logo, search text, avatar); the chips resolve left to right, 40ms apart; "214 stays" appears.
- 3.4–5.6s: the cards resolve in the diagonal wave; the last one finishes by 5.6s.
- 5.6–6.4s: the hearts on cards 1 and 5 fill rust with a small spring. At 6.0s the page reads fully loaded.
- 6.4–7.2s: a "Show map" pill (ink, white 20px/600 text, a drawn map glyph) rises 16px into place, centered in the band below the second row.
- 7.2–8.4s: everything settles.
- 8.4–10.0s: hold, perfectly still.
For other lengths, add or remove shimmer passes at the same speed; keep the cascade timing and at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: HTML/CSS, with absolutely positioned elements whose transforms, widths, filters and opacity are set from seek; the shimmer is one gradient layer in window coordinates masked to the unresolved blocks; the photos, logo and glyphs are canvases and inline SVG made once at load.
- Each block's resolve time comes from its card's position, so the cascade is a pure function of t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every skeleton matches its content's box so nothing moves as it resolves (compare frames at 3.0s and 6.0s), the shimmer reads as one band crossing the whole window, the eight photos are distinct landscapes, every price, rating and date matches the inputs, and all text is 20px or larger. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…