Live page · scroll inside

PremiumPassword manager · dark · landing page · gsap · lenis · html

Vault

A password-manager site in warm charcoal with brass and sea-glass teal: the hero padlock's shackle sinks as a typed password gains entropy and snaps shut at 60 bits with a quarter-turn of the keyhole, driven by a live tester (meter, bits, crack time, advice) and a passphrase generator, after a short demo. Then a three-stage zero-knowledge path with real-looking ciphertext, family and team shelves of hanging key tags with a health check, key-tag pricing cards and a brass-glow CTA.

What's inside

01
Key-ring bar
Solid after 80 px.
02
Padlock strength hero
The demo types a weak password, clears it and types a passphrase. As entropy rises the shackle lowers; at 60 bits it snaps shut, the keyhole turns a quarter and the lock glows. Typing your own password or pressing Generate drives the same lock.
03
Zero-knowledge path
The dashed line runs left to right as stages rise; the ciphertext rows shift once.
04
Key-tag shelves
Shelves rise; tags swing in from a slight angle.
05
Key-tag pricing
Tags rise and settle from a small tilt.
06
Brass shut band
Heading rises.
07
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…

Vault

What's inside

Key-ring bar

Solid after 80 px.

Padlock strength hero

The demo types a weak password, clears it and types a passphrase. As entropy rises the shackle lowers; at 60 bits it snaps shut, the keyhole turns a quarter and the lock glows. Typing your own password or pressing Generate drives the same lock.

Zero-knowledge path

The dashed line runs left to right as stages rise; the ciphertext rows shift once.

Key-tag shelves

Shelves rise; tags swing in from a slight angle.

Key-tag pricing

Tags rise and settle from a small tilt.

Brass shut band

Heading rises.

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.