类型：区块 · 收录：2026-10-26 23:39:21 · 源码：会员可见
[hidecontent type="vip1"]# Prompt: Ember Studio footer (Moon Sand)
Build a single-file, full-screen **website footer** for a fictional design-tools company, **Ember Studio**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is quiet and cinematic: a near-black night sky, a thin glowing crescent moon, and grainy pale-silver moon-sand dunes rising in the centre. Small white footer content sits across the top, and a giant white "Ember Studio" wordmark spans the full width near the bottom, in front of the dunes.
## Media
- **Plate:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/17b005b6-cb07-4e3d-bf5e-033fb3ae51f1.jpg` (2048×1360, 3:2). A black sky with faint stars, a crescent moon, and layered silver dunes with sand spraying off the crests. Use it as the footer background, `cover`, anchored to the bottom centre (50% 100%).
- **Motion:** a muted 4s loop of the same scene covers the plate with identical cover rules: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/00a7d47d-5e59-4123-bdec-8a84dbabb41a.mp4` (1600×1064).
- The camera glides forward and drifts right over the dunes while sand streams off the crests and the moon glow shimmers.
- The last second crossfades into the first, so it loops without a jump and never plays in reverse.
- Fade it in (0.8s) once its first frame is ready.
- **Rule:** nothing in the scene is drawn or animated in code. Only the footer UI animates.
## Scale and layout
- **Units:** a 1536×1024 (3:2) reference frame.
- `--sx` = container width / 1536, for horizontal spacing.
- `--s` = the same, capped by viewport height × 1.2/1024, for type and vertical spacing.
- `--w` = container width / 1536, for the wordmark.
- **Shell:** the footer is a full-height flex column with the content block on top, a flexible spacer, and the wordmark glued to the bottom.
- **Colours:**
- page `#121212`, white text
- tagline `#E5E4E5`, bottom bar `#D7D6D6`, column labels `#C2C1C3`
- **Font:** **Inter** (variable).
## Content block
- **Padding:** 98s from the top, 88sx on the left, 102sx on the right.
- **Top grid:** five columns, 524.5 / 242 / 228 / 284sx / auto.
- **Brand:**
- a 40×39 mark of three white wavy dune strokes, then "Ember Studio" at 34s (weight 400, tracking −.025em)
- the tagline "Powerful design tools for people who ship fast, every single day." at 19.6s on a 27s line, max 360s wide
- X and LinkedIn glyphs, 19s, 19s apart
- **Link columns:** an uppercase 12s label (weight 500), then links at 20s with a 20s row gap:
- Product: Features, Pricing, Changelog
- Company: About Us, Careers, Contact
- Resources: Documentation, Blogs, Community, Tutorials
- Legal: Privacy, Terms
- **Bottom bar:** 75.7s below the grid, 17s text: "© 2026 Ember Studio. All rights reserved." on the left. On the right, "Made with ♥ by Kitoro Studio", with the studio name underlined.
## Giant wordmark
- **Type:** "Ember Studio" in Inter weight 475 at 285.2w, tracking −.1015em, scaleX(1.035) from the bottom centre.
- **Position:** it spans almost edge to edge, with about 2.8w of the dunes showing beneath the letters, and sits in front of the scene.
## Motion (UI)
- **Entrance:** one CSS sequence.
- The logo wipes in from the left.
- The tagline, socials and the four columns settle up 9px in turn (.28–.52s).
- The wordmark unveils upward from a clip while its letters rise 18%.
- The bottom bar fades in at about 1.05s.
- **After it finishes:** the animations are removed, so the static styles take over.
- **Hover:** links dim to 70%.
- **Reduced motion:** no entrance and no video.
## Tablet and phone
- **Tablet:** the brand row on top, then the four columns in one row.
- **Phone:** the columns in a 2×2 grid, the bar stacked.
- **Below 1024px:** the sky is a flat page colour. The dunes still are shown above the wordmark, faded in from transparent, with no video.
## Acceptance check (1440×960)
- The links sit across the top over black sky, and the crescent moon and silver dunes rise in the centre.
- The giant "Ember Studio" spans the width at the bottom, with dunes visible beneath it.
- The camera visibly drifts and the sand blows, without a jump at the loop point.
- **Content:** no real brands.