类型：Site模板 · 收录：2026-11-05 01:12:23 · 源码：会员可见
# Prompt: Moxly finance hero ("Rose Nebula")
Build a single-file, one-screen **personal-finance landing hero** for a fictional app, **Moxly**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is deep-space and premium: two glowing planets, one domed above the headline and one rising from the bottom edge. They're wrapped in rose and coral nebula clouds on a near-black page, and a cluster of frosted-glass dashboard cards floats between them.
## Media
- **Scene video:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/62d1c4b6-faa9-4164-b790-8780c7cd6db9.mp4` (1180×784, 4s, muted, loops).
- **Content:** the two planets with rose and pink rims and coral nebula gas. The camera drifts slowly forward while the nebula swirls between the planets and stars twinkle.
- **Loop:** the last second crossfades into the first, so it loops without a jump and never plays in reverse.
- **Placement:** cover the 1448×1086 design canvas, extended 90px past each side. Use a soft radial mask at the edges, and fade it in (0.8s) once its first frame is ready.
- **Fallback scene:** until the video can play (and on phones), the planets are painted procedurally on two canvases. Each is a dark disc with a rim-light colour ramp from white-pink through `#d064d0`-type pinks to coral `#f04a6a`, with a soft halo. Behind them is a radial haze from wine `#4c2c3a` to the page colour.
- **Rule:** nothing in the scene is animated in code. Only the video moves the scene.
## Frame and scaling
- **Frame:** one **1448×1086 design canvas**, scaled by `s = min(vw/1448, vh/1086)`.
- **Sizing:** the stage grows to fill the viewport (`W = vw/s`, `H = vh/s`), so the scene bleeds to every edge. The composition is centred horizontally.
- **Portrait screens and phones:** switch to a scrolling flow layout with the same components.
## Type and colour
- **Font:** a neo-grotesk display face (Inter Display style, 300/400/500), with a slightly tight tracking of −.01em.
- **Colours:**
- page `#050718`, text `#f5f5f8`, sub copy `#cfcdd8`, nav `#a4a5ad`
- accents rose `#f472b6` → coral `#fb7185`
- glass cards with a 1px gradient border and an 18px backdrop blur
- **Headline:** "Take Control" in white, then "for your Finances" in a rose-to-peach gradient.
## Layout (design px)
- **Nav:**
- **Logo:** a three-shape rose and pink mark plus "Moxly" (24.6px).
- **Centre pill:** "Home · About · Services · Pricing · Solition", with Home highlighted.
- **Right:** "Eng ⌄" and an outline "Start now" pill.
- **Hero:** centred under the top planet.
- Headline "Take Control / for your Finances", about 96px, light weight.
- Two-line sub "Discover a user-friendly platform for tracking / over 3,000 financial assets."
- A dark pill CTA "Start free now" with a pink round arrow knob.
- **Balance frame:** in the centre, a glowing rose glass card.
- "Total Balance", "$5,237.34" with an eye icon.
- "Income $2,252.22" and "Expense $2,252.22".
- **Cards around it:**
- **Left:** "Expenses Report" (a ring chart "$2,252.22, Total expenses") and "Saving Budget" ("$5,352.22, updated today").
- **Centre:** empty glass panels: "updated today", "Emergency" and "Transactions" with a "See all" chip.
- **Right:** "Assets", three rows (Save for a Car, Save for Education, Vacation Fund) with progress rings; then "You Goals" with "House by the Sea", "$5,352.22 out of $7,000" and a rose progress bar.
- **Texture:** a faint noise grain over everything (soft-light, 7%).
## Motion (UI)
- **Entrance:** one Web Animations timeline.
- The brand, menu and Start now pill drop in.
- The headline lines rise, then the sub and CTA.
- The balance frame rises with a soft blur-out, and the cards follow in a stagger.
- **Hover:** the CTA arrow shifts 3px.
- **Reduced motion:** no entrance and no video.
## Phones and tablets
- **Flow:** nav with a burger menu, a centred hero, the painted planets scaled behind it, then the cards in 1–3 columns.
## Acceptance check (1440×960)
- The rose nebula planets frame the headline, the balance card glows at the centre, and the cards sit around it on both sides.
- The nebula visibly swirls and the camera drifts, with no jump at the loop point.
- **Content:** no real brands.