orbit flora

网站 · AI · 免费
内容预览

Build a **single-file** `index.html` full-viewport poster. No scroll. No frameworks. No redesign. Match layout, type, color, both image URLs, entrance choreography, mobile menu, and mouse morph-reveal **exactly**. --- ## 0. Document shell ```html Orbit — Secure system ``` - Root `` starts with class `anim` - `html, body`: `width/height 100%`, `margin: 0`, `overflow: hidden`, background `#161616` - Body: `"Orbit Sans", Arial, Helvetica, sans-serif`, color `#fff`, antialiased - CSS vars: - `--ink: #ffffff` - `--surface: #161616` - `--orb-reveal: cubic-bezier(.16, 1, .3, 1)` - `--orb-soft: cubic-bezier(.25, .8, .28, 1)` Structure: ``` main.viewport (fixed, inset 0, black) section.stage (absolute, inset 0, contain:strict, isolation:isolate) [all poster elements] ``` Z-order: wordmark `1` → flower `2` → corner copy `3` → brand/nav/pill `4`. Mobile: scrim `9`, sheet `10`, burger `12`. --- ## 1. Fonts (mandatory) Two custom TrueType faces, weight 400, `font-display: block`, embedded as `@font-face` data-URLs: 1. **`"Orbit Sans"`** — nav, pill, corner copy. Fallback: Arial, Helvetica, sans-serif 2. **`"Orbit Display"`** — giant wordmark only. Fallback: `"Times New Roman", Times, serif` Do **not** use Inter, Roboto, system-ui, or Playfair. Extract the original base64 TTFs from the existing `index.html` `@font-face` blocks if needed. --- ## 2. The two image URLs (use exactly — do not replace) Both are Higgsfield-proxied PNGs as webp `w=1280&q=85`. Transparent backgrounds. Pixel-art / h

……（完整源码请在站内查看）