类型：Site模板 · 收录：2026-11-05 01:11:45 · 源码：会员可见
Build a single standalone index.html (inline <style> and <script>, no frameworks, no build step) containing ONLY a full-viewport portfolio hero section. Mobile responsive down to 375px. Do not download assets — reference the image URLs below directly.
==================================================
1. CONTENT (exact text)
==================================================
- Top-left name: "Juniper Ashworth"
- Top-right nav: "Index, Studio" (two links: "Index" → #works, "Studio" → #studio) followed by a round theme-toggle button.
- Headline (2 lines, uppercase): "INTERNET" / "ALCHEMIST"
- Tagline: "Crafting tactile, fast interfaces that hide a quiet secret beneath each pixel."
- Right-side project index, label "Works", items in order:
1. Lumen Ceramics
2. Cobalt Cyclists
3. Orbo
4. CrumbHouse
5. Sierra Retreat
Under the list: a small square-cornered chip showing "01 / 05 ↗" (counter updates to the active project).
- Footer: left column label "Contact" + mailto link "hello@juniper.studio"; second column label "Open from" + "January 2027"; right-aligned "© 2026".
- <title>: "Juniper Ashworth — Internet Alchemist"; meta description = the tagline; meta theme-color #f6f5f9 (switch to #1a0e3f in dark).
==================================================
2. ASSETS (use these exact URLs, 3:2 images)
==================================================
CDN = https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/
- Lumen Ceramics: CDN + hf_20261028_034456_35d32801-80f8-4feb-b277-d6271c907985.png (two potters in aprons, sunlit studio courtyard)
- Cobalt Cyclists: CDN + hf_20261028_034456_08dc08bf-2e30-4e36-a089-c51670f3503f.png (three cyclists in orange jerseys, mint wall)
- Orbo: CDN + hf_20261028_034456_cfb47d01-7bdd-4ba1-8af1-b63f0245f0dd.png (designer sketching on tablet, plants)
- CrumbHouse: CDN + hf_20261028_034455_3ca38e55-9cb1-4e96-8dc9-4141b52d090b.png (overhead pastries + coffee on marble)
- Sierra Retreat: CDN + hf_20261028_034455_dd775f8a-e67a-48ca-b0ed-8cfb8a0d5564.png (figure among saguaro cacti, desert garden)
- Dark smoke background (16:9, CORS-enabled, used as a WebGL texture):
CDN + hf_20261028_034455_4f4314d2-7d39-4a7b-bf3e-5bc2dfd744d8.png
==================================================
3. FONTS & TOKENS
==================================================
Google Fonts: Archivo 800/900 (headline) + Inter 400/500/600 (everything else).
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
:root { --ease: cubic-bezier(.22,1,.36,1); --pad: clamp(16px,1.6vw,28px); --small: clamp(11px,.78vw,13px); }
Light theme vars: --bg #f6f5f9; --ink #140e29; --muted #a39fb4; --chip-bg #140e29; --chip-ink #f6f5f9
Dark theme vars: --bg #1a0e3f; --ink #f6f1ff; --muted rgba(232,222,255,.55); --chip-bg rgba(246,241,255,.14); --chip-ink #f6f1ff
Focus ring: 2px solid #8c5cff, offset 3px.
body: overflow hidden, overscroll-behavior none, Inter, antialiased.
==================================================
4. ARCHITECTURE — TWO STACKED IDENTICAL LAYERS
==================================================
<main class="hero"> (100vw × 100svh, overflow hidden) contains two absolutely positioned full-size <section class="layer"> elements: data-theme="light" and data-theme="dark". Build both from ONE <template> by cloning, so the DOM is identical. Each layer contains: .bg, .top (header), .intro (h1 + p), .reel (marquee), .fog, .index (aside), .foot (footer).
- The current theme's layer is the "base" (z-index 1, clip-path none, interactive).
- The other layer is the "overlay" (z-index 2, pointer-events none, aria-hidden, clip-path: path(...) — starts as path('M0 0Z') = invisible).
- Split every headline letter into <span class="ch" data-i="n" style="--i:n"> for per-letter animation.
==================================================
5. LAYOUT (desktop)
==================================================
- .top: absolute at top/left/right = --pad, flex space-between, font-size --small, weight 500. Toggle button 22×22, transparent, contains a 16px SVG: circle r7 stroke 1.6 + filled right half path "M8 1a7 7 0 0 1 0 14z". In dark, the SVG rotates 180deg (transition .8s --ease).
- .intro: absolute, top calc(--pad + 1.9em), left --pad. h1.title: Archivo 900, font-size clamp(46px,5.9vw,112px), line-height .86, letter-spacing -.035em, uppercase, each line display block nowrap. .lede: margin-top 1.4em, max-width 23em, weight 500, line-height 1.35.
- .reel: absolute, top 0, bottom 0, left 51%, width 32vw, perspective 1100px (origin center), touch-action none, cursor grab. Items: absolute, width 100%, aspect-ratio 3/2, will-change transform/opacity; figure overflow hidden + isolation:isolate; img object-fit cover.
- .index: absolute, right --pad, vertically centred, right-aligned, --small 500. Label muted. List items are buttons coloured --muted, the active one (and hover) --ink, transition .4s. Chip: margin-top 1.6em, padding .7em 1.1em, bg --chip-bg, text --chip-ink, tabular numbers, backdrop blur 8px; arrow nudges (2px,-2px) on hover.
- .foot: absolute bottom/left/right --pad, grid columns auto auto 1fr, gap clamp(28px,5vw,90px), align end; labels muted; "© 2026" justify-self end.
Image treatment:
- Light: img filter grayscale(1) contrast(1.35) brightness(1.04) + figure::after with background #1d1446 and mix-blend-mode: lighten (deep-violet duotone).
- Dark: full colour, img filter saturate(1.12) contrast(1.04), figure box-shadow 0 30px 80px -20px rgba(8,2,30,.7).
Dark .fog layer (z 3, above reel):
radial-gradient(70% 38% at 62% 100%, rgba(176,132,255,.55), transparent 70%),
linear-gradient(to top, rgba(54,26,120,.75), transparent 34%),
linear-gradient(to bottom, rgba(26,14,63,.55), transparent 18%).
Dark .bg::after: SVG feTurbulence grain (baseFrequency .9, 2 octaves, 160px tile), opacity .16, mix-blend overlay.
==================================================
6. VERTICAL MARQUEE (shared state drives BOTH layers so images line up)
==================================================
- NO autoplay. It only moves on mouse wheel, touch/mouse drag on the reel, or ArrowUp/ArrowDown (±1 step).
- Item count = 5 × ceil((viewportH + step*3)/(step*5)), images repeat in order. itemH = reelWidth/1.5; step = itemH + max(14, itemH*.12); total = count*step.
- Each frame: offset lerps toward target (light factor .085, dark .06, frame-rate independent); vel = smoothed per-frame delta.
- Item k base y = mod(k*step + offset, total) − 1.5*step. s = y − (H/2 − itemH/2); c = clamp(s/(H*.5), −1.6, 1.6).
- Wheel: target −= clamp(deltaY,−160,160) × (dark ? .6 : 1), preventDefault (passive:false). Drag: target += dy × (dark ? 1.1 : 1.4); on release add fling dragV × (dark ? 9 : 14).
- LIGHT MODE warp (only while scrolling, flat at rest): amt = min(|vel|*.03, 1); cc = clamp(c,−1.3,1.3);
rotateX = cc*amt*24deg; scaleX = 1 + amt*.22*cc²; scaleY = 1 + amt*.05*|cc|.
Result: the centre card stays unchanged, cards above centre flare wider at their TOP edge, cards below flare wider at their BOTTOM edge.
- DARK MODE drum: R = H*.62; θ = clamp(s/R, −1.7, 1.7);
y = top + sin(θ)*R; z = (cos(θ)−1)*R − 60; rotateX = −θ*57.3*.85 deg; rotateY −12deg; rotateZ −2.5deg; x = −sin(θ)*reelW*.06; scale .9;
opacity = 1 − clamp((|θ|−.75)/.6, 0, 1).
After input stops (140ms debounce, or immediately on drag release / switching to dark) SNAP target so the nearest card is exactly centred: base0 = H/2 − itemH/2 + 1.5*step; target = base0 + round((target−base0)/step)*step.
- A shared "curve" value t (0 light → 1 dark) lerps every transform component between the light and dark versions, animated during the theme wipe.
- transform order: translate3d(x,y,z) rotateX rotateY rotateZ scale(sx,sy). Apply the same transform to the matching item in both layers.
- Active project = card closest to the centre → highlight in both lists and update the chip "0N / 05". Hovering or clicking a list item scrolls the nearest copy of that card to the centre.
==================================================
7. LIGHT-MODE HOVER REVEAL (liquid cursor trail)
==================================================
Only when the base theme is light. On pointermove, add trail points interpolated every 3px: radius r0 = clamp(20 + speed*24, 20, 60) where speed = px/ms; cap at 420 points. Each point lives 950ms: r = r0 × life^0.65 × (grow-in over 90ms: .55→1) × (1 + .12·sin(seed + now*.006)).
Every frame, build one SVG path of all circles, each written as
"M(x−r) y a r r 0 1 1 (2r) 0 a r r 0 1 1 (−2r) 0 Z" (same winding so they union under nonzero),
and set it as the overlay layer's clip-path: path('...'). This reveals the dark hero (purple smoke, full-colour images, white text) exactly aligned underneath. In dark mode there is NO reveal; the cursor stirs the smoke instead.
==================================================
8. THEME TOGGLE — WOBBLY CIRCULAR WIPE
==================================================
Click the top-right toggle: the overlay layer (target theme) grows from the button centre as a wobbly circle drawn as a 96-segment polygon, r(a) = R × (1 + .07 sin(3a + 2.2t) + .045 sin(7a − 3.1t) + .03 sin(13a + 4t)), added to the same clip path. Duration 1250ms, easeInOutCubic, max radius = 1.25 × distance to the farthest corner. Drive curve t from the same easing. When finished: swap base/overlay roles, clear the trail, update aria-pressed/aria-label ("Switch to light/dark mode"), meta theme-color and body background.
At wipe start, add .glitch to both headlines: per-letter keyframes "rgb-split" .9s steps(6), delay var(--i)*18ms:
0% text-shadow .09em 0 #ff2e88, −.09em 0 #2ee6ff, 0 .05em #c8ff2e; translate(0,−.04em) skewX(−8deg)
35% text-shadow −.06em 0 #ff2e88, .07em 0 #2ee6ff, 0 −.04em #c8ff2e; translate(.02em,.02em) skewX(6deg)
70% text-shadow .03em 0 #ff2e88, −.03em 0 #2ee6ff; none
100% no shadow, no transform.
Dark headline hover: hovering a letter adds .hit to that letter in BOTH layers (via data-i) → rgb-split .7s --ease.
==================================================
9. INTERACTIVE PURPLE SMOKE (dark background, WebGL1)
==================================================
Add a <canvas class="smoke"> filling the dark .bg (dpr capped 1.5); when WebGL works, set .bg to a flat #1a0e3f. Fallback when WebGL is missing: the smoke image as a CSS cover background with gradients radial-gradient(120% 90% at 70% 40%, rgba(140,92,255,.18), transparent 60%) and linear-gradient(180deg, rgba(26,14,63,.1), rgba(18,8,44,.45)), slowly drifting (keyframes drift 38s alternate: scale 1.08 → 1.18, translate(−2%,1.5%), rotate 1.5deg).
- Load the smoke PNG with crossOrigin="anonymous" and UNPACK_FLIP_Y; until it loads, use a 1×1 rgb(40,20,96) texture.
- Velocity field: two ping-pong RGBA8 framebuffers at ¼ resolution, cleared to (0.5,0.5,0,1). rg = velocity encoded *.5+.5, b = density. Trail pass: self-advect (sample at uv − v*.010); v *= .972; density = max(d*.968 − .002, 0); use a .006 deadzone on decoded velocity; gaussian splat at the mouse (aspect-corrected, exp(−d²/.0028)) adds mouse velocity (frame delta in uv × 9, length clamped to 1) and density += g × min(1, |vel|*6) × .5.
- Display pass: value-noise fbm (5 octaves). p = uv × aspect × 2.2; n1 = fbm(p + time*(.035,.02)); n2 = fbm(p*1.6 + n1*1.7 − time*(.045,−.01)); warp = (n1−.5, n2−.5)*.045.
Image uv = cover-fit(uv)/1.08 zoom + warp − v*.11. Chromatic offset ca = |v|*.018 + density*.006 (sample R at +ca, G centre, B at −ca).
Mist overlay: + (.52,.38,1) × smoothstep(.42,.92, fbm(p*.85 + warp*22 − v*4 + time*(−.06,.025))) × .24.
Stir glow: + (.72,.56,1) × density × .45. Vignette: multiply by mix(1, .82, smoothstep(.35, 1.1, distance(uv, (.62,.45)))).
- Only render while dark is visible (dark base, wipe running, or reveal trail active). The cursor pushes and swirls the smoke and leaves a lavender glow plus a rainbow fringe that fade in about a second.
==================================================
10. RESPONSIVE
==================================================
≤1024px: .reel left 44%, width 40vw.
≤720px: title clamp(40px,13.4vw,72px); lede max-width 19em, margin-top 1em; reel centred, width min(82vw,420px), with mask-image linear-gradient(to bottom, transparent 27%, #000 37%, #000 76%, transparent 86%) so cards fade under the headline and footer; .index moves to bottom (bottom: --pad + 52px, left/right --pad), flex row space-between, left-aligned, showing only the active project name with the chip on the right; footer gap 24px. Drag with a finger scrolls the reel; no horizontal scroll at 375px.
==================================================
11. ACCESSIBILITY / MOTION
==================================================
Overlay layer aria-hidden; only the first 5 images get alt text (duplicates aria-hidden):
"Two potters in aprons standing in a sunlit studio courtyard", "Three cyclists in matching orange jerseys against a mint wall", "A designer sketching on a tablet beside a laptop and plants", "Overhead spread of pastries and coffee on marble", "A lone figure among saguaro cacti in a desert garden".
prefers-reduced-motion: no smoke time animation, no glitch/hit animations, a plain non-wobbly 350ms wipe.
On load, centre the first project (Lumen Ceramics); recompute layout on resize.