Live page · scroll inside

Premiumindependent opticians · light · landing page · gsap · lenis · html

Vireo

An independent optician's site in cool paper, slate ink and deep teal: under a two-line headline, a wide landscape photo is shown blurred and muted, and a pair of glasses drawn in SVG follows the pointer (drag on touch, arrow keys when focused); through the lenses, clipped by the same SVG shapes, the view is sharp and tinted. Four frame shapes swap the lens outlines, six tints (clear, grey polarised, brown, rose, G-15, screen amber) recolour the view through the lenses, a switch flips between a coast and a forest lake, and the price updates; then three fitting steps, a plain price table and shop hours.

Placeholder photos by Painted BobCat and Nathan Dumlao on Unsplash. Replace them with your own before launch.

What's inside

01
Spaced wordmark bar
Turns translucent after 80 px.
02
Headline over a view you look at through draggable frames
Headline lines rise; the glasses glide in from below and follow the pointer with a 0.35 s lag; changing frame morphs nothing, it swaps the lens shapes with a 0.25 s rim fade; tints crossfade on the sharp layer (0.4 s).
03
Three fitting steps
Columns rise in turn.
04
Price table
Rows rise in turn.
05
Shop hours and booking
Content rises.
06
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…

Vireo

Placeholder photos by Painted BobCat and Nathan Dumlao on Unsplash. Replace them with your own before launch.

What's inside

Spaced wordmark bar

Turns translucent after 80 px.

Headline over a view you look at through draggable frames

Headline lines rise; the glasses glide in from below and follow the pointer with a 0.35 s lag; changing frame morphs nothing, it swaps the lens shapes with a 0.25 s rim fade; tints crossfade on the sharp layer (0.4 s).

Three fitting steps

Columns rise in turn.

Price table

Rows rise in turn.

Shop hours and booking

Content rises.

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.