类型：Site模板 · 收录：2026-10-25 13:38:32 · 源码：会员可见
# Prompt: Vaultline crypto hero
Build a single-file, dark-navy **crypto wallet landing hero** for a fictional company, **Vaultline**, "unshakable digital assets". Use plain HTML, CSS and vanilla JS, with no framework and no build step. It's one full-viewport screen, centred, with a glowing armoured **vault sphere** rising from the bottom edge.
## Look and feel
- **Background:** `#020d29`, deep navy. An electric-blue glow (with a hint of mint) rises from behind the sphere, from the bottom centre.
- **Type:** **Host Grotesk** 400/500/700/800, self-hosted.
- The headline is 800 weight, uppercase, with no kerning. It is filled with a vertical metallic gradient, white at the top fading to slate at the bottom: `rgb(240,246,253) 8% → rgb(203,209,219) 25% → rgb(163,174,192) 42% → rgb(125,136,153) 58% → rgb(76,89,108) 75% → rgb(29,45,70) 92%`.
- **Text colours:** the subline is `rgba(222,240,255,.73)` and the feature descriptions are `rgba(207,246,255,.65)`.
- **Accent:** an electric-blue → mint gradient, `linear-gradient(90deg,#8fc8ff,#9ff4dc)`, used on the CTA.
## Layout (desktop, landscape)
A **2048×1437 reference frame** scaled by `--u = min(100vw/2048, 100vh/1137)`. Width drives the scale, and spare or missing height is absorbed above the copy, between the CTA and the sphere, and by cropping the sphere lower.
1. **Trust badge** (centred, top): a pill 54u tall with a 1.5u border `rgba(127,214,255,.55)` on `rgba(14,40,92,.55)`, a soft blue glow, a small blue shield-with-check icon and **"Trusted by 2M+ Vaultline traders"** at 21u.
2. **Avatar stack** under it: four overlapping 72u circular photos with white rings, then a frosted **"+8"** bubble.
3. **Headline**, two centred lines at 142.5u: **UNSHAKABLE / DIGITAL ASSETS**.
4. **Subline**, two lines at 28.4u: "Vaultline guards, trades, and grows your digital assets in one private and / armored vault."
5. **CTA**: a 70u-tall pill, **"Open your vault"**, filled with the blue → mint gradient, with dark text. Beside it is a separate 70u round mint button with a → arrow, which nudges right on hover.
6. **Four features** frame the sphere: two on the left, left-aligned, and two on the right, right-aligned. Each has an 800-weight uppercase title (28.75u), a grey description (19.9u) and an **84u glowing icon tile** (radius 20u, border `rgba(127,214,255,.55)`, dark-blue fill, cyan line icon with a glow). The tile sits in the outer gutter, beside the text.
- **Left:**
- shield: **Armored multi-sig wallets**, "Hold each asset behind one locked door."
- swap arrows: **Instant swapping**, "Switch between assets in a quick tap."
- **Right:**
- stacked layers: **Yield desk**, "Earn steady yield on idle balances, with no lockup."
- bar chart: **Real-time alerting**, "Catch price swings and risky moves as they happen."
7. **Vault sphere:** a 4:3 artwork drawn behind everything, 2035×1526u, bottom-centred and cropped by the bottom edge. It shows a brushed gunmetal armoured sphere with riveted plates, electric-blue/mint light leaking from its seams and a circular vault dial lock at the lower centre.
## Motion
- **Vault loop:** light surges along the seams, the dial glow pulses, and the plates breathe. It plays as a square video over the middle 75% of the artwork, with its left and right edges feathered so it melts into the identical still underneath.
- **Entrance:** one Web Animations timeline, run once, then the page is static.
- the badge settles
- the avatar stack unrolls left to right behind a pill-shaped wipe
- each headline line rises out of its own mask
- the subline rises, then the CTA pill and the arrow docks
- the features arrive in rows: icon, then title, then description
- **Reduced motion:** no entrance and no loop.
## Smaller screens
Everything stacks centred: badge, avatars, headline sized from the column width, subline, CTA, then the features as a 2×2 grid with the icon tile above each title. The vault artwork becomes the hero's own background, sitting on the bottom edge. There's no video on phones.
## Media (use these URLs)
- **Vault artwork:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/449a6978-1c56-45d4-906c-4a2d7d610cbe.webp` (1448×1086 WebP, the sphere is 52.2% of its width).
- **Vault loop:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/5cfb4e6a-48bc-4c38-a4a7-394d9a3d9e22.mp4` (960×960 square crop of the artwork's middle, 5s, muted, loops).
- **Avatars:** four friendly headshots (any royalty-free portraits).
## Acceptance check (1440×900)
- **Top:** the badge sits at the top centre, then the avatars, then the two-line metallic headline.
- **Middle:** the subline and the gradient CTA follow.
- **Sides:** the four features sit with their icon tiles in the outer gutters.
- **Bottom:** the vault fills the bottom centre and its seams visibly pulse.
- **Content:** no real company names appear anywhere.