Live page · scroll inside

Premiumhome cleaning service · light · landing page · gsap · lenis · html

Dewlight

A home cleaning company's site in dew-green and deep teal: the hero puts a room photo beside the headline, shown grimy under a smudge and noise overlay, and every drag across it wipes the clean photo back through a soft canvas mask while a meter counts the share you have wiped; four rooms to switch between, a demo stroke on load and a Wipe the lot button. Then a three-hour visit drawn as a proportional time bar, a quote builder (rooms, frequency, extras), counted figures about the cleaners and a kit list.

Placeholder photos by Clay Banks, Naomi Hébert and Thanos Pal on Unsplash. Replace them with your own before launch.

What's inside

01
Droplet wordmark bar
Turns translucent after 80 px.
02
Headline beside a room you wipe clean
Headline lines rise from masks. On load a demo stroke wipes an S across the stage in 1.4 s. Dragging wipes a soft 9 %-wide path; the meter fills; switching rooms resets with a shorter demo stroke.
03
A visit as a proportional time bar
Segments rise in turn; each bar grows from the left as it enters.
04
Quote builder
Price and hours roll to their new values (0.4 s) on every change.
05
Figures and a customer quote
Figures count up on entry; the quote rises.
06
What we bring and what you leave out
List rows rise in turn.
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.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
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.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Dewlight

Placeholder photos by Clay Banks, Naomi Hébert and Thanos Pal on Unsplash. Replace them with your own before launch.

What's inside

Droplet wordmark bar

Turns translucent after 80 px.

Headline beside a room you wipe clean

Headline lines rise from masks. On load a demo stroke wipes an S across the stage in 1.4 s. Dragging wipes a soft 9 %-wide path; the meter fills; switching rooms resets with a shorter demo stroke.

A visit as a proportional time bar

Segments rise in turn; each bar grows from the left as it enters.

Quote builder

Price and hours roll to their new values (0.4 s) on every change.

Figures and a customer quote

Figures count up on entry; the quote rises.

What we bring and what you leave out

List rows rise in turn.

Minimal footer

None.

How to use it

From prompt to a live page.

Walk the page

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

Pick a palette

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

Pick your stack

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

Copy the prompt

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

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.