Sunwick

What's inside

1. 01
   Sunwick preloader

   Arc draws 1 s, the dot follows, the slab lifts.
2. 02
   Fixed bar

   Translucent after 80 px; underlines draw.
3. 03
   Roof hero

   Lines rise; the photo unrolls; the kW readout counts up and then jitters gently; the floating card drifts.
4. 04
   Energy-flow diagram

   Dashed flow lines run along each link in the direction energy moves, thicker and faster when more flows; links with no flow fade; the sun rises and sets along an arc with the slider and the sky tint shifts; readouts tween; the battery fills during the day and drains at night; a play button runs a whole day in 12 s.
5. 05
   Savings calculator

   Numbers tween on every change; bars grow with a 12 ms stagger; the payback marker slides along the chart; the result card lifts on enter.
6. 06
   Four steps

   Cards rise with a stagger; the number strokes in.
7. 07
   Results and quote

   Counters count on enter; the photo unrolls.
8. 08
   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.