类型：Site模板 · 收录：2026-10-17 12:02:20 · 源码：会员可见
Build a single-page HTML hero exactly like this:
Page: background #1d1dd8, font Inter (Google Fonts, weights 400/600/800), white text. Hero is 100svh, min-height 640px, overflow hidden.
Preloader: fixed full-screen overlay in #1d1dd8, z-index 50, centered 44px spinning ring (2px border rgba(255,255,255,.18), top border white, 0.9s linear spin) with "LOADING 0%" below it (11px uppercase, letter-spacing .12em, rgba(255,255,255,.72)). The percentage updates from the model-viewer "progress" event. On model "load" (or error, or a 20s timeout) the overlay fades out over .7s and the hero text animations start. Nothing else is shown before that; no image fallback.
Nav (fixed, padding 26px 32px): top-left a 36px round "×" button, background rgba(255,255,255,.14) with backdrop-blur 10px. Top-right two pills "En" (active, white bg, text #1d1dd8) and "Website", 11px uppercase, letter-spacing .06em, padding 10px 15px, radius 999px, same translucent bg.
Headline: "GO" and "ON" as two spans, Inter 800, font-size clamp(110px,24vw,420px), line-height 1, letter-spacing -.01em, gap .42em, absolutely centered at translate(-50%,-56%), z-index 1. Each span fades up from translateY(40px) over 1s cubic-bezier(.2,.8,.2,1); second span delayed .12s. Animations are paused until the preloader finishes.
3D octopus: a square stage min(96vh,80vw) centered on top of the headline (z-index 2), floating up/down 16px on a 7s ease-in-out loop. Inside, a <model-viewer> (CDN https://cdn.jsdelivr.net/npm/@google/model-viewer@3.5.0/dist/model-viewer.min.js) loading this Higgsfield mesh:
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261013_011828_b5f61d42-d6ec-419a-ade1-52761d497230.glb
Attributes: camera-controls disable-zoom disable-pan auto-rotate auto-rotate-delay="0" rotation-per-second="18deg" interaction-prompt="none" shadow-intensity="0" exposure="0.95" environment-image="neutral" camera-orbit="0deg 0deg auto" min-camera-orbit="auto 0deg auto" max-camera-orbit="auto 45deg auto" field-of-view="24deg". CSS filter: saturate(1.45) contrast(1.12) brightness(.9) drop-shadow(0 30px 60px rgba(0,0,40,.5)). Transparent background, fades in over .9s on load.
Bottom center (36px from bottom): tagline "Design that's built to last and grow with your business", 12.5px, rgba(255,255,255,.72), max-width 270px; below it "OCTO®" in Inter 800 15px. Bottom-right: "DRAG TO ROTATE", 11px uppercase muted. Both fade up with the same animation, delayed .5s, also paused until the preloader finishes.
Parallax: on pointermove, shift the headline by up to ±4px opposite to cursor position.
Mobile (<640px): nav padding 18px 16px, hide the hint, headline gap .3em.