类型：Site模板 · 收录：2026-10-17 12:02:19 · 源码：会员可见
Build a single standalone `index.html` file (no build step, no local assets, everything inline) for a full-viewport hero section called "SynapticForge". Two real 3D hands (a human hand from the left, a robot hand from the right) are rendered with three.js over the page and loop forever: they swing in from the upper corners, almost touch fingertips in the centre in front of the headline, hold, pull back out, and repeat. It must be fully mobile responsive. Follow every value below exactly.
=== EXTERNAL RESOURCES (only these) ===
- Font: Google Fonts "Inter", weights 400, 500, 600, display=swap. Add preconnect links to fonts.googleapis.com and fonts.gstatic.com (crossorigin).
- three.js via an import map:
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
Import THREE, GLTFLoader (three/addons/loaders/GLTFLoader.js) and RoomEnvironment (three/addons/environments/RoomEnvironment.js) in a <script type="module">.
- 3D models (GLB, load directly from these URLs, do not download or replace them):
Human hand: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261013_135027_b1d2981c-6b6a-45f7-875c-0cf7bb60077c.glb
Robot hand: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261013_135043_df817596-56b7-4395-b5bb-9b753b141854.glb
=== HEAD ===
- <html lang="en">, charset utf-8, viewport "width=device-width, initial-scale=1, viewport-fit=cover".
- <title>SynapticForge — Machines that empathize</title>
- meta description: "Bringing people and machines together to shape a brighter, more harmonious tomorrow."
=== CSS VARIABLES (:root) ===
--ink: #0b0b0c; --muted: #8a8a8e; --pill: #ededee; --line: #77777b; --bg: #ffffff; --pad: clamp(16px, 2.7vw, 34px); --touch: 0;
=== BASE CSS ===
- * { box-sizing: border-box; margin: 0; padding: 0 } html, body { height: 100% }
- body: font-family "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color var(--ink); background var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden.
- a { color: inherit; text-decoration: none } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
- .stage (the <main>): position relative; width 100%; height 100vh then height 100dvh; min-height 480px; overflow hidden; isolation: isolate.
=== HTML STRUCTURE (inside <main class="stage">, in this order) ===
1. <header class="nav">
a. <a class="brand" href="#" aria-label="SynapticForge home"> containing an inline SVG logo mark then <span>SynapticForge</span>.
SVG: viewBox "0 0 42 26", fill currentColor, aria-hidden, three paths:
"M1 15.5C1 9.7 5.7 5 11.5 5c3.3 0 5.8 1.4 7.9 3.6l-5 4.9c-.9-.9-1.7-1.5-2.9-1.5-1.9 0-3.5 1.6-3.5 3.5H1Z"
"M41 10.5C41 16.3 36.3 21 30.5 21c-3.3 0-5.8-1.4-7.9-3.6l5-4.9c.9.9 1.7 1.5 2.9 1.5 1.9 0 3.5-1.6 3.5-3.5H41Z"
"M14.2 15.9 19.3 10.9l4.2 4.2-5.1 5z"
b. <button class="pill pill-menu" type="button"><i class="dot"></i>More</button>
c. <nav class="pill pill-links" aria-label="Primary"> with two links: "Frontier Science" and "Learning AI".
d. <a class="pill pill-cta" href="#" aria-label="Flexible Platforms"> containing <i class="ico"> with an inline SVG (viewBox "0 0 18 18", fill none, stroke #fff, stroke-width 1.5: <rect x="4" y="4" width="10" height="10" rx="1.5" transform="rotate(45 9 9)"/>) then <span class="label">Flexible Platforms</span>.
2. <div class="orb" aria-hidden="true"></div>
3. <h1 class="title"> with two <span class="line"> children:
line 1: "SynapticForge"
line 2: <span class="soft" style="display:inline">Machines</span> that empathize
4. <canvas id="scene" aria-hidden="true"></canvas>
5. <footer class="foot"> with three children:
- a <div> holding <div class="eyebrow">Refined Craftsmanship</div> and <p>Bringing people and machines together to shape a brighter, more harmonious tomorrow</p>
- <i class="rule" aria-hidden="true"></i>
- <div class="tags"> with three links: "Automation", "ML", "Hardware".
=== NAV CSS ===
- .nav: position absolute; inset 0 0 auto 0; z-index 5; display flex; align-items center; gap 10px; padding 20px var(--pad); font-size 13px.
- .brand: flex, align-items center, gap 10px, font-size 17px, letter-spacing -0.02em, margin-right 20px, white-space nowrap. .brand svg: 42x26px, flex none.
- .pill: height 50px; border-radius 999px; display flex; align-items center; white-space nowrap.
- .pill-menu: background var(--ink); color #fff; padding 0 24px 0 6px; gap 18px; transition transform .3s ease; hover: transform scale(1.03).
.pill-menu .dot: 38x38px white circle, display grid, place-items center; its ::after is a 4x4px circle in var(--ink).
- .pill-links: background var(--pill); padding 0 28px; gap 38px. Links fade to opacity .55 on hover (transition opacity .2s ease).
- .pill-cta: margin-left auto; background var(--pill); padding 0 46px 0 6px; gap 46px; hover opacity .8 (transition opacity .2s ease).
.pill-cta .ico: 38x38px circle, background var(--ink), grid centred, flex none; its svg is 18x18px.
=== ORB (glowing ring behind the headline) ===
- .orb: position absolute; left 50%; top 46%; width min(34vw, 62vh); aspect-ratio 1; transform translate(-50%, -50%); z-index 0; pointer-events none.
- .orb::before and ::after: content ""; position absolute; inset 0; border-radius 50%.
- ::before (iridescent rim): background conic-gradient(from 0deg, #ffd9c2, #f3d7ff, #cfd8ff, #ffffff, #ffe8c9, #d9d4ff, #ffd9c2); mask (and -webkit-mask) radial-gradient(closest-side, transparent 70%, #000 86%, transparent 100%); filter blur(14px); opacity .75; animation spin 14s linear infinite.
- ::after (warm core): inset 14%; background radial-gradient(closest-side, rgba(255,196,150,.95), rgba(255,222,196,.55) 45%, rgba(255,255,255,0) 100%); filter blur(18px); opacity calc(.18 + var(--touch) * .7); transform scale(calc(.8 + var(--touch) * .3)).
- @keyframes spin { to { transform: rotate(360deg) } }
=== HEADLINE ===
- .title: position absolute; left 50%; top 43%; transform translate(-50%, -50%); z-index 1; text-align center; font-weight 600; font-size clamp(34px, 5vw, 76px); line-height 1.05; letter-spacing -0.035em; white-space nowrap.
- .title span { display: block } .title .soft { color: #b9b9bd }
- .title .line: animation rise 1.1s cubic-bezier(.2, .7, .2, 1) both; the second line has animation-delay .25s.
- @keyframes rise { from { opacity: 0; transform: translateY(.45em); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
=== CANVAS ===
- #scene: position absolute; inset 0; width 100%; height 100%; z-index 2 (above the headline, below nav and footer); pointer-events none; opacity 0; transition opacity .8s ease. Class .ready sets opacity 1.
=== FOOTER ROW ===
- .foot: position absolute; inset auto 0 0 0; z-index 4; display grid; grid-template-columns 1fr auto 1fr; align-items end; padding 0 var(--pad) clamp(24px, 5.2vh, 44px); animation rise 1.1s .5s cubic-bezier(.2, .7, .2, 1) both.
- .foot .eyebrow: font-size 13px; color var(--muted); margin-bottom 26px.
- .foot p: font-size clamp(17px, 1.65vw, 21px); line-height 1.12; letter-spacing -0.02em; max-width 17em.
- .foot .rule: width 1px; height 42px; background var(--ink); justify-self center.
- .tags: justify-self end; display flex; gap 5px; margin-bottom -4px.
- .tags a: height 50px; padding 0 28px; border 1px solid var(--line); border-radius 999px; display grid; place-items center; font-size 13px; color #6c6c70; transition background/color/border-color .25s ease. Hover: background and border var(--ink), color #fff.
=== RESPONSIVE ===
- max-width 1000px: hide .pill-links; .pill-cta padding-right 26px, gap 16px.
- max-width 760px: .nav padding-top 14px, gap 8px; .brand font-size 16px, margin-right auto; .brand svg 34x21px; .pill height 44px; .pill-menu padding 0 18px 0 5px, gap 12px; .pill-menu .dot and .pill-cta .ico 34x34px; .pill-cta margin-left 0, padding 0 5px; hide .pill-cta span.label; .orb width min(78vw, 46vh), top 42%; .title top 39%, font-size clamp(26px, 8.8vw, 56px); .foot single column with gap 20px; .foot .eyebrow margin-bottom 12px; hide .foot .rule; .tags justify-self start, flex-wrap wrap, margin-bottom 0; .tags a height 42px, padding 0 20px.
- max-width 380px: hide the .brand text span (logo mark only).
- max-height 560px and landscape: .foot .eyebrow margin-bottom 8px; .foot p font-size 15px; .tags a height 40px, padding 0 18px; .title font-size clamp(28px, 9vh, 56px).
- prefers-reduced-motion: reduce → disable the orb spin, the title line animation and the footer animation.
=== THREE.JS SCENE ===
- Config array HANDS:
human: { url: <human GLB>, side: -1, rot: [0, -Math.PI/2, 0], tip: [-0.045, 0.045], phase: 0 }
robot: { url: <robot GLB>, side: 1, rot: [0, -Math.PI/2, 0], tip: [0.055, 0.05], phase: 1.7 }
(side -1 enters from the left, +1 from the right; rot turns the model, whose long axis is Z, so the arm lies along X with fingertips toward screen centre; tip is the resting fingertip position as a fraction of viewport width/height from centre.)
- Timeline in seconds: T = { wait: 0.5, enter: 2.9, hold: 1.9, exit: 2.5 }; CYCLE = sum (7.8s).
- Renderer: WebGLRenderer on #scene with alpha true, antialias true; pixel ratio min(devicePixelRatio, 2); outputColorSpace SRGBColorSpace; toneMapping ACESFilmicToneMapping; toneMappingExposure 1.1.
- Scene environment: PMREMGenerator.fromScene(new RoomEnvironment(), 0.04).texture.
- Lights: DirectionalLight(0xffffff, 1.6) at (0.5, 3, 4); PointLight(0xffc49a, intensity 0, distance 6, decay 2) at (0, 0.2, 1.2) called "warm".
- Camera: PerspectiveCamera(fov 30, near 0.1, far 50) at z = 10.
- resize(): size renderer to the stage's clientWidth/clientHeight (updateStyle false), update camera aspect, and store view.h = 2 * 10 * tan(15°) and view.w = view.h * aspect (visible world size at z = 0). Call once and on window resize.
- buildRig(gltf, cfg): put gltf.scene in an "orient" group with rotation cfg.rot and update its world matrix. Measure the bounding-box length along X. Walk every mesh vertex in world space (set material.envMapIntensity = 1.15 on each mesh) and find the vertex with the largest value of (-cfg.side * x): that is the fingertip. Set orient.position to minus that fingertip so the fingertip sits at the origin. Wrap in a "unit" group scaled by 1/length (arm is 1 unit long), then wrap in a "rig" group with rig.userData = cfg. Return rig.
- Easing: easeInOut(t) = t < 0.5 ? 4t³ : 1 − (−2t + 2)³ / 2; easeOut(t) = 1 − (1 − t)⁴.
- reachAt(t) returns p from 0 (withdrawn) to 1 (touching): if prefers-reduced-motion return 1. t %= CYCLE. During wait → 0. During enter → easeOut(progress). During hold → 1. During exit → 1 − easeInOut(progress).
- Pointer parallax: on pointermove store pointer.x and pointer.y in the range −1..1; each frame smooth sx += (x − sx) * 0.05 and the same for sy.
- pose(rig, p, time), with q = 1 − p, length = max(view.w * 0.54, view.h * 0.36), float = sin(time * 1.3 + phase):
position.x = tip[0] * view.w + side * q * (view.w * 0.5 + length * 0.12) + pointer.sx * 0.04 * side
position.y = tip[1] * view.h + q * view.h * 0.3 + sin(p * π) * view.h * 0.05 + float * view.h * 0.006 − pointer.sy * 0.04
position.z = q * 0.8
rotation.x = q * 0.55 + float * 0.012
rotation.y = side * q * 0.75 + pointer.sx * 0.05
rotation.z = −side * (q * 0.8 + float * 0.01)
scale = length (uniform)
- frame(): time = clock elapsed; p = reachAt(time); smooth the pointer; pose every rig; touch = smoothstep(p, 0.82, 1); warm.intensity = touch * 2.2; set the CSS variable --touch on the stage element to touch.toFixed(3); render; requestAnimationFrame(frame).
- Loading: load both GLBs with GLTFLoader.loadAsync in Promise.all, build the rigs, add them to the scene, add class "ready" to the canvas, start a THREE.Clock (created with autostart false) and call frame(). On failure, console.error only; the rest of the page must still work.
=== RESULT TO MATCH ===
White page. Top bar: logo + "SynapticForge", black "More" pill with a white dot circle, grey pill with two links, and a grey pill on the far right with a black diamond icon and "Flexible Platforms". Centre: bold two-line headline ("Machines" in light grey) over a soft pastel glowing ring. Bottom: grey eyebrow and paragraph on the left, a thin vertical rule in the middle, three outlined pill tags on the right. The realistic human arm and the dark metal-and-copper robot arm sweep down from the upper left and right corners, rotate level, nearly touch index fingertips in front of the headline while the ring's core glows warm, then retreat and loop.