类型：Site模板 · 收录：2026-10-08 21:01:26 · 源码：会员可见
Build ONE standalone HTML file (no external CSS/JS files, no local images/videos). Recreate the Pulse marketing landing page EXACTLY as specified. Do not redesign, restyle, simplify, or substitute assets.
OUTPUT
- A single self-contained .html file.
- Inline all CSS in <style> and all JS in <script>.
- Embed fonts as @font-face with the exact URLs below (or data:font/woff2 if you inline them).
- Use ONLY the CloudFront media URLs below for images and video. Never use placeholders, Unsplash, generated images, local paths, or background.webp.
PAGE
Title: Pulse — Make moves. Unbound.
Full-viewport immersive landing (html/body height 100%, overflow hidden, black page chrome). No extra sections, footer, or pages.
EXACT MEDIA (mandatory, do not change)
Background video (looping full-bleed behind the card):
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261005_115552_1a7e1381-03a4-457b-9037-55b97187ac67.mp4
- <video autoplay muted loop playsinline preload="auto"> with a <source type="video/mp4">.
- Also preload it: <link rel="preload" as="video" type="video/mp4" href="[that URL]">.
- CSS custom property --bg-video set to that exact URL.
- Video fills .bg with object-fit:cover and object-position: calc(50% + calc(3.5 * var(--u))) 0.
Logo PNG (used twice: static img + spinning inner glyph):
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/a13f9dde-f53a-4882-9b5b-ba15460aadc6.png
Hero sticker PNGs (transparent):
- rocket: https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/c7faf836-8a68-4f59-9fb8-fa96032921b1.png
- smile: https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/f5433c20-3c65-4e3a-993a-cfbc5f36db64.png
- wallet: https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/20d160f3-9bf7-4ceb-9b84-058443346d70.png
- coin: https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/01c2d5bc-a3ca-4dfa-86a8-cabd41f4321d.png
FONTS (exact)
@font-face PInter weight 500: https://pulse-612.pages.dev/assets/fonts/pinter-500.woff2
@font-face PInter weight 600: https://pulse-612.pages.dev/assets/fonts/pinter-600.woff2
@font-face PInterTight weight 700: https://pulse-612.pages.dev/assets/fonts/pinter-tight-700.woff2
font-display: block.
Body: 'PInter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif.
Ticker + tight labels use 'PInterTight'.
DESIGN TOKENS / UNIT SYSTEM
Reference frame = 1280 x 800.
--vh: 100vh; @supports (height: 100dvh) { --vh: 100dvh }
--u: min(calc(100vw / 1280), calc(var(--vh) / 800));
--au: var(--u);
--ink: #000;
--title: #060606;
--paper: #F7EFDC;
--pill: #FFFFFF;
--btn: #FDFDFD;
--ticker: #FDF087;
--line: calc(1.5 * var(--u));
Everything is positioned in calc(N * var(--u)) or var(--au). Antialiased, geometricPrecision. No letterboxing; extra space is absorbed by full-bleed card + background.
STRUCTURE (DOM order)
1) .stage (fixed, inset 0, overflow hidden, bg #000)
2) Top ticker .ticker (height 28.4u, bg #FDF087, z-index 3)
- .track is a flex marquee of many identical spans: "PULSE PASS PREORDER IS OPEN"
- each span flex-basis 180.3u, font 700 11u/28.4u PInterTight, letter-spacing -0.18u
- animation tick 9s linear infinite from translate3d(-125.3u,0,0) to translate3d(-305.6u,0,0)
3) main.card (rounded 36u, overflow hidden, bg paper, isolation isolate)
top 38.5u, left/right 11u, bottom -40u
4) .bg inside card, full viewport sized, overflow hidden, z-index 0, paper fallback, contains the video
5) Logo link .logo (aria-label "Pulse home") at left 20.86u, top 22.93u, 51.41u x 49.33u, rotate 4.92deg, z-index 4
- outer img of logo PNG
- .lg-disc white circle clip-path circle(40.5% at 50.7% 49.8%)
- .lg-spin same clip with inner logo img
- hover: inner glyph spins rotateY 0→720deg over 0.95s cubic-bezier(.2,.75,.25,1)
6) .navr at right 24u, width 863.5u, height 110u
Six 3D cube-roll pills (uppercase PInter 600 13.5u, letter-spacing -0.42u), height 41u, top 26.5u:
- Try banking --hc:#F9DD37 left 0 width 142u
- Pass --hc:#54A3F8 left 143.5u width 92u
- Earn --hc:#EA3A06 left 236.3u width 82.4u
- Benefits --hc:#60EC9D left 322u width 117.5u
- Manual --hc:#E7C5FE left 442.3u width 103.4u
- Platform --hc:#54A3F8 left 546.3u width 130.4u
Plus button .plus 44.5u circle, white, 1.5u black stroke, left 680u, top 25.3u
- SVG plus (horizontal + vertical 2px strokes) that on hover rotates into a minus (pl 180deg, pv 90deg)
- when expanded, plus rotates 45deg into X
ACCESS APP CTA .cta 136u x 44u left 727.5u top 25.5u, black face / --hc:#55A2F8
7) Glass menu #menu (role=menu), hidden by default, opens from plus
- rgba(255,255,255,.62), backdrop-filter blur(18px) saturate(1.4), black 1.5u border, radius 26u
- items: Try banking, Pass, Earn, Benefits, Manual, Platform (class pri, hidden on desktop), then Security, Help centre, Careers, ACCESS APP (mcta, hidden on desktop)
- pills: white, black border, uppercase, hover invert to black/white
- JS: click plus toggles aria-expanded; click outside / Escape / choosing a link closes; arrow keys cycle items; Tab at ends closes
8) section.hero 1280u x 800u, centered, pointer-events none except buttons
ART BOX .art left 240u top 140u, 810au x 400au
- Hidden SVG defs path id="pw" that draws the word PULSE (black #060606). Reconstruct the original PULSE wordmark as 5 letters cut from that shared path via <use href="#pw"> with these viewBoxes:
P: left 78au width 145au viewBox="318 121 145 452"
U: left 223au width 158au viewBox="463 121 158 452"
L: left 381au width 80.5au viewBox="621 121 80.5 452"
S: left 461.5au width 146au viewBox="701.5 121 146 452"
E: left 607.5au width 127.5au viewBox="847.5 121 127.5 452"
- Each letter .lt is overflow-hidden, height 452au, top -19au, contains:
.bands of 6 horizontal slices (tops 47 / 106.667 / 166.333 / 226 / 285.667 / 345.333 au, height 60.067au) used only during intro shutter
.rise layer that later rises into place
- Stickers (absolute, pointer-events none):
rocket: left -45.13au top -27.43au 210.65x197.29au rotate -0.565deg
smile: left 409.96au top 83.33au 110.70x107.68au rotate -6.967deg
wallet: left 670.66au top 168.12au 156.51x142.79au rotate -4.546deg
coin: left 7.18au top 278.19au 125.96x114.68au rotate 0.922deg
- Three 4-point spark SVGs (white fill, black 1.3 stroke) near the coin:
(-12,284) 30x30 delay 0.80s; (116,322) 24x24 delay 0.90s; (34,370) 18x18 delay 1.00s
Headline .tag: "Make moves." then "Unbound." (two spans)
top 548.3u, width 1280u, center, PInter 500 56u, letter-spacing -1.9u, color #000
Buttons .btns left 402.5u top 636.5u gap 8.5u pointer-events auto
b1 175.5u x 59.5u "Access the app" --hc:#000 --hcol:#fff
b2 290.5u x 59.5u "Supported on every handset" with 8u external-link SVG --hc:#F9DD37
CUBE-ROLL HOVER (all .fx pills, CTA, hero buttons)
Each control is a 2-face CSS 3D cube:
- perspective 520u
- cube translateZ(-h/2) rotateX(0); on hover/focus-visible rotateX(90deg) in 0.22s cubic-bezier(.45,0,.2,1)
- front face: white (or black for ACCESS APP / Access the app), black 1.5u pill border
- back face: --hc color, starts opacity .35, becomes 1 on hover; front ghosts to .35
Only apply hover cube-roll inside @media (hover:hover).
INTRO CHOREOGRAPHY (must implement)
If not prefers-reduced-motion, add class "intro" on <html> immediately.
After fonts.ready + image decode (timeout fallback 1200ms), add class "play", then remove intro+play after 2300ms.
Timings from first paint:
- 0.00s wordmark shutter: 6 bands per letter, each .bin animates translate 0 → -390au over 0.62s cubic-bezier(.55,0,.35,1). Stagger band delays per letter (P: 0.13/0.05/0.19/0.09/0.23/0.15, then +0.05s per next letter).
- 0.60s letters .rise from +452au to 0 over 0.95s cubic-bezier(.16,1,.3,1), 65ms stagger: P 0.600, U 0.665, L 0.730, S 0.795, E 0.860
- stickers pop 0.66s cubic-bezier(.3,.7,.4,1): scale .55→1.14→.97→1 with start rotate --r0
rocket .33s --r0:-55deg; smile .40s --r0:-28deg; wallet .60s --r0:26deg; coin .73s --r0:-22deg
- sparks twinkle 0.62s (scale 0→1.15→.9→0, fade out)
- button 1 lift .33s, button 2 .60s (lift 32u + fade)
- logo + nav drop in from -84u at 0.53s, 0.5s cubic-bezier(.16,1,.3,1)
- "Make moves." 1.27s, "Unbound." 1.53s
prefers-reduced-motion: no ticker, no intro, no transitions, no logo spin.
RESPONSIVE (must match these architectures, not a generic mobile restyle)
Compact nav (521–1040px height>540, OR max-width 520, OR landscape height≤540 and width≤1040):
- hide .pill and .cta; plus becomes burger (three 18px bars morph to X: b1l +6px rotate 45, b2l opacity 0, b3l -6px rotate -45)
- menu becomes 2-column grid of pri links + full-width black ACCESS APP; landscape-short uses 3 columns
Portrait phones / short landscape (max-width 520, or max-aspect 1/1 min-width 1041, or landscape max-height 540):
- --u based on min(100vw,520)/390
- hero becomes a centered flex column filling the card under the nav
- pills hidden; pri items shown in menu
Tablet 521–1040 width, height>541:
- --u clamp(0.9px, 100vw/1100, 0.95px)
- --au fits both width and height budgets
- hero centered column; buttons side by side auto width
- portrait tablet --tk: 1.14, larger tagline
Mobile portrait ≤520:
- --u clamp(0.9px, 100vw/390, 1px)
- tagline two stacked lines, size min(110au, 12.5vw, 48px)
- buttons stacked full width, column
Mobile landscape height≤540 width≤1040:
- hero CSS grid: art | tag / art | btns
- tagline stacked; buttons stacked in the right column
- ≤740px landscape: revert to column, one-line tagline, buttons in a row
Tall phones max-aspect 2/3 min-width 1041: stacked headline + full-width stacked actions.
JS BEHAVIOR
- Bind --bg-video from :root onto the <source> if they ever differ, then video.load()
- Intro play as specified
- Menu keyboard/pointer behavior as specified
- No frameworks
CONSTRAINTS
- Recreate the look of https://pulse-612.pages.dev but with the CloudFront video background and CloudFront sticker/logo URLs above.
- Cream illustrated scene is the VIDEO, not a still image.
- Black outlined pills, yellow ticker, cream card, oversized PULSE wordmark, four stickers around the word, two bottom CTAs.
- Do not invent extra copy, illustrations, or sections.
- Deliver only the complete standalone HTML.