类型：Site模板 · 收录：2026-10-08 21:01:22 · 源码：会员可见
Build one standalone HTML file for the Draftwise landing page. Output only the file. No explanation, no markdown fence, no extra sections. CSS and JavaScript stay inline. Do not fetch fonts, images, or video from anywhere except the URLs below. Do not invent copy, colors, or layout.
Title: Draftwise — The studio. Dream brilliant forms.
Theme color: #000000. Page background: #000. Dark color scheme.
Language: en. Viewport: width=device-width, initial-scale=1, viewport-fit=cover.
BACKGROUND VIDEO
Full-bleed, behind all content, z-index -1, black fallback, overflow hidden.
<video autoplay muted loop playsinline> with this exact src and no poster, no download, no local file:
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261005_143837_163b1a55-c5a0-4558-a4a4-634208c89cd6.mp4
The video fills the stage with object-fit: cover. Desktop object-position is center center. Tablet is 34% center. Phone is 30% center. Pointer events none.
A bottom fade sits on .bg::after: height 110 design pixels, linear-gradient 180deg from transparent at 0% through rgba(0,0,0,.08) at 55% to rgba(0,0,0,.18) at 100%. On phones that fade becomes 46% tall: transparent, rgba(0,0,0,.38) at 38%, rgba(0,0,0,.7) at 66%, rgba(0,0,0,.78) at 100%. Landscape phones return to the short 110-pixel fade. A top fade (.bg::before) is 90 design pixels and only appears when --wide is set: opacity 0.45 at 17:10 (--wide:.7) and 1 at 2:1.
FONTS
@font-face "Antonio Draft" from assets/antonio-draft.woff2, weight 400, font-display block.
@font-face "Inter Draft" from assets/inter-draft.woff2, weight 400 600, font-display block.
Body stack: "Inter Draft", Inter, "Helvetica Neue", Arial, system-ui, sans-serif.
Display stack for the headline: "Antonio Draft", Antonio, Oswald, "Arial Narrow", sans-serif.
Keep those local font URLs. Do not replace them with Google Fonts or system-only faces.
SCALE
Reference frame is 1280 x 800. One design pixel is --u.
Desktop: --u: min(100vw/1280, max(100dvh/800, 0.72px)). Hero axis --axis is -3.5 (the stack is centered on x=636.5).
Colors: --ink #ffffff, --nav #d9d9d9, --muted #bfbfbf, --dim #939393, --red #fb2b2e.
Every measured size, position, radius, gap, and type size is written as calc(N * var(--u)). The background and the nav/footer stretch to the edges. No letterboxing.
BREAKPOINTS
Desktop landscape, min-width 1120px and min-aspect-ratio 1/1: absolute coordinates on a stage whose height is max(100dvh, 800*--u). Nav is an absolute 80u bar. Hero children are absolutely positioned from a zero-size origin.
Tablet, 620–1119px and min-height 501px, also portrait at 1120px+: --u is clamp(0.9px, min(100vw/620, 100dvh/620), 1.5px). Stage becomes a column: nav, hero, glance, footer. Nav links collapse into a burger that opens a glass panel. Footer stays one row, laid out with grid.
Phone, max-width 619px, and short landscape under 1120px wide and 500px tall: --u is clamp(0.86px, min(100vw/365, 100dvh/600), 1.2px). Touch rows are at least 44px. The prompt field is 16px so iOS does not zoom. Lede wraps to about 34ch at a 12.5px floor. Footer stacks: reel on its own row, logos beside the award.
Landscape phone, 640–1119px, max-height 500px, landscape: --u is clamp(0.82px, 100dvh/440, 1.1px). Hero is a two-column grid, headline | prompt / lede / buttons. Menu panel is two columns. Footer returns to one row.
COPY, EXACT
Logo: Draftwise
Nav, left to right, with chevrons except Enterprise and Read: Pro plans, Toolkits, Agencies, Enterprise, Read, Method, Train, Members, Careers. Desktop x positions: 157, 252, 338, 433, 518, 571, 656, 724, 817. Train and Members use the softer chevron.
Ask us. Nav pill: Get results.
Headline, two masked lines: The studio. / Dream brilliant forms.
Prompt label (screen-reader only): Describe what you want to make. Visible value: A rare form.
Send button aria-label: Generate. Up-arrow icon.
Lede: Organize your campaign. Draftwise’s AI layout assistant builds the smart set: pages, ads, emails, social. On-brand, truly editable. Then resize it, translate it, ship it.
Buttons: Get results (ghost) and Contact teams (red).
Glance link to #preview: Glance here to preview, with a down chevron.
Reel button: Play our 60-second reel, with a play icon. It does not open a video.
Logo marquee, duplicated for the loop: FIREWALL, cada, snaptrude, dash0, Meta, Google. Wordmarks only, no brand logos. Desktop coordinates and sizes: FIREWALL 378,21 fs 14.67 ls 1.049; cada 479,15 fs 25.16 ls 0.48; snaptrude 576,20 fs 12.8 ls 0.29; dash0 689,19 fs 17.33 ls -1.895; Meta 777,20 fs 16 ls 0.44; Google 839,18 fs 17 ls -0.86.
Award: PitchDeck 2024, plus an inline laurel SVG reading Best Pitch / App of the Day.
DESKTOP MEASUREMENTS (design pixels, via --u)
Nav height 80. Logo at 24.6, 25.1, size 22.5 / line 24, weight 500, tracking 0.55.
Menu top 32, size 12.45 / 15, weight 500, color #d9d9d9. Ask us at right 170.6, top 34.6, size 11.6, color #dfdfdf.
Get results pill: right 55, top 23.8, 89.5 by 36.2, fully rounded. Dark vertical fill, brighter top and bottom rim, a larger softly lit capsule behind it.
Headline: width 480, left -240, top 194.3, size 50.77, line 54, tracking -2.15, word-spacing 1.2, first line word-spacing 3.2, centered, white.
Prompt panel: left -222.5, top 338, 446 by 134, radius 24.5. Fill rgba(38,38,36,.905), backdrop blur 22, saturate 1.05. A 3px rotating grey rim and an inner 1px dark stroke.
Field padding 16.5 / 56 / 20 / 18.2, type 12.2 / 17. The textarea text is transparent. A mirror shows #f6f6f6 and a red caret (#e0282a, 2.2 by 17, blink 1.05s steps). Send button is a 28.6 circle at 396.5, 87.6, red radial gradient, white up arrow, press scale 0.92.
Lede: left -240, width 480, top 482.8, size 9.6 / 14, color #bfbfbf, two centered lines.
Ghost button: left -124.5, top 523, 116 by 41, radius 21, dark fill, grey rim, inset highlight. Red button: left 5.5, top 526, 118 by 37, radius 18.5, red vertical gradient with edge glows and a 4px black ring. Hover brightens both to 1.12 where hover exists.
Glance: centered on the hero axis, 71.5 above the bottom, size 11.14, color #939393.
Footer: height 55, rgba(0,0,0,.33), blur 6, hairline along the top. Reel at left 25, top 9. Play chip 51 by 37, radius 7, #272727. Logos window starts at 296.5 from the left edge of a 1280 frame, width 680, masked at both ends, marquee 20s linear, pauses on hover. Award at right 36.5, top 11.5, size 10.3, color #dadada. Laurel SVG viewBox 4.4 3.1 49.2 27.3, drawn 59.5 by 31.
BEHAVIOR
Before first paint, add html.is-entering only if motion is allowed and CSS translate plus the Web Animations API exist. A 2.5s failsafe removes the class if the entrance never starts. While entering, nav, prompt, copy, buttons, glance, reel, logos, and award start at opacity 0. Headline lines start translated down 105% inside an overflow hidden mask. The caret is hidden. The background video and the footer bar are not animated.
Entrance timeline, once, Web Animations API, fill backwards, then styles are cleared: 0.10s line one rises over 1.05s; 0.20s line two; 0.34s logo; menu items from 0.40s staggered 0.03s; Ask us 0.66s; nav pill 0.70s; burger 0.76s; prompt panel 0.50s over 1.10s; send button 0.86s; prompt text writes on from 0.92s with the caret leading; lede from 0.90s; ghost CTA 1.04s; red CTA 1.11s; reel 1.24s; logos 1.28s; glance 1.36s; award 1.52s. Easings: expo cubic-bezier(0.16,1,0.3,1) for headline and send; settle cubic-bezier(0.22,1,0.36,1) for panels and buttons; quart cubic-bezier(0.25,1,0.5,1) for supporting items. Travel distances scale with the prompt height on desktop and tablet, and use 0.7 of that on phones. After the scaled animations finish, rebuild those elements so Chrome does not leave them on a fuzzy layer. Restart the caret blink. Dispatch entrance:done.
After the entrance, add .rim-live so the prompt rim rotates. The rim is one conic gradient of greys from #7e7e7e to #d6d6d6, 3s linear infinite, clockwise. Class ccw reverses it. It stays paused until the entrance ends, with a 4.2s fallback. prefers-reduced-motion stops the caret, the marquee, and the entrance, and parks the logo words in their measured positions on desktop or wrapped and centered on smaller screens.
Prompt: the mirror follows the textarea. The red caret shows only when the caret is at the end; otherwise the native caret is #e0282a. Enter submits. Submit only plays a 260ms scale pulse on the send button. Nothing is sent anywhere.
Burger: toggles .open, swaps the aria label between Open menu and Close menu, moves focus into the panel, traps Tab, closes on Escape, outside pointer, or a link. It closes if the viewport returns to desktop landscape.
Output the complete document that implements every rule above, with the video URL character for character, the local font URLs, the curly apostrophe in Draftwise’s, and no placeholder assets.