Summit

What's inside

1. 01
   Summit preloader

   The ridge path draws over 1 s, the flag scales in, the name fades, the slab lifts.
2. 02
   Fixed bar with a temperature chip

   Turns translucent after 80 px; the chip's number tweens with the slider.
3. 03
   Weather hero with a temperature slider

   Particles fall with gravity, size and count set by temperature (dense slow flakes below −10, sparse flakes to 0, streaking rain to +10, nothing above) and drift with the pointer's horizontal offset (wind); the slider tweens the readout, the track colour and the nav chip, and FLIP-stacks the layer cards: a layer that is not needed slides right and fades; the mountain photo cools (blue tint) or warms with temperature.
4. 04
   Gear grid

   Cards rise with a stagger; hovering lifts the photo; the card for the hero's heaviest active layer gets an accent ring.
5. 05
   Mountain forecast strip

   Columns rise; icons animate (sun rays rotate, snow dots fall, rain lines streak); switching huts crossfades the numbers.
6. 06
   Field notes

   Photo unrolls and drifts; notes rise with a stagger.
7. 07
   Minimal footer

   None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

1. 01
   Walk the page

   The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

2. 02
   Pick a palette

   Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

3. 03
   Pick your stack

   Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

4. 04
   Copy the prompt

   It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

5. 05
   Make it yours, then iterate

   Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.