类型：Site模板 · 收录：2026-10-20 22:16:10 · 源码：会员可见
Build a single standalone index.html (no build step, no local assets) for a landing page called "Genovera" — an AI genomics / precision-medicine brand. It is a pinned, scroll-driven 2-section hero with a live Three.js 3D moss-covered DNA double helix. Recreate it EXACTLY as specified below. All assets load directly from these CloudFront URLs (CORS is open — do not download or substitute them):
ASSETS (use verbatim)
- Background plate (soft cream→sage bokeh): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261017_134824_aa87e668-85d8-4373-ae97-e82ef15d2c67.png
- Moss texture (seamless, top-down cushion moss): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261017_142203_fbc6a1fa-aa20-47e6-a3ef-10d6ce305961.png
- 3D leaf GLB: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261017_142240_6b5bf8a8-3b85-4ec5-a042-77e60bfc40a0.glb
- 3D flower GLB (white 5-petal blossom): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261017_142243_b72d1f30-0741-4f0c-a681-1cde1461ea09.glb
- Three.js r165 via importmap: "three" → https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js ; "three/addons/" → https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/ (use GLTFLoader, BufferGeometryUtils.mergeGeometries, RoomEnvironment)
- Font: Google Fonts "Manrope" weights 300/400/500/600 (display=swap), with preconnect to fonts.googleapis.com and fonts.gstatic.com. Fallback: system-ui, sans-serif.
HEAD
- <title>Genovera — AI-led precision care at the level of DNA</title>
- meta description: "Genovera forecasts health risks and equips every patient with DNA insights."
- viewport: width=device-width, initial-scale=1, viewport-fit=cover
DESIGN TOKENS (:root)
--ink #1d4228 (all text, logo, button bg) · --ink-soft #3c5c43 · --accent #5d8f3c · --cream #f3f0dc · --sage #c9d6b4 · --line rgba(29,66,40,.55) · --pad clamp(16px, 2.2vw, 32px)
Global: * {box-sizing:border-box; margin:0; padding:0}. body: Manrope, color var(--ink), background #e8ead2, overflow-x hidden, -webkit-font-smoothing antialiased. Links inherit color, no underline.
LAYER STACK (all fixed, full-viewport)
1. .loader (z 20): background #eeeed8, centered 160×1px track rgba(29,66,40,.15) with an inner bar (var(--ink)) that scales X from 0→1 with load progress (transition .3s). On done: opacity 0 + visibility hidden over .9s.
2. .bg (z 0): background = the background plate URL center/cover no-repeat, layered over linear-gradient(120deg,#f6f1d8,#cbd8b5) fallback; transform scale(1.06). ::after overlay = radial-gradient(120% 90% at 10% 0%, rgba(255,252,232,.55), transparent 60%), linear-gradient(180deg, transparent 60%, rgba(196,212,172,.35)).
3. canvas#stage (z 1): WebGL, pointer-events none, opacity 0 → 1 (transition 1.4s) when assets are ready.
4. .text-veil (z 2): only on mobile (see responsive).
5. header (z 10), indicator + scroll hint (z 9), scroll content (z 5).
HEADER (fixed top, flex space-between, padding 14px var(--pad))
- Left group (.nav-left, gap clamp(28px,6vw,58px)):
• Logo link (aria-label "Genovera home"): 38×38 inline SVG (viewBox 0 0 40 40), three stacked slanted leaf/swoosh strokes filled #1d4228:
path1 "M6 13.5C11 8 22 5.5 33 7.5c-9 1-17 3.6-22.5 8.2L6 13.5Z"
path2 "M5 23C12 15 25 12.5 35 15c-10.5 1.2-19.5 5-25 10.5L5 23Z"
path3 "M8 31.5C14 26 24 23.5 33 24.5c-8 1.5-15 4.2-19.5 8.5L8 31.5Z"
followed by wordmark "Genovera" (20px, weight 500, letter-spacing -0.01em, gap 10px).
• nav (aria-label "Sitemap"), gap 36px, 16px: "Protocols", "Highlights", "Neural Models".
- Right group (gap 36px): text link "Press" + pill button "Connect" (height 50px, padding 0 40px, radius 999px, bg var(--ink), color #f4f3e4, 18px weight 400; hover bg #2b5a37 + translateY(-1px), .3s).
- Nav text links: opacity .92, hover underline = 1px currentColor bar at bottom -4px that scales X from 0 (origin right) to 1 (origin left), .4s ease.
SCROLL STRUCTURE
- main.scroll: position relative, height 320vh. Inside, .sticky: position sticky, top 0, height 100vh / 100svh, overflow hidden. Both sections are absolutely positioned on top of each other inside the sticky stage and crossfade via JS.
- .panel: absolute, left var(--pad), top 50%, translateY(-50%), width min(560px, 44vw), padding-left 48px.
- .rail: absolute, left 10px, top 4px, bottom 4px, 1px wide, bg var(--line). ::before = 19px solid circle var(--ink) at left -9px, top -10px.
SECTION 1 — HERO (section#hero, aria-label "Opening note")
- h1 (weight 400, clamp(34px,3.75vw,52px), line-height 1.08, letter-spacing -0.02em): "AI-led precision care at the level of DNA"
- p.lead (margin-top 14px, clamp(18px,1.85vw,25px), line-height 1.18, max-width 30ch): "Foreseeing health threats and guiding patients with clear DNA insight"
- a.cta (margin-top 44px, inline-flex space-between, width 188px, padding-bottom 8px, border-bottom 1px solid var(--ink), 15px): "Enroll today" + 28×18 arrow SVG (stroke currentColor, 1.6, path "M1 9h25M18 1.5 26 9l-8 7.5"). Hover: width → 214px and arrow translateX(4px), .45s cubic-bezier(.2,.7,.2,1).
- Every text element carries data-reveal (will-change opacity/transform/filter).
SECTION 2 — PREDICTIVE ENGINE (section#reason, aria-label "Predictive engine")
- Rail without the dot; inside it a .fill bar: left -2px, width 5px, radius 3px, gradient(180deg, var(--accent), var(--ink)), height driven 0→100% by scroll; its ::after is an 11px var(--ink) dot at the bottom (left -3px, bottom -6px).
- .eyebrow (13px, uppercase, letter-spacing .08em, var(--ink-soft), opacity .8, margin-bottom 14px): "DNA-level foresight"
- h2 (weight 400, clamp(32px,3.4vw,48px), -0.02em, line-height 1.06): "Predictive engine"
- p.lead (margin-top 12px, clamp(16px,1.45vw,20px), line-height 1.3, max-width 30ch): "Reading millions of clinical papers and the newest science."
- ul (no bullets, margin-top 30px, grid gap 18px), each li max-width 34ch, with <b> title (block, 13px, weight 500, letter-spacing .02em, color var(--accent), margin-bottom 3px) and <span> body (14.5px, line-height 1.4, var(--ink-soft)):
1. "Hereditary risk mapping" — "We work to catch genetic irregularities early, to help prevent them."
2. "Timely findings" — "Faster screening and diagnosis. Fewer lives cut short too soon."
3. "Tailored medicine" — "Care plans shaped around the unique code held in your genome."
FIXED UI
- Right scroll indicator: right calc(var(--pad) - 6px), vertically centered, 2×180px track rgba(29,66,40,.14), radius 2px, overflow hidden; inner thumb 40% tall var(--ink), translateY(progress*150%).
- Scroll hint: bottom 26px, centered, 12px uppercase letter-spacing .14em var(--ink-soft), text "Browse" above a 1×34px line (var(--line)) with a var(--ink) segment (40% tall) that drips top -40% → 100% on loop (1.8s cubic-bezier(.6,0,.3,1) infinite). Fades out over the first 8% of scroll.
THREE.JS SCENE
- Renderer: antialias, alpha true, powerPreference high-performance, pixelRatio min(dpr,2), SRGB output, ACESFilmic tone mapping, exposure 1.05. Camera: Perspective fov 32 (44 on mobile <760px), position (0,0,12).
- Lighting (warm, backlit morning look): PMREM RoomEnvironment (sigma .04) as scene.environment, environmentIntensity .55; HemisphereLight(0xfff6dc, 0x9fb88a, 1.1); key DirectionalLight 0xfff1cf intensity 2.2 at (-6,7,-4) = backlight from upper-left giving glowing moss rims; fill DirectionalLight 0xf4f7e6 intensity 1.25 at (4,2,8).
- Rings: two thin white tori in a group behind the DNA (z -0.4): ringA Torus(2.25, 0.009, 8, 220) opacity .9; ringB Torus(2.4, 0.007, 8, 220) opacity .75 (rendered .7 at runtime), MeshBasicMaterial white transparent.
- Hierarchy: dnaPivot (position/tilt/scale) → dnaSpin (spin about own Y axis) → DNA group.
PROCEDURAL MOSS DNA (do NOT use one baked model; build it so ends are open and foliage is real 3D)
- Helix params: length L 9.5, radius R 0.8, turns 1.85, strand tube radius r 0.175. helixFrame(t, phase): angle a = t*turns*2π + phase; P = (cos a·R, (t-0.5)·L, sin a·R); tangent T = normalize(-sin a·R·turns·2π, L, cos a·R·turns·2π); radial = (cos a,0,sin a); B = normalize(T×radial); N = normalize(B×T).
- Two strands with OPEN, separate ends: strand 1 phase 0, t 0→0.975; strand 2 phase 0.82π, t 0.03→1.0. Custom tube geometry (420 segments, 260 on mobile; 18 radial) with uv = (t, angle). Radius tapers to rounded tips: e = min(u,1-u)/0.035; r·(e≥1 ? 1 : sqrt(1-(1-e)²)).
- Rungs: every 0.042 of t from 0.06 to <0.95, an open CylinderGeometry radius 0.08 (12 radial, 6 height segs) spanning strand1 point → strand2 point at the same t; merge all into one geometry.
- Moss surface = shell fur: layer k=0 is MeshStandardMaterial {map: moss, bumpMap: moss, bumpScale 2.2, roughness 1, color 0xeaf4c4, envMapIntensity .5}. Layers k=1..7 (1..4 on mobile): same moss map + alphaMap of a 256px canvas noise (5200 random grey dots, radius 0.6–2.2px on black, repeat-wrapped, repeat = moss repeat × 9), alphaTest 0.25 + (k/shells)·0.6, DoubleSide, color lerp 0xdcefa8 → 0xfbffe0 by k/shells; vertex pushed outward via onBeforeCompile: after #include <begin_vertex> add "transformed += objectNormal * (k*0.016)"; customProgramCacheKey "moss-shell-"+k. Moss texture repeat (26,1) on strands, (1,2) on rungs. Apply every layer to both strands and the rung mesh.
- Surface sampling helper pickSurface(lift, rungShare): with probability rungShare pick a random rung at 22–78% along it with a random normal perpendicular to the rung (offset 0.07+lift); otherwise pick a random strand, t inside its range ±0.02, random angle around the tube, position = P + n·(strandRadius + lift).
- Moss clumps: InstancedMesh of a jittered Icosahedron(1,1) (x,z ×0.75–1.15, y ×0.6–1), moss-mapped, roughness 1, envMapIntensity .4; 1700 instances (900 mobile), pickSurface(-0.02, 0.22), oriented up→normal, scale (s, 0.7s, s) with s 0.05–0.1, instance colors cycling 0xb5d76c, 0x9cc25a, 0xcbe582, 0x8fb550, 0xd8ec96.
- Leaves: load leaf GLB, merge its meshes into one geometry (keep only position/normal/uv), rotate so the longest bbox axis is +Y, translate so the base sits at the origin, scale to unit length, recompute normals. MeshStandardMaterial {map from GLB (sRGB), roughness .55, DoubleSide, envMapIntensity .9}. InstancedMesh 170 (100 mobile): pickSurface(-0.01, 0.18), direction = normalize(n + T·rand(-0.6,0.9)), random roll about Y, tilt X ±0.35, scale 0.2–0.36, instance color HSL(h .24–.29, s .45–.7, l .62–.8). They must visibly sprout OUT of the moss at angles, not lie flat on it.
- Flowers: load flower GLB the same way but rotate the thinnest bbox axis to +Y (petal face outward) and center it. MeshStandardMaterial {map from GLB, roughness .7, DoubleSide, emissive 0xfffbe8, emissiveIntensity .12}. InstancedMesh 150 (90 mobile): pickSurface(0.01, 0.2), face outward along the normal, random spin, tilt ±0.4, scale 0.16–0.26.
- Dew drops: one fresnel ShaderMaterial (transparent, depthWrite false) shared by all droplets, instancing-aware (apply instanceMatrix to position and mat3(instanceMatrix) to normal under #ifdef USE_INSTANCING). Fragment: f = pow(1 - max(dot(N,V),0), 2.4); L = normalize(-0.5,0.7,0.6); spec = pow(max(dot(reflect(-L,N),V),0),60); alpha = clamp(f·.85 + spec·.9 + .04, 0, 1); color mix(vec3(.97,1,.94), vec3(1), spec). 160 dew drops on the DNA (90 mobile), radius 0.022–0.06, pickSurface(s·0.6+0.02, 0.15), renderOrder 2.
- Ambient: 26 floating droplets (Sphere 24×16, same shader, radius .035–.12) at random base positions x ±3.5, y ±3, z −2…2.5, each with speed .15–.45 and a random phase; plus 220 pollen dust points (x ±8, y ±5, z −4…4) using a 32px radial-gradient canvas sprite rgba(255,255,240), size .05, opacity .7, depthWrite false.
- Loading: one LoadingManager drives the loader bar; Promise.all(moss texture, leaf GLB, flower GLB) → build the DNA → after 250ms hide the loader, add .ready to the canvas, start the intro timer. On error: log it and still reveal the page.
LAYOUT KEYFRAMES (recomputed on resize). halfH = tan(fov/2)·12, halfW = halfH·aspect, k = clamp(aspect/1.6, 0.8, 1.1).
- Desktop: A (hero) {x .57·halfW, y −.32·halfH, rotZ 1.0, scale .95k, ringX .06·halfW, ringY .14·halfH, ringScale 1}; B (section 2) {x .42·halfW, y −.1·halfH, rotZ .2, scale .85k, ringX .4·halfW, ringY .04·halfH, ringScale .98}. The DNA therefore starts as a long diagonal from the ring's centre down past the bottom-right edge, then turns almost upright on scroll.
- Mobile (<760px): A {x .25·halfW, y .18·halfH, rotZ .75, scale .82, ringX 0, ringY .32·halfH, ringScale .62}; B {x .2·halfW, y .3·halfH, rotZ .12, scale .8, ringX .12·halfW, ringY .35·halfH, ringScale .58}.
ANIMATION LOOP (requestAnimationFrame)
- Scroll progress: target = scrollY / (scroll.offsetHeight − innerHeight), clamped 0–1; smoothed prog += (target − prog)·0.075. Scene progress p = easeInOutCubic(range(prog, .12, .88)).
- Mouse: normalised −1…1, smoothed ·0.05 (sx, sy).
- Intro: over 1.8s after load, ie = easeOutCubic. DNA rises 0.8 units, scales from .88 to 1 and unwinds 1.2 rad; rings fade in and scale from .92.
- dnaPivot.position = lerp(A,B,p) + (sx·.12, −sy·.08 + sin(t·.6)·.05 − (1−ie)·.8); rotation.z = lerp(A.rz,B.rz,p) − sx·.05; rotation.x = lerp(.18,−.05,p) + sy·.08; scale = lerp(A.s,B.s,p)·(.88+.12ie).
- dnaSpin.rotation.y = t·.12 + p·1.35π + sx·.25 − (1−ie)·1.2.
- Rings: group position lerp(ring A→B) + (sx·.06, −sy·.04), z −.4; ringA rotation (lerp(.12,.35,p) + sin(t·.4)·.03, lerp(−.08,.55,p) + sx·.06, 0), x offset lerp(0,.1,p); ringB rotation (lerp(−.1,.1,p) + cos(t·.35)·.04, lerp(.16,.85,p) − sx·.05, .2), position (lerp(.12,−.08,p), lerp(−.08,.06,p), 0). Ring opacities .9·ie and .7·ie.
- Floating droplets: x = base.x + sin(t·speed+phase)·.25 + parallax; y wraps upward ((base.y + t·speed·.25 + 3) mod 6) − 3 + p·.6. Dust: rotate y t·.01 + sx·.03 and drift y.
- DOM reveal, setReveal(el, v, dir): opacity v, translateY((1−v)·26·dir px), blur((1−v)·6px).
• Hero elements fade out, staggered: v = 1 − ease(range(prog, .04 + i·.04, .26 + i·.04)), dir −1 (they lift up). Hero rail opacity 1 − range(.1,.3) and scaleY 1 − ease(range(.05,.32)) from the top. Hero is clickable only while prog < .2.
• Section 2 elements fade in, staggered: v = ease(range(prog, .42 + i·.06, .62 + i·.06)), dir +1 (they rise into place). Rail opacity range(.38,.5); fill height ease(range(.42,1))·100%. Clickable only when prog > .5.
• Indicator thumb translateY(prog·150%); hint opacity 1 − range(0,.08).
RESPONSIVE
- ≤980px: nav gap 22px / 15px; right group gap 22px; button height 44px, padding 0 28px, 16px.
- ≤760px: hide the nav links and "Press"; wordmark 18px, logo 32px; button 40px tall, padding 0 22px, 15px. Panels pin to the bottom: top auto, bottom max(28px, env(safe-area-inset-bottom)), no transform, width auto, right var(--pad), padding-left 34px; rail left 7px with a 15px dot (left −7px, top −8px). h1 clamp(30px, 8.6vw, 40px); hero lead 17px; cta margin-top 26px; h2 32px; list margin-top 18px, gap 12px; li span 13.5px. Indicator height 110px at top 40%; hide the scroll hint. .bg::after becomes radial-gradient(120% 70% at 10% 0%, rgba(255,252,232,.5), transparent 60%), linear-gradient(180deg, transparent 40%, rgba(240,240,220,.75) 78%, rgba(240,240,220,.9)). Show .text-veil: fixed bottom 58% height, z 2, gradient rgba(238,238,216,0) → .78 at 45% → .92. The DNA sits in the upper half, text in the lower half, with no horizontal scroll at 375px.
- ≤760px and height ≤640px: hide the 3rd list item.
- prefers-reduced-motion: stop the drip animation.
The look to match: a slender, elegant double helix wrapped in lush, fuzzy lime and olive cushion moss, open separate strand tips, small bright-green leaves sprouting outward, little cream-white five-petal blossoms with yellow centres, and clear dew drops with bright rims. Two delicate white rings sit behind it, all on a dreamy, hazy cream-to-sage backlit background in warm morning light with deep forest-green typography.