类型：Site模板 · 收录：2026-11-03 21:25:03 · 源码：会员可见
Build a single, standalone index.html (inline CSS + one ES-module script, no build step) containing a full-screen animated hero section for a fictional creative studio called "kinova". Everything visual is rendered live with three.js — there is NO video and NO image assets. Follow every spec below exactly.
==================================================
1. LIBRARIES & FONTS
==================================================
- three.js r160 via import map:
<script type="importmap">{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js" } }</script>
then <script type="module"> import * as THREE from 'three'; ...
- Google Fonts (one link, display=swap):
https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@500&display=swap
- Instrument Serif (regular + italic, 400): headline + logo
- IBM Plex Mono 500: nav links, settings, eyebrow, small UI labels (11px, uppercase, letter-spacing .02em)
- Inter Tight 500: the "Let's talk" button
- Title: "Kinova — Motion People Feel". Meta viewport: width=device-width,initial-scale=1,viewport-fit=cover.
==================================================
2. CONTENT (exact text)
==================================================
- Logo (top-left, Instrument Serif 26px): "kino" in white + "va" in a gradient text fill (linear 90deg: #F58FC9 → #C58BF5 55% → #7B66EA).
- Nav (mono): About · Work · Contact
- "Settings" button with a gear icon (13px; the icon rotates 120deg on hover). Clicking it opens a glass popover with two pill toggles: "Motion" (on) and "Sound" (off).
- Sound icon button (32px circle; muted-speaker icon, which swaps to a speaker-with-waves icon when on).
- CTA pill: "Let's talk" + a corner-down-right arrow icon.
- Mobile only: a "Menu" pill with a 2-line burger that morphs into an X.
- Eyebrow (mono, 2 lines, preserve the line break):
"Handcrafted websites and immersive
journeys for the brands of tomorrow"
- H1 (aria-label="Where curious signals bloom into motion people can feel"):
line 0: "Where" (italic, NOT uppercase)
line 1: "Curious signals"
line 2: "Bloom into motion"
line 3: "People can feel" (lines 1–3 uppercase via CSS)
- Bottom-right: a 40px round "orb" link (aria-label "Open showreel").
==================================================
3. COLOR TOKENS
==================================================
--peach #F7C59F, --pink #F58FC9, --mag #D65DB1, --lilac #C58BF5, --peri #A89AF8, --indigo #7B66EA, --ink #2a0f63.
html/body background #f3a3c4. All text is white.
Fallback .hero background (shown if WebGL fails):
linear-gradient(180deg,#f29bc4 0%,#fcbfbc 38%,#ffe39e 52%,#a4517a 60%,#d47b94 75%,#57103a 100%).
Easing everywhere: --ease: cubic-bezier(.19,1,.22,1).
==================================================
4. HTML / CSS LAYOUT
==================================================
- Reset: * {margin:0; padding:0; box-sizing:border-box}. html, body {height:100%; overflow:hidden}. Use antialiased font smoothing.
- --gut: clamp(16px, 2.6vw, 48px).
- main.hero: position relative; height 100vh (and 100svh); overflow hidden; touch-action none.
Inside it, first: <canvas id="gl"> absolutely filling the hero.
- header.hdr: absolute, top 0, padding 16px var(--gut). 12-column grid, column-gap 16px.
- logo: columns 1–3
- nav: columns 4–7 (gap clamp(18px, 2.2vw, 34px))
- settings: columns 7–9, centred
- sound: column 10–11, centred
- CTA: columns 11–13, justify end
Intro: the header starts at opacity 0 and translateY(-12px). When html gets .is-ready it transitions to visible (1s/1.2s var(--ease), 0.9s delay).
- Nav link hover: a 1px underline grows via scaleX 0→1 (origin right → left, .6s var(--ease)). The link text also scrambles (see section 9).
- Settings popover: glass panel. Background rgba(130,30,80,.28), 1px rgba(255,255,255,.22) border, radius 14px, backdrop-filter blur(18px). It fades and slides in. Toggle switches: 30×16 track; the "on" track uses a gradient from --pink to --indigo; 12px white knob.
- CTA: height 30px, padding 0 10px 0 14px, radius 30px, 13px Inter Tight. Background rgba(255,255,255,.14), 1px border rgba(255,255,255,.55), backdrop blur(10px).
Hover: a white ::before slides up from translateY(101%) to 0, the text turns --ink, and the label "rolls" (two stacked copies in a 1.2em-high overflow-hidden span; both translateY(-100%)). The arrow nudges (2px, -1px). All transitions .6s var(--ease).
- .content: absolute; left and right var(--gut); bottom clamp(6px, 1.4vh, 22px); pointer-events none.
- eyebrow: mono 11px, line-height 1.45, word-spacing .45em, uppercase, white-space pre-line, margin-bottom clamp(14px, 3.6vh, 44px). Fades in after .is-ready (1.2s delay), then plays the decode effect.
- h1.title: Instrument Serif 400; font-size min(7.1vw, 12.6vh); line-height .86; letter-spacing -.005em; uppercase; pointer-events auto.
- .t1 ("Where"): display block, italic, text-transform none, font-size .8em, line-height 1, margin-bottom .1em.
- .t2: display block, padding-left 24.6%. Each line is a display:block, nowrap span.
- Every character is split by JS into <span class="ch">.
- The DOM text is invisible: html.gl-text .title {color:transparent}. The visible text is drawn by WebGL (section 8), but the DOM text stays selectable and accessible.
- If WebGL is unavailable (html.no-gl), show the DOM text in white with a 1.4s fade-up animation.
- .orb: absolute, right var(--gut), bottom clamp(12px, 2vh, 26px), 40px circle.
- Background: conic-gradient(peach, pink, mag, lilac, peri, indigo, peach).
- box-shadow: 0 6px 24px rgba(80,40,180,.45), plus an inset 1px rgba(255,255,255,.5) ring.
- Spins 360deg in 7s (linear, infinite). Its ::after (inset 4px) is a glossy radial highlight at 32% 28% that spins in reverse.
- Pops in from scale 0 to 1 (1.2s, 1.4s delay); scales to 1.15 on hover.
- Mobile menu (.mnav): fixed full-screen. Background rgba(120,24,72,.42) with backdrop blur(22px). Contains 4 big Instrument Serif uppercase links at 15vw: About, Work, Contact, Let's talk. They stagger in (translateY 20px → 0, 0.06s steps) when html has .menu-open, and turn italic on hover.
RESPONSIVE (max-width: 767px):
- Header becomes a 3-column grid: logo | sound | Menu pill. Hide the nav, settings and CTA.
- Title font-size min(11.2vw, 9vh), line-height .88. "Where" at .78em. .t2 padding-left 0.
- Eyebrow 10px, word-spacing .3em, margin-bottom 22px. Content bottom = max(14px, safe-area-inset-bottom).
- Orb shrinks to 34px and moves top-right (top calc(56px + safe-area-inset-top)).
- (max-width: 900px): nav spans columns 3–7.
- prefers-reduced-motion: stop the orb spin, and turn Motion off by default.
==================================================
5. RENDER PIPELINE (three.js)
==================================================
- WebGLRenderer: antialias false, powerPreference "high-performance", autoClear false, outputColorSpace LinearSRGBColorSpace (colours are authored in sRGB and passed through untouched).
- Pixel ratio: min(devicePixelRatio, 1.5 on touch devices / 1.75 otherwise).
- Each frame:
1) Update the cursor-trail ping-pong texture (quarter resolution, HalfFloat).
2) Render into rtScene (full resolution): first the full-screen background quad (ortho camera), then the 3D scene (perspective camera: fov 35, z = 10) containing the glow sprite, the debris and the particle symbol.
3) Composite pass to the screen: lens distortion + chromatic aberration + the WebGL title + vignette + grain.
- Physics runs on a fixed 60 Hz step accumulator (max 3 steps per frame); dt is capped at 0.05.
- Debounced resize (120ms) re-runs layout and rebuilds the text textures. Dispose the text CanvasTextures whenever the canvas size changes, because GPU storage is sized on the first upload.
==================================================
6. BACKGROUND SHADER (full-screen quad)
==================================================
- Uniforms: uRes, uTime, uMouse (smoothed −1..1), uDens (1.8 if aspect < 1, else 1).
- Coordinates: p = ((uv.x − .5) * aspect, uv.y). Utilities: hash / value-noise / 5-octave fbm. Anti-alias width fw = 1.6 / uRes.y.
Each layer is offset by uMouse × its depth factor (parallax): sky .004, far rocks .012, near rocks .022, far shore .032, back meadow .048, front meadow .075.
SKY:
- t = clamp((p.y − .47) / .53).
- Colours: horizon (1, .89, .62) gold → mid (.99, .75, .74) peach-pink (smoothstep 0–.42) → top (.95, .60, .77) rose (smoothstep .38–1).
- Golden bloom: += (1, .92, .70) × .24 × exp(−length((p − (0, .6)) × (1, 1.35)) × 3.2).
- Clouds: q = p × (1.1, 2.3) + (t × .008, 0); cl = fbm(q × 2 + fbm(q × 3.2 + t × .015)), smoothstep(.46, .86) × smoothstep(.53, .86, p.y). Mix toward (1, .83, .84) by cl × .55.
- Second cloud layer: fbm(q × 1.3), smoothstep .55–.9, mixed toward (.97, .66, .80) × .35.
ROCKS — rockH(x, seed, freq, h0, h1):
- Per cell, check neighbours −1..1. Each cell has a random centre (±.3), width .42–.92 and height mix(h0, h1).
- Profile: pow(1 − |d|^1.9, .42) × (1 + (r1 − .5) × .7 × d) [tilted top] × (.94 + .1 × noise). Take the max over cells.
- Far rocks: base .508, rockH(x × uDens, 3, 7.4, .016, .052). Colour mix((.78, .45, .60), (.93, .64, .68)) by height, × noise facets. Blend 32% toward the sky (haze).
- Near rocks: base .49, rockH(…, 11, 5.2, .022, .08). Colour mix((.55, .22, .41), (.82, .45, .55)) + warm top highlight (.14, .10, 0). 20% haze.
MEADOW — meadow(p, seed, freq, hMax, soft): dense tufted grass.
- y < 0 → 1; y > hMax → 0.
- For cells −2..2: tuft = .3 + .7 × noise(id × .085); blade height hh = hMax × tuft × (.35 + .65 × r2); t = y / hh.
- Blade centre = id + r1 + (r3 − .5) × 3 × t² + sin(time × 1.3 + id × .37) × .45 × t² (lean + wind).
- Blade half-width = (.55 + .5 × r3) × (1 − .92t). Coverage = 1 − smoothstep(−soft, soft, |c − centre| − w).
REEDS — reeds(p, base, seed, freq, hMax, pc), where pc = one pixel in cell units:
- Sparse: skip a cell if r3 > .6 + .3 × smoothstep(0, −.8, p.x) (denser on the left).
- Thin stalk, about 1.5px wide, leaning and swaying.
- If r2 > .45: a cattail — an oval head around y = .83 of the reed height (radius x: 3.4px, y: .095).
- Otherwise: a seed stalk whose top 38% widens into grain beads (sin pattern).
FAR SHORE:
- top = .472 − q.x × .012 + .009 × noise.
- Solid below top, plus meadow(…, 5, 380, .013, .2) fringe.
- Colour mix((.62, .22, .44), (.84, .42, .55)) by height × fine noise.
WATER:
- Waterline wl = .446 − x × .006 + .003 × noise.
- Below it: mirror about wl (r.y = p.y + 2dy). Ripple distortion x += (noise(p.x × 7, p.y × 95 − t × .7) − .5) × .014 × (.25 + 5dy); small y jitter.
- Sample the "above" scene (sky + rocks + shore) at the mirrored point, × (.90, .80, .80) + (.03, 0, .02).
- Golden shimmer streaks: smoothstep(.74, .92, noise(x × 2.6 + t × .03, y × 170)) × .1 × (1, .92, .74).
- Deepen toward (.84, .48, .58) by smoothstep(0, .34, dy) × .38.
- Bright edge: (1, .93, .72) × exp(−dy × 420) × .18.
NEAR BANK:
- Back meadow: base .118 + .04 × smoothstep(.3, −.9, x) + noise, meadow(…, 21, 300, .042, .25). Colour (.62, .20, .42) → (.84, .40, .53) with gold-tipped tops (+(.16, .12, 0) × t²), opacity .96.
- Front: base b5 = .055 + .08 × smoothstep(.25, −.95, x) + .035 × noise(x × 1.7) + .012 × noise(x × 20) (higher on the left).
- First draw reeds(…, b5, 13, 10 cells/unit, height .2) in (.40, .09, .27).
- Then max(meadow(…, 37, 250, .075, .38), meadow(…, 53, 120, .11, .3)) — soft-focus foreground — in (.34, .06, .23) → (.58, .17, .37) with gold tips (+(.12, .07, 0) × t²).
==================================================
7. PARTICLE "M" SYMBOL (the logo)
==================================================
LOGO RASTER (400×300 offscreen canvas):
- Stroke a ribbon: lineWidth 54, round caps and joins.
- Path 1: (45,75) → (45,243).
- Path 2: (45,243) → (194,72) → (194,228) → arc(centre 222,228; radius 28; from π to 0, anticlockwise = true) → (345,75) → (345,243).
- strokeStyle: linear gradient x 18 → 372 with stops 0 #F7C59F, .16 #F7A6C8, .30 #F58FD9, .44 #D65DB1, .56 #C58BF5, .74 #A99BF8, 1 #8C80F0.
- Then source-atop a vertical shade (rgba(255,255,255,.18) at top → transparent at .55 → rgba(110,50,190,.45) at bottom).
SAMPLING:
- N = 16000 particles (9000 on touch / under 768px), plus 800 (450 on mobile) "stray" sparkles.
- Rejection-sample pixels with alpha > 200. Compute each point's distance d to the stroke centreline (the segments + the lower half of the arc).
- Put it on a tube: z = ±sqrt(1 − (d/27)²) × 27 × (.55–1.0).
- Local position = ((px − 195), −(py − 165.5), z) × S, where S = 2.3/235 (the symbol is 2.3 units tall).
- Colour = the pixel colour × front-light (.8 + .3 × facing) × random .82–1.14. 10% of particles get pushed 60% toward (1, .92, .98).
- Size S × (3.0–6.8).
- Strays: random in an ellipsoid (2.1, 1.5, 1.2) × .55–1.3, pastel colours, size S × (1.4–3.6).
INTRO:
- Particles start scattered: home + random sphere direction × (2.5–6.5), with z × .35.
- They assemble with spring k = .004 + .032 × intro, where intro = easeOutQuart(t / 2.6s).
PHYSICS (each 60 Hz step):
- Target = home + floating sine offsets (amplitude .012, strays .09).
- Hover swell: + random-direction × energy × .85 (strays .5) × (.6 + .4 × sin).
- vel += (target − pos) × k.
- Ray-cast the pointer onto the symbol's local z = 0 plane (inverse world matrix). speed = movement of the hit point per step; a tap forces at least .25.
- energy += min(speed × 1.7, .1) while the hit is inside |x| < 1.75 and |y| < 1.35; energy × .982 per step.
- Repulsion radius R = .68. Distance uses z × .5.
- f = (1 − d/R)² × min(.005 + speed × .45, .1).
- Push outward plus a .7 tangential swirl, and a z-kick of rdir.z × f × 2.2.
- heat += f × 12.
- vel × .9; pos += vel; heat × .968.
- If Motion is toggled off, multiply speed by .25.
POINTS SHADER:
- gl_PointSize = aSize × uScale / −mvPosition.z × (1 + heat × .9) × twinkle. uScale = (pixel height / visible world height × camZ) × group scale.
- vHeat = clamp(aHeat + energy × .75) for non-strays.
- Strays twinkle with .55 + .6 × sin(t × 2.6). Main particles occasionally flash 1.25×.
- Fragment: discard if r > .5; alpha smoothstep(.5, .36). Bead shading vColor × (.8 + .42 × (1 − 2r)) plus a specular dot at (−.13, −.13). Mix toward (1, .9, .97) by heat × .9. Strays are soft glowing dots.
- Material: transparent, no depth write or test.
GLOW:
- A 4.2 × 3.4 plane behind the particles, additive blending: (1, .76, .94) × exp(−d² × 13) × (.22 + energy × .55) × intro.
PLACEMENT:
- Symbol height = min(visH × .355, visW × .8 / 1.5); y = visH × .10.
- Mobile: min(visH × .30, visW × .74 / 1.5); y = visH × .15.
MOTION:
- Group rotation: y = sin(t × .3) × .14 + mouse.x × .28; x = −mouse.y × .16 + sin(t × .23) × .04.
- Camera: x = mouse.x × .35, y = mouse.y × .2, lookAt (0, symbolY × .6, 0).
- The mouse is smoothed with lerp .05 and returns to 0 when the pointer leaves.
DEBRIS:
- 130 points (70 on mobile) in x ±(11 + depth × .6), y ±5, z from −9 to 3. They fall: y = mod(y − t × speed(.04–.16) + 5, 10) − 5, with an x sway of .45.
- 78% are rotating dark-rose leaf flakes (diamond SDF |x| × 1.05 + |y| × 2.3 + |xy| × 1.5 < .4, colour (.52, .18, .34), alpha .82).
- 22% are soft white sparkles.
- They fade in with the intro.
==================================================
8. WEBGL TITLE + CURSOR LENS (composite pass)
==================================================
TEXT TEXTURES:
- After the fonts load (wait for Instrument Serif regular + italic, with a 3.5s fallback), draw two full-screen canvases at DPR ≤ 2.
- A: each title char in its own style.
- B: each char in the opposite style (regular ↔ italic), centred on the same glyph centre.
- Position each glyph from its DOM span rect. Baseline = top + (height − (fontBoundingBoxAscent + Descent)) / 2 + ascent. Apply the uppercase transform where CSS has it.
- Group chars into lines by baseline. Line box in uv = x0 − .2em … x1 + .2em; y from baseline + .24em up to baseline − .84em (max 8 lines).
REVEAL:
- Each line slides up inside its own mask. progress = easeOutExpo((t − start − i × .11) / 1.5s), where start = .35s after the build.
- The shader samples uv.y + (1 − p) × boxHeight × 1.05 and clips anything above the box. Once all lines finish, sample directly.
TRAIL (ping-pong at width/4 × height/4):
- new = max(prev × .955^(dt × 60), brush).
- brush = (1 − smoothstep(r × .55, r, distance to the segment from the previous to the current pointer uv, aspect-corrected)) × strength.
- r = .075 (.085 on mobile). strength lerps (.18) toward min(pointer uv speed × 55, 1), and toward 0 when inactive.
COMPOSITE SHADER:
- t = trail(uv). g = central-difference gradient of the trail (1.5 texels).
- Lens offset off = g × .03; chroma ca = off × .7 + g × .003.
- Scene sampled per channel: R at uv − off − ca, G at uv − off, B at uv − off + ca.
- Add a lens rim highlight: + (1, .9, 1) × |g| × .22, and + (.04, .02, .05) × t.
- Title: m = smoothstep(.3, .55, t) mixes texture A → B (the letters under the lens swap to italic, or "Where" to upright).
- Sample at uv − off × 1.2. Per channel: R at +sh, G at 0, B at −sh, where sh = (.0028m + |g| × .012, 0) + ca × 1.4. This gives pink/cyan fringes.
- col = mix(col, white, vec3(aR, aG, aB)).
- Vignette: col × (1 − dot(uv − .5, uv − .5) × .38).
- Grain: ± .035 hash noise per frame.
==================================================
9. DOM INTERACTIONS
==================================================
- Decode / scramble:
- Glyph set: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=/<>?
- Over `dur` ms, char i shows a random glyph until progress ≥ i/len × .7 + .3, then resolves. Spaces and newlines are kept.
- Runs on mouseenter of the nav links and Settings (500ms), and once on the eyebrow at load (1400ms, starting 1.2s after .is-ready).
- Settings: click toggles the popover; a click outside closes it.
- Menu: toggles html.menu-open.
- Sound: WebAudio ambient pad.
- 4 oscillators (110, 164.81, 220.5, 277.18 Hz; sine/triangle alternating; detuned) → lowpass 700 Hz (Q 2, LFO .07 Hz ± 380 Hz) → master gain.
- Gain ramps to .06 (on) or 0 (off) with setTargetAtTime .6.
- Synced between the header icon and the Settings toggle.
- Pointer:
- Listen to pointermove/pointerdown on window (passive). pointerdown sets tap = 1.
- Touch pointerup, document pointerleave and window blur all set the pointer inactive.
- When fonts are ready: build the text textures, add html.gl-text and html.is-ready.
Result: a pink-to-gold dusk lake with distant rose boulders, a wide reflective river and a dense, soft-focus magenta meadow with cattails in front. A glossy bead-particle "M" (the logo ribbon in peach → pink → magenta → lilac → periwinkle) floats above the water. It assembles on load, bursts into a white-pink swirling cloud when you hover or tap it, and then re-forms. A liquid lens follows the cursor, refracting the scene and turning the serif headline italic with RGB fringes. Header and footer UI as specified; fully responsive.