类型：Site模板 · 收录：2026-10-25 13:38:31 · 源码：会员可见
# Prompt: Glint hero
Build a single-file, one-screen **landing hero for a cashback credit card** from a fictional fintech, **Glint** ("We already found your one card"). Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a dark product shot with an arcade twist: a polished chrome claw-machine grabber descends from the top centre, holding one glossy **electric-lime** card above a pile of matte black and graphite cards whose edges glow with lime rim light. A coiled lime cable hangs beside the claw, and everything sits on pure black.
## Scene
- **Plate:** the whole scene is ONE 16:10 image (1728×1080): `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/e858a5ce-3511-4e13-baeb-c179c909bc62.webp`. It covers the hero (`object-fit:cover`, centred; on phones `object-position:50% 0`).
- **Motion:** a 5s muted looping video of the same plate plays over it with **exactly the same cover rules**: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/ac216b5a-e869-4b3a-bf7b-aec877a020e4.mp4` (1152×720, 16:10). The claw swings like a pendulum, the lime card sways and glints, the cable bounces, the pile's rim light pulses and lime sparks drift up.
- Fade the video in once its first frame is ready.
- **Rule:** nothing in the scene is drawn or animated in code.
## Scaling
- **Unit:** one scale unit, with `--u` = 1px at a **1570×1002** reference.
- **Desktop:** the layout spans the full width.
- **Below ~1178px or portrait:** it switches to a fluid tablet/phone grid.
## Type and colour
- **Fonts:** **Inter Display** 400–700 for the headline and stats, **Inter** 400–600 for everything else (self-hosted woff2).
- **Colours:** ink `#020305`, white text, accent lime `#b9f00a`.
- **Logo:** a lime gradient mark `#cdf531 → #a6dc00` made of four rows of notched bars, next to the word "Glint".
## Layout (desktop)
- **Top bar:**
- **Left:** the logo and "Glint".
- **Centre:** three translucent nav pills: Benefits · Perks · Insights.
- **Right:** an outline "Claim Your Spot!" button.
- **Left column:** a huge tight headline (Inter Display 700, about −0.045em tracking) on three lines: **"We already / found your / one card"**.
- **Right column:**
- **Pitch:** "The claw only ever grabs the same card – because it's the only card that really pays you back."
- **Buttons:** a white "Claim Your Spot!" button and a square dark arrow button beside it.
- **Bottom-left tagline:** "For people who / actually watch every / receipt."
- **Bottom-right stats:** two frosted glass tiles (white 8% fill, 28px blur, a hairline white inset ring and a faint lime top edge):
- **"0%"** with "APR for 18 months"
- **"5%"** with "Cashback always"
## Motion (UI)
- **Entrance:** a single two-second opening sequence. The logo, pills and outline button settle; the headline lines rise in turn; then the pitch, the buttons, the tagline and the stat tiles.
- **Hover:** the pills brighten, and the white button lifts 1px.
- **Phones:** a burger menu with a dropdown.
- **Reduced motion:** no entrance and no video.
## Phones
- **Layout:** stacked: logo and burger, the headline, the pitch and buttons, an open stretch showing the claw, then the tagline and the two stat tiles side by side.
- **Readability:** dark top and bottom gradient scrims keep the text readable.
## Acceptance check (1440×900)
- The claw with its lime card hangs in the centre between the headline and the pitch, and swings visibly in the loop.
- The lime-lit card pile fills the bottom, behind the tagline and the stat tiles.
- **Content:** no real brand names.