类型： · 收录：2026-10-26 23:39:21 · 源码：会员可见
Build one standalone full-viewport landing section for “octaform”. One HTML file, no frameworks, no extra sections. Match this specification exactly. Do not invent copy, colors, spacing, or components.
TITLE
octaform — 3D Canvases in Seconds
BACKGROUND VIDEO
Full-bleed, behind everything, z-index -1. Container background #2a6fd0. A single video fills the container with object-fit: cover.
src exactly:
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261005_173819_1824a786-3801-429e-8662-9b70d022c271.mp4
Attributes: autoplay muted loop playsinline. Do not download it and do not substitute a local file or poster image.
Accessible name on the background: “An iridescent pearl octopus floating above a blue salt-flat lagoon beside a glass sphere”.
object-position: 60% 50% on desktop; 62% 50% on tablet; 66% 50% on portrait phones.
Page fallback color behind the stage: #1f74d4. html and body are height 100%, overflow hidden.
SCALE SYSTEM
Design artboard is 1280×800. One unit:
--u: min(100vw/1280, 100vh/800), and 100dvh when supported.
Every measured size, radius, offset, and font size is that unit times the number below. Blocks pin to their own screen edges. No empty bands, no centered page column.
COLORS
--navy #1a3058 (all dark text)
--blue #1749a8 (solid buttons)
--card rgba(22,71,164,.97)
--glass rgba(255,255,255,.75)
--glass-weak rgba(255,255,255,.40)
--chip #3e72dc
--ink #04070e
Focus ring: 2u solid white, offset 2u.
FONTS
Display: “OF Display”, geometric gothic / ITC Avant Garde metric (TeX Gyre Adventor). Weights 400 and 700. Files assets/of-display-regular.woff2 and assets/of-display-bold.woff2, font-display: block.
Text: “OF Text”, Helvetica metric (TeX Gyre Heros). Weights 400 and 700. Files assets/of-text-regular.woff2 and assets/of-text-bold.woff2. ascent-override 77%, descent-override 23%, line-gap-override 0%.
Condensed: “OF Text Cn”, bold only, assets/of-text-condensed-bold.woff2, same metric overrides.
Body stack: "OF Text", "Helvetica Neue", Helvetica, Arial, sans-serif. Color navy. Antialiased, geometricPrecision.
If the woff2 files are present, use those exact @font-face rules. Do not swap in a different display face.
DESKTOP (1100px and up) — composition
Stage is position relative, 100vw by 100vh/100dvh, overflow hidden, isolation isolate.
Logo, top-left. Link, aria-label “octaform home”. Left 16u, top 14u, height 48u.
Mark is an inline SVG, viewBox “16 14 40 48”, drawn size 40×48u:
- small circle cx 25.4 cy 20 r 6.7 fill #3a64cc
- large circle cx 35.1 cy 42 r 17.4 with radialGradient id ofSphere, cx 30% cy 42% r 78%: stops #557ddf at 0, #3d62c2 at .42, #25408b at .78, #1c336e at 1
- white highlight ellipse cx 28.7 cy 25 rx 5.9 ry 5
Wordmark “octaform” in OF Display 700, 31.4u, line-height 1, letter-spacing 0.5u, absolute, left 43u, top 6.6u, nowrap.
Glass menu bar. Absolute, top 16u, left calc(50% - 216u), width 426u, height 50u, radius 16u, background glass, backdrop-blur 12u.
Links are absolute, full height, vertically centered, padding-top 2u, 17.4u, letter-spacing 0.1u, nowrap, navy:
- Preview, left 16.7u, class chev-after
- chevron svg left 85u
- Showcase, left 112.8u, class chev-after
- chevron svg left 204u
- Tutorials, left 233u
- chevron svg left 325.5u
- Compare, left 344.8u, class chev-before
Chevron: viewBox 0 0 9 5, size 9×5u, top 23u. Path “M.8.8 4.5 4.2 8.2.8”, no fill, stroke #1a3058, stroke-width 1.6, round caps and joins. All hrefs are #.
Right actions, one gap system on the masthead: --edge 30, --build-w 120, --demo-w 119, --gap-btn 12, --gap-link 24.
- “Begin” text link. Top 16u, height 50.5u, right (edge + build-w + gap-btn + demo-w + gap-link)u, 17.4u, letter-spacing 0.1u, padding-top 2u.
- “Book a Demo”, class btn btn--glass top-demo. Top 16u, width demo-w, right (edge + build-w + gap-btn)u.
- “Build Today”, class btn btn--solid top-build. Top 16u, width build-w, right edge.
Buttons: height 50.5u, radius 16u, 17.4u, padding-top 2u, nowrap, centered. Glass: glass-weak fill, 1u solid rgba(26,48,88,.78), blur 10u. Solid: #1749a8, white text. Hover: brightness 1.06.
Burger is display none. .nav-panel and .actions are display: contents.
Hero copy, pinned bottom-left. Left 72u, bottom 39.5u.
H1, OF Display 400, 60u, line-height 65u, letter-spacing 0.72u, relative left -2.2u, nowrap. Two masked lines:
line 1 “3D Canvases”
line 2 “in Seconds”
Each line is a block span.ln wrapping a block span.
Subcopy, data-intro: “No-Code Creator for Fresh 3D Webpages”. 22.1u, line-height 24u, margin-top 10u, width 320u, relative left -1.3u.
CTA row, relative, height 50.5u, margin-top 19u.
- “Book a Demo”, btn btn--light hero-demo: left -1.75u, width 119.5u, height 50.5u. Light button: rgba(255,255,255,.85), inset 1u shadow rgba(26,48,88,.75), blur 10u.
- “Build Today”, btn btn--solid hero-build: left 125u, width 121u, height 50u.
Explore card, bottom-right. Link. Right 46u, bottom 40u, 200×160u, radius 16u, card color, white text, padding 15.4u 0 0 15.6u, 28.5u, line-height 34u, letter-spacing 0.15u. Text exactly:
Explore now
& step in
Arrow, decorative, pointer-events none. Right 70.5u, bottom 53u, 16×30u. viewBox 0 0 16 30. Path “M8 0v27.6M1.6 20.7 8 27.1l6.4-6.4”, no fill, stroke white, stroke-width 1.5.
Chat pill, bottom-right. Right 16.5u, bottom 11.5u, 131.5×46.5u, radius 23.25u. Background linear-gradient(90deg, #0c0c12, #04070e 70%). White, 12.7u, letter-spacing 0.1u.
Icon: 24×24u, left 13.6u, top calc(50% - 12u). Circle r 12 fill #3e72dc. Path “M14.75 7.44A4.9 5.7 0 1 0 14.75 14.76”, no fill, stroke black, stroke-width 3.1.
Label “Talk to us?” absolute, left 47.7u, full height, flex centered, padding-top .19em, line-height 1, nowrap.
COMPACT HEADER
Applies to tablet, short landscape, landscape phones, and portrait phones:
(min-width 600px and max-width 1099.98px and min-height 500px),
or (landscape and max-width 1099.98px and max-height 499.98px),
or (landscape and max-width 599.98px),
or (max-width 599.98px and portrait).
Show a burger. Hide the inline menu, Begin, and top Book a Demo inside a closed glass dropdown. Build Today stays visible.
Burger: flex, centered, top max(16u, safe-area-top), right 30u, 50.5×50.5u, radius 16u, glass, blur 12u. Icon 20×14u, three rounded #1a3058 strokes, stroke-width 2, path “M1 1h18M1 7h18M1 13h18”. When aria-expanded true, the strokes scaleX(.82) from 10px 7px. Transition transform and opacity .2s.
Top Build Today moves to right 90.5u, top max(16u, safe-area-top).
Dropdown .nav-panel: flex column, absolute, z-index 5, top max(16u, safe-area-top) + 60.5u, right 30u, width 300u, padding 8u, radius 16u, glass, blur 12u. Closed: opacity 0, visibility hidden, translateY(-6u), transition opacity and transform .18s, visibility delay .18s. Open (masthead data-menu="open"): opacity 1, visible, no transform.
Inside it the menu becomes static flow, transparent, column. Links and Begin are static, min-height max(46u, 44px), padding 2u 14u 0, gap 8u, radius 10u, font-size max(17.4u, 16px). Desktop chevrons hidden. chev-after draws the chevron after the label and chev-before before it, via assets/chevron.svg, 9×5u. Hover rgba(255,255,255,.55). Begin has margin-top 4u. Top Book a Demo becomes static, width auto, margin-top 6u, min-height 44px.
TABLET
600–1099.98px wide and at least 500px tall.
--u: min(1px, max(.86px, min(100vw/1280, 100vh/800), min(100vw/900, 100vh/1100))), using 100dvh when supported.
Video object-position 62% 50%.
Copy left max(28px, min(72u, 6vw)), bottom 39.5u plus safe-area-bottom.
Explore, arrow, and chat keep their corners and add safe-area-bottom. Chat font-size at least 12px.
MOBILE LANDSCAPE
Landscape and (max-width 1099.98px and max-height 499.98px), or landscape and max-width 599.98px.
--u: min(1px, max(.72px, min(100vw/780, 100vh/520))), 100dvh when supported.
Same corner composition as desktop. Clear notches.
Logo left 16u plus safe-area-left.
Burger right 30u plus safe-area-right, at least 40×40px.
Build Today right: 40u + max(50.5u, 40px) + safe-area-right, height at least 40px.
Dropdown right includes safe-area-right. Top is header plus 10u. Width 440u. Two columns, gap 8u. Menu spans both columns and is itself two columns. Begin margin-top 4u.
Copy left max(24px + safe-area-left, min(72u, 6vw)), bottom plus safe-area-bottom.
Explore, arrow, and chat add safe-area-right and safe-area-bottom. Chat at least 12px.
MOBILE PORTRAIT
max-width 599.98px and portrait.
--u: max(.82px, min(100vw/390, 100vh/760)), 100dvh when supported.
Video object-position 66% 50%. Overlay on .bg::after: linear-gradient to top, rgba(251,248,245,.94) at 0, rgba(251,248,245,.82) at 30%, transparent at 52%.
Logo left 14u, top max(14u, safe-area-top).
Burger top max(14u, safe-area-top) + 3u, right 14u, at least 44×44px, radius 14u.
The whole .actions group becomes the dropdown: grid, two columns, gap 8u, absolute, z-index 5, left 14u, right 14u, top max(14u, safe-area-top) + 57u, padding 8u, radius 16u, glass, blur 12u. Same open/closed motion as the compact panel. .nav-panel is display contents. Menu and Begin span both columns. Menu is flex. Begin margin-top 0. Book a Demo and Build Today sit side by side, static, width auto, min-height 44px, height 50.5u. Build Today radius 16u.
Copy: left 20u, right 20u, bottom max(80u, safe-area-bottom + 70u).
H1 46u / 50u, left -2.6u.
Paragraph at least 16px, preferred 19u, line-height 23u, width 300u, margin-top 8u.
CTA row margin-top 20u, height 50u. Book a Demo left 0, width 171u. Build Today left 179u, width 171u.
Explore lifts to the top-right under the header: right 20u, top max(14u, safe-area-top) + 70u, 150×104u, 20u / 25u, padding 12u 0 0 14u.
Arrow: right 38.5u, top max(14u, safe-area-top) + 140u, 12×22.5u.
Chat: right 20u, bottom max(18u, safe-area-bottom + 8u), at least 12px.
Reduced motion: kill dropdown and burger transitions. Otherwise buttons and burger use filter .15s.
MENU BEHAVIOR
Burger aria-controls site-menu, aria-expanded false, label “Open menu”. Closed state data-menu="closed".
Toggle on click. Open sets data-menu open, aria-expanded true, label “Close menu”, and focuses the first link after 30ms without scrolling. Close restores focus to the burger only when requested.
Escape closes and returns focus. Outside click closes. On a compact viewport, clicking a menu link closes it. Focus leaving the menu closes it. Crossing the compact breakpoint closes it.
ENTRANCE
Before paint, if Web Animations exist and prefers-reduced-motion is not reduce, add class intro on the documentElement. Safety timer removes intro after 4500ms.
While intro is on, every [data-intro] is opacity 0. Headline lines are overflow hidden (overflow-y clip), and the inner spans start at translateY(105%).
Run once, after document.fonts.ready, capped at 800ms, on the next frame. Skip any element that is not shown. Use element.animate, fill both. When every animation finishes, or the burger is clicked, remove intro, cancel the animations so the authored CSS is the final frame, and clear the safety timer.
Easing:
OUT cubic-bezier(.16,1,.3,1)
LINE cubic-bezier(.19,1,.22,1)
WIPE cubic-bezier(.76,0,.24,1)
Sequence:
1. Visible masthead [data-intro] elements, sorted left to right: opacity 0 and translateY(-10px) to full and none. 800ms, delay 50ms + index×60ms, OUT.
2. Each headline inner span: translateY(105%) to none. 1050ms, delay 180ms + index×90ms, LINE.
3. Paragraph: opacity 0, translateY(14px) to full. 800ms, delay 520ms, OUT.
4. Hero Book a Demo: translateY(10px). 750ms, delay 660ms, OUT.
5. Hero Build Today: same, delay 740ms.
6. Explore card wipes from the edge it is pinned to. If its top is above mid-viewport, clip from the top and start translateY(-8px); otherwise clip from the bottom and start translateY(8px). Clip uses the card’s computed top-left radius. 950ms, delay 780ms, WIPE. Opacity stays 1.
7. Chat: translateY(10px). 700ms, delay 1180ms, OUT.
8. Arrow: scaleY(0) to none, transform-origin 50% 0. 550ms, delay 1280ms, OUT.
If nothing is shown, finish immediately.
OUTPUT
Return one complete HTML document only. Inline the CSS and the two scripts. Use the exact strings, the exact CloudFront video URL, the exact SVG geometry, and the exact unit measurements above.