Live page · scroll inside

Premiumcosmetics · light · landing page · gsap · lenis · html

Velour

A cosmetics site in blush and ink where picking a shade recolours the product photograph through a per-pixel hue map on a canvas (only the tube's own hue moves), tints two goo blobs that morph behind it, and follows the shade through the finder, the ingredient bars and the bundle card.

Placeholder photos by Evangeline Sarney, Zyanya BMO and Marek Studzinski on Unsplash. Replace them with your own before launch.

What's inside

01
Blob preloader
The blob breathes (its radius wobbles with two sine terms) for 1.1 s while the name fades up; the slab lifts and the hero intro begins.
02
Fixed bar with bag count
Turns translucent blush after 80 px; the bag count bumps (scale 1.3→1) when a shade is added.
03
Shade-picker hero with goo blobs
Lines rise from masks; the blobs morph (eight control points driven by sine sums) under a goo filter and drift toward the pointer, settling within four seconds when nothing is happening; picking a dot remaps the product's hue on the canvas over 0.5 s (pixels near the product's original hue move to the new shade, everything else stays), tints the blobs, and the dot rings in.
04
Shade finder by undertone
Cards rise in with a stagger; a tab washes out the swatches of the cards that do not match (white wash, grayscale) over 0.4 s, leaving their text readable; hovering a card pours the swatch colour down its length (background-size 100% 0 → 100% 100%).
05
Three-step ritual
Photos unroll from the bottom with a stagger; the linking rule draws left to right on enter; hovering a photo warms it (sepia 15 %) and scales 1.03.
06
Ingredient bars
Bars grow from the left (scaleX) to their share with a stagger when the block enters; the percentages count up; hovering a row tints its origin with the shade ink.
07
Review strip
The strip marquees at 40 px/s, pauses on hover and holds while Pause is pressed; the star summary counts to 4.8 on enter.
08
Bundle card
The card rises in; the toggle's pill slides; adding bumps the nav bag count and ripples a ring from the button.
09
Minimal footer
None beyond link colour on hover.

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…

Velour

What's inside

Blob preloader

The blob breathes (its radius wobbles with two sine terms) for 1.1 s while the name fades up; the slab lifts and the hero intro begins.

Fixed bar with bag count

Turns translucent blush after 80 px; the bag count bumps (scale 1.3→1) when a shade is added.

Shade-picker hero with goo blobs

Lines rise from masks; the blobs morph (eight control points driven by sine sums) under a goo filter and drift toward the pointer, settling within four seconds when nothing is happening; picking a dot remaps the product's hue on the canvas over 0.5 s (pixels near the product's original hue move to the new shade, everything else stays), tints the blobs, and the dot rings in.

Shade finder by undertone

Cards rise in with a stagger; a tab washes out the swatches of the cards that do not match (white wash, grayscale) over 0.4 s, leaving their text readable; hovering a card pours the swatch colour down its length (background-size 100% 0 → 100% 100%).

Three-step ritual

Photos unroll from the bottom with a stagger; the linking rule draws left to right on enter; hovering a photo warms it (sepia 15 %) and scales 1.03.

Ingredient bars

Bars grow from the left (scaleX) to their share with a stagger when the block enters; the percentages count up; hovering a row tints its origin with the shade ink.

Review strip

The strip marquees at 40 px/s, pauses on hover and holds while Pause is pressed; the star summary counts to 4.8 on enter.

Bundle card

The card rises in; the toggle's pill slides; adding bumps the nav bag count and ripples a ring from the button.

Minimal footer

None beyond link colour on hover.

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.