类型： · 收录：2026-10-26 23:39:21 · 源码：会员可见
Recreate the “Money Talks — Learn the Language” landing page as one self-contained HTML file. Match this specification exactly. Do not add a video, a CloudFront URL, stock footage, or an <video> element. This site has none. The coins are generated in WebGL with Three.js, not image or video assets.
OUTPUT
- One HTML document that runs from a double-click (file://) or any static host.
- Inline all CSS. Bundle Three.js (r180 or current) into the page so there are no external JS imports at runtime.
- Embed these exact Latin woff2 files as data:font/woff2;base64 @font-face sources (or load these URLs if a network is allowed):
Instrument Serif 400:
https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2
Manrope variable 200–800:
https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2
- font-display: swap. Fallbacks: Instrument Serif → Georgia, serif. Manrope → Arial, sans-serif.
- Favicon: 64×64 SVG, black rounded square (rx 16), #eaff70 circle r=23 at center, black four-point diamond “m32 14 16 18-16 18-16-18Z”.
- Title: Money Talks — Learn the Language
- Meta description: Build practical money skills, make confident financial decisions, and create a more secure future—one smart step at a time.
- theme-color #000000. color-scheme dark. Background and page color #000 / #f7f7f5.
- Accent --accent: #eaff70.
GLOBAL LAYOUT
- Design canvas 1920×1080. Desktop (>900px): set --stage-scale to min(viewportWidth/1920, viewportHeight/1080). Each .stage is 1920×1080 then zoomed by --stage-scale so type and controls scale together. Extra viewport height expands the coin area; do not letterbox.
- html overflow-x hidden. scrollbar-gutter stable. Screens are 100svh except where noted.
- Fixed chrome stays on screen while scrolling: wordmark top-left, nav top-center.
- Menu items and Explore are visual placeholders. They do not navigate.
- Reduced motion (prefers-reduced-motion: reduce): no autonomous coin travel, bob, or decorative turns. Pointer drag still rotates coins. Scratch lag and tilt are removed. Preloader coin and sweep stay still.
PRELOADER (visible before JS)
- Full-screen black overlay, z-index 100, centered column.
- 76×76 SVG glass coin: circle with a four-point star cutout. Gradient stops #152c37, #80d2f0, #e7e8ff, #7954b9, #10202e, #c4eeff. Rim gradient #d9f8ff, #5c6ec0, #faf6ff, #b175dd, #8fdbec.
- CSS spin 3.2s infinite, perspective(400px) rotateZ(-12deg) rotateY 0→360deg, cubic-bezier(.4,0,.6,1).
- Brand “Money Talks.” Instrument Serif, clamp(42px, 6vw, 66px), letter-spacing -1px.
- 152×2px track #242424 with a #eaff70 sweep, 1.8s infinite, cubic-bezier(.65,0,.35,1).
- Status “Loading” in Manrope 11px #92928d, letter-spacing .5px.
- After 15s if still loading: “Taking a little longer. Still loading.” and a “Try again” button (min-height 44px, padding 0 24px, #eaff70 on #000, Instrument Serif 18px, radius 4px).
- On script/stylesheet failure: “Couldn’t load the site. Please try again.”
- Hide the rest of the page with visibility:hidden until fonts, layout, and two animation frames are ready, then fade the overlay out over 420ms. While loading, html[data-loading=true] { overflow: hidden }.
FIXED CHROME
- Wordmark “Money Talks.” Instrument Serif 40px, letter-spacing -0.7px. Desktop: top calc(32px * scale), left calc(72px * scale), scaled from top-left.
- Nav pill: 268×40, padding 4px, gap 2px, radius 4px, background #232323. Items Home, About, Services, Contact. Each height 32px, padding 0 13px, radius 2px, Instrument Serif 16px, color #9b9b9b. Hover #fff on #333. Active Home: #000 on #eaff70. Transitions 180ms.
- At ≤900px: wordmark top 23px left 20px at 30px. Hide the pill. Show a 44×44 hamburger at top 16px right 20px, background #232323, two 22×1px bars, gap 6px. Open state rotates bars into an X (translateY ±3.5px, ±45deg, 180ms). Dropdown 180px wide, 6px padding, column, 44px rows, Instrument Serif 20px, border 1px solid #ffffff12, shadow 0 12px 32px #0008. Close on item click, outside pointerdown, Escape (return focus to the button), or leaving the mobile breakpoint. A fixed top fade 80px tall (linear-gradient #000 → transparent) sits under the header, z-index 9.
HERO
- Section label “Welcome to Money Talks”. Coin canvas fills from top 76px to 471px above the bottom of the stage.
- Six iridescent glass coins drift right to left above the headline on fixed lanes. Loop length keeps them spaced. Full pass takes 28 seconds. Each coin completes one turn per pass and only wraps after it has fully left the screen. Slight vertical bob: sin(time) amplitude 0.16 world units. Pointer hover shows grab; drag spins that coin only (trackball, including the hole in the center). Drag never moves a coin off its path. Vertical touch on mobile still scrolls the page (touch-action: pan-y); horizontal drag rotates.
- Coin diameter about 601 design pixels at 1920×1080 (world scale 2.08×1.13×1.2, 100 px per world unit, visual radius scale×1.065).
- Six shapes, one shared glass material: Petals (4 petal holes + small hub), Diamond (rounded 4-gon hole), Hexagon (rounded 6-gon hole), North star (concave 4-point hole), Four diamonds (4 small diamonds), Clover (4-lobe hole + hub). Extrude depth 0.16, bevel 0.065, plus thin torus rims on both faces.
- Material: MeshPhysicalMaterial color #edf3ff, metalness 0.94, roughness 0.035, transmission 0.2, thickness 0.38, ior 1.75, clearcoat 1, clearcoatRoughness 0.025, iridescence 1, iridescenceIOR 1.8, thickness range about [120–430] varying slightly per coin, dispersion 0.85, envMapIntensity 1.7, attenuation #b1b9ed. Procedural studio environment (soft white panels plus a spectral oil-slick gradient), ACES filmic tone mapping, exposure 1.08. No HDR file and no photograph texture.
- If WebGL fails, show six SVG gradient rings in the same layout.
- Headline, centered, bottom 32px, width 1500px:
H1 “Money Talks. Learn” / line break / “the Language”
Instrument Serif 80px, weight 400, line-height 1, margin 0.
Eyebrow, 35px below, Manrope 18px / 25px, uppercase:
Practical guidance for smarter money decisions and a more secure financial future.
Body, 15px below, Manrope 16px / 21px, color #e1e1e1:
Build practical money skills, make confident financial decisions, and
create a more secure future—one smart step at a time.
Button EXPLORE: 117×40, radius 5px, #000 on #eaff70, Instrument Serif 16px uppercase, margin-top 36px. Hover #f1ffa5 and box-shadow 0 0 26px #eaff701c. Active translateY(1px).
- Mobile ≤900px: section height max(100svh, 760px). Coin band top 88px, height clamp(250px, 42svh, 430px), coin diameter min(72vw, 300px). Hero inset 20px, H1 clamp(46px, 11.8vw, 64px), eyebrow 12px/18px letter-spacing 0.7px, body 14px/21px, hide forced line breaks, Explore 130×44 Instrument Serif 18px.
- Short landscape ≤900px and height ≤500px: coins on the left 44% width, copy on the right from 47%, left-aligned, H1 38px.
STORY (pinned scroll)
- Section height 240svh. Inner pin is sticky, 100svh.
- One paragraph, Instrument Serif 80px, line-height 1, letter-spacing -0.5px, width 1620px, centered. Unrevealed color #303030. As the user scrolls, words lighten from rgb(48,48,48) to rgb(247,247,247). Reverse scroll dims them again.
- Exact copy, with two inline coin slots:
“Money shapes the choices we make every day, but feeling confident with it is a skill you can learn. Understand where your money goes [COIN] and build habits that give you room to breathe. A clear budget, a little set aside, and a goal worth saving for [COIN] can turn everyday decisions into steady progress. Learn the basics, make a plan, and put your money to work for the life you want.”
- Inline coin slots: desktop 94×90px, vertical-align -0.17em. The first slot is the travelling hero coin. The second is its own glass coin (North-star cutout), 84 design pixels. Each stays still until the reveal reaches it, then one full turn over 1.6s (smoothstep ease), then one turn every 48s. Scrolling back freezes the pose. Offscreen and reduced-motion coins do not spin.
- Mobile: font-size clamp(26px, 6.8vw, 36px), line-height 1.03, content width calc(100% - 40px), coin slots 1.25em × 1.2em.
ONE TRAVELLING COIN
- On the first scroll away from the top, the hero coin nearest the viewport center is removed from the hero scene and drawn on one fixed transparent canvas. Same mesh, no duplicate at the destinations. Scroll drives position, rotation, and size:
hero size → first story slot (84px desktop) → budget coin (same diameter as the hero) → newsletter scratch tool (185px inside a 200px dock).
- Path phases: hero, hero-to-story, story, story-to-budget, budget, budget-to-newsletter, newsletter.
- Scroll back to the top restores that mesh to the hero conveyor. Other hero coins keep their spacing while it is away.
- At the budget dock it slowly rotates once per 48s and can be pointer-dragged in place.
- Mobile budget is a tall column: land when the budget coin reaches viewport center, leave while it is still visible.
BUDGET
- Heading “Make every dollar count.” Instrument Serif 38px.
- Three columns, 480 / 640 / 680-tall coin / 480, gap 60px, total width 1720px, vertically centered.
- Left: “$5,000.00” Instrument Serif 104px, letter-spacing -2px. Caption “YOUR MONTHLY TAKE-HOME” (labels are 11px, letter-spacing 1.8px, uppercase, #999). Rows with hairline #ffffff16 and accent chips #eaff7012 / #eaff70 12px:
Income type / After tax
Plan period / One month
Savings rate / 20% of income
Saving toward / Emergency fund
- Center: the travelling glass coin, slowly rotating, inside faint orbit strokes (#ffffff16) that curve around it. Pointer or drag turns it. aria: “The glass coin from the first screen, slowly rotating on its axis.”
- Right heading “WHERE YOUR MONEY GOES”.
Spent this month — 70% OF INCOME — −$3,500.00 — bar 70%
Set aside for the future — 20% OF INCOME — +$1,000.00 — bar 20%
Amounts Instrument Serif 54px. Bars 8px tall, track #242424, fill #eaff70, masked into segments (repeating gradient, 5% pitch, 3px gaps).
“STILL YOURS” / “$500.00” at 58px / “Room to breathe. What’s left after spending and saving this month.” 12px/19px #999.
- Mobile: one column, width calc(100% - 40px), max 560px, padding 104px 0 64px. H2 clamp(34px, 8.8vw, 46px). Income clamp(62px, 18vw, 92px). Coin slot uses the mobile hero diameter. Metric amounts clamp(44px, 12vw, 58px). Balance amount clamp(48px, 13vw, 62px).
NEWSLETTER
- H2 “Money wisdom, in your inbox.” Instrument Serif 80px, centered, width 1034px.
- Scratch card 1034×220, radius 8px. Underneath, a form on #d4d4d1, inert until revealed: email input placeholder “Your email address”, Instrument Serif 64px, color #171717, placeholder #8d8d88; button “Subscribe” plus “↗”, height 68px, padding 0 22px, radius 4px, #151515 on #eaff70, Manrope 14px, arrow 28px. Hover #f1ffa5.
- A gray protective canvas covers the form. The arriving glass coin (200px, drop-shadow 0 15px 16px #0008) is the brush. Dragging leaves narrow irregular scratches (brush radius 18px desktop, smaller on mobile). The coin lags slightly and tilts with the stroke. Coverage is stored relative to the card and survives resize. At ≥72% uncovered, release clears the rest and focuses the email field. Enter or Space on the coin reveals it immediately for keyboard users. Aria label: “Drag the coin across the protective layer, or press Enter to reveal the sign-up form”.
- Description, Manrope 16px/21px #dfdfda:
Practical ideas to help you budget better, save with purpose,
and feel more confident about money.
- Valid email shows exactly: “Sign-ups open soon. Your email hasn’t been sent yet.” in #eaff70 13px. Do not send or store the address.
- Footer, absolute bottom 32px, left/right 72px, space-between, #777 16px/20px:
“Small lessons. Better money habits.” and “© 2026 Money Talks.”
- Mobile: section height max(100svh, 760px). H2 clamp(44px, 11.8vw, 58px). Card height 184px, radius 7px. Form stacks, padding 22px, input clamp(32px, 9vw, 44px), button 44px. Scratch coin and dock 112px. Dock sits lower-right. Footer 12px, inset 20px.
MOTION AND PERFORMANCE
- Pause WebGL when the tab is hidden or the canvas is offscreen.
- Pixel ratio capped at 1.75.
- Focus-visible: 2px solid #fff, outline-offset 6px (newsletter submit uses #151515).
- Do not add sections, testimonials, pricing, a video background, or extra navigation destinations.