类型： · 收录：2026-10-26 23:39:21 · 源码：会员可见
Build one standalone HTML file that recreates the Michelle 3D portfolio exactly. Inline all CSS and JavaScript. Load Three.js r186 and GSAP 3.15 with ScrollTrigger from a CDN. Do not use any local image, font, or model file. There is no video anywhere on the page. Every visual asset is one of these exact CloudFront URLs, fetched with crossorigin="anonymous":
Favicon SVG:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/e8232151-35b1-4df6-b371-bcacce3c7c96.svg
Portrait bust GLB (low-poly male head and shoulders, baked color texture, MeshBasicMaterial using that map):
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/faed83dc-8954-497b-999d-5f984ce599a8.glb
X / Twitter leather ball GLB:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/e7e50949-a1d4-4ba5-bcd0-6a656e3f875f.glb
Pinterest leather ball GLB:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/371d89a1-60ba-4320-9aab-3b14a1207263.glb
Behance leather ball GLB:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/8a1295d6-bf83-4783-9aff-13bdcc968a47.glb
Quiet Orbit WebP, 1536×1024:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/6bc6043a-51e0-4d03-a962-c137e32be1e0.webp
Little Listener WebP, 1536×1024:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/1aeb1262-42f8-4d13-a1ac-8a183e50787b.webp
Soft Switch WebP, 1536×1024:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/7df982c0-199d-43b9-ac98-d761ae94c9af.webp
HARD RULE — HERO BEFORE SCROLL
When scroll progress is 0, the first screen must look like a flat white page. The user must see only black Anton type, the portrait bust, and the three logo balls. They must not see the corridor, arches, columns, room colors, ceiling lights, floor shading, wall edges, or the far portfolio image.
The 3D hall may already exist in the scene, but a uniform named architecture is 0 until progress 0.16 and then eases to 1 by progress 0.45. The fragment shader must be:
surface = mix(vec3(1.0), paperColor, architecture) * mix(1.0, shadedTone, architecture)
At architecture 0 this is exactly #ffffff on every surface, including room meshes. Room color, contact shading, and skylight opacity are multiplied by architecture, so they are fully invisible at the start. The portfolio-wall plane opacity is 0 until progress 0.42 and reaches 1 at 0.66. Projected lettering paint is 0 until progress 0.12. Do not put a screenshot, video, or pre-rendered hallway behind the hero. Do not leave the unshaded corridor visible through the transparent hero.
FONT
Use Anton, weight 400, only. Load it from https://cdn.jsdelivr.net/fontsource/fonts/anton@5.2.5/latin-400-normal.woff2 with font-display swap. Fallback stack: Anton, Impact, sans-serif. font-synthesis: none. All site type is uppercase Anton. Arrows use Arial.
PAGE
lang=en. Title: Michelle — 3D Designer. theme-color #ffffff. Meta description: Michelle is a 3D designer creating playful objects and little worlds through form, materials, light and motion. White page background #fff. Root text color #0033ff, but the hero section overrides color to #000. Selection is white text on #0033ff. Hide the scrollbar. body overflow-x: clip. No page margin.
STRUCTURE, TOP TO BOTTOM
1. A scroll journey, class journey, height 900vh, aria-label "Michelle — 3D Designer".
2. Inside it, a sticky stage: position sticky, top 0, height 100vh, overflow clip, isolation isolate.
3. Inside the stage, three stacked full-bleed layers:
a. .scene — full-viewport WebGL hall. At progress 0 it renders as solid white.
b. .hero — HTML composition, pointer-events none, color #000, background transparent.
c. .portfolio — white interactive work list, opacity 0 and inert until the scroll endpoint.
4. After the journey, a normal document-flow contact section, height 100vh, white, text #161612.
5. A native dialog.project-dialog for a project.
HERO COPY, DESKTOP, EXACT LINE BREAKS
H1 aria-label "Hi, I'm Michelle": HI, I'M MICHELLE
Subtitle, four lines:
CURIOUS IDEAS BECOME PLAYFUL OBJECTS.
SMALL WORLDS SHAPED THROUGH FORM,
TACTILE MATERIALS AND LIGHT.
A LITTLE MOTION BRINGS THEM TO LIFE.
Footer: PLAYFUL DIMENSIONS
The avatar canvas sits between the subtitle and the footer in z-order. The footer sits in front of the avatar. The three balls sit in front of the footer.
COMPOSITION
Design frame is 1920×1080. A .hero-composition is positioned absolute, origin top left, width and height set in JS to the logical viewport size, then scaled with transform: scale(var(--composition-scale)); transform-origin: top left.
Desktop scale = min(viewportWidth/1920, viewportHeight/1080).
Title: left 2.083333%, top 2.407407%, font-size 240px, line-height 1.15, z-index 0.
Subtitle: left 2.34375%, top 28.611111%, font-size 63px, line-height 73px.
Footer: left 2.083333%, bottom 0.462963%, font-size 220px, line-height 1.15, z-index 2, transform-origin center.
Every line is display block, white-space nowrap, width max-content, font-weight 400, margin 0.
Title and subtitle never move. Only the footer tilts.
POINTER, DESKTOP
Mouse position inside the hero maps to look x and y from -1 to 1. GSAP eases look over 0.65s, footer over 0.55s, avatar over 0.75s, ease power2.out. Leaving the page or blurring the window returns look to 0. Motion strength fades out between scroll progress 0.035 and 0.11. Footer translation is lookX * -22px. Footer rotation is lookX * 0.105 radians, about 6 degrees. Footer Y is lookY * -14px minus a lift so the tilted line stays in frame. Pointer look stops at progress 0.94. This pointer motion must not reveal the hallway.
AVATAR
Separate transparent orthographic WebGL layer, camera z 3000, clear alpha. Load the portrait GLB. Rotate around the neck at 63% of the model height. Resting height target 992 logical pixels times avatarScale. avatarScale on desktop is min(viewportWidth, viewportHeight) / (1080 * compositionScale). Horizontal look rotates Y by x*0.2 radians (about 11.5 degrees) and Z by -x*0.018. Vertical look rotates X by y*0.1 (about 5.7 degrees). Position shifts about 32px horizontally and 24px vertically in design space. On scroll exit from progress 0.025 to 0.115, the bust folds away with a corkscrew: scale collapses, Y rotation reaches about -1.4π, and it drops in Z. It is hidden at exit 1. Do not fade it with opacity.
SOCIAL BALLS
Three GLBs, in order X, Pinterest, Behance, on a transparent orthographic layer above the footer. Materials become MeshBasicMaterial using each GLB color texture. They rest on the cap-height of PLAYFUL DIMENSIONS and share that line’s translation and rotation. Simulate at a fixed 120 Hz: gravity, rolling, ball-to-ball contact, damped rebound, and squash-and-stretch on impact. A ball that falls off returns above the viewport and drops again. Sleep at rest. Pause while the tab or hero is hidden. Soft radial shadow sprites under each ball. On scroll exit they arc, spin, and shrink to zero; do not hide them with opacity.
Hover hit area follows the deformed ball. Show a pill: text exactly "OPEN LINK ↗", Anton 24px, color #0033ff, height 60px, padding 0 24px, gap 16px, border-radius 100px, background rgb(230 230 230 / .74), backdrop-filter blur(14px). Hidden state is opacity 0, translateY(6px) scale(.94). Visible state is opacity 1, translateY(0) scale(1), 0.18s opacity and 0.24s transform with cubic-bezier(.2,.8,.2,1). The pill does not navigate. Social URLs stay unconfigured. The same balls and renderer move into the contact section.
SCROLL SCENE
Journey is 900vh. GSAP ScrollTrigger on .journey, start top top, end bottom bottom, scrub 0.55, ease none. Only the camera moves. Architecture and painted type stay fixed in the world.
Start camera: x 0, y 4, z 14, fov 44, near 0.1, far 120. Clear color #ffffff, no tone mapping.
From progress 0 through 0.16 the picture is still the white hero. Do not show depth.
Travel eases from progress 0.16 to 0.985. Camera X is sin(travel*π)*0.75. Camera Y is 4 - 0.15*sin(travel*π). Camera Z moves from 14 toward the portfolio wall. Yaw is 0.035*sin(turn*π) while turn eases from 0.16 to 0.52.
As architecture rises from 0 to 1 between 0.16 and 0.45, the white surfaces gain quiet shading and the four rooms fade in. The hall is a white architectural maquette with side masses and open extruded arches. Room colors, only visible after that fade: left blue #93a8d9, right terracotta #d79d80, left sage #a4b791, right ochre #d4ba7f. Overhead warm lights #fff6dc fade in with the same architecture value. At progress 0.12, hide the HTML hero in one frame and project the same Anton lettering, measured from the DOM line boxes, onto the walls. A depth test from the original viewpoint keeps paint off surfaces hidden behind a wall. Mouse look in the tunnel is up to about 14 degrees horizontal and 8 degrees vertical, and it only ramps in from progress 0.2 to 0.42, then settles back out from 0.72 to 0.94. The view recenters when the pointer leaves. The far wall is a canvas snapshot of the portfolio DOM, including the selected work image, and that plane stays transparent until progress 0.42. At progress 0.985 the HTML portfolio becomes active: opacity 1, pointer-events auto, aria-hidden false, inert removed. The sticky stage then releases and normal scrolling reveals contact.
PORTFOLIO
White background, text #161612, padding 4.8vh 2.8vw. Header: SELECTED WORK at the left, note "3D OBJECTS & LITTLE WORLDS" at the right. Three rows, each 33.33333% of the list height, grid 44% 36% 20%, color #99978e, border-bottom 1px solid #aba89f. Selected row color and border #161612. Selected name skewX(-7deg). Arrow ↗ only on the selected row.
Rows:
Quiet Orbit — Art direction / 3D / Materials — Object study. Description: An orbital sculpture in oak, brass and ceramic. Concentric rings turn a familiar astronomical idea into a warm, tactile desk object. A study of balance, joinery and afternoon light. Alt: Three wooden orbital rings holding a ceramic sphere and a small blue satellite on a brass axle.
Little Listener — 3D / Product / Lighting — Sound sculpture. Description: An imaginary listening device with a wooden horn, a looping brass tube and a ceramic dial. A playful exploration of sound through sculptural proportions and carefully lit natural materials. Alt: A flared wooden acoustic horn on a brass coil above an oak base with a red ceramic dial.
Soft Switch — 3D / Colour / Surface design — Tactile experiment. Description: A blue, softly padded controller set into a carved oak cradle. Cream buttons, an orange lever and a textile cable explore the contrast between soft surfaces and precise mechanical details. Alt: A soft blue controller with cream buttons and an orange lever on an oak stand.
Preview image is 27vw, aspect-ratio 3/2, left 51%, top 20%. Hover or focus selects a row and moves the preview with one GSAP y tween, duration 0.45, ease power3.out. Click or Enter opens the dialog with the same WebP, the services line, the title, and the description. Close, Escape, or backdrop click closes it and restores focus without jumping scroll. Focus outline is 2px solid #0033ff. Footnote: MATERIAL, LIGHT, A LITTLE CURIOSITY.
Dialog: width min(88vw, 1500px), max-height 90vh, white, two columns 65% 35%, backdrop rgb(18 18 16 / .65) with blur 8px. Close button top right: Close ×.
CONTACT
White, color #161612, height 100vh, same composition scale as the hero. Heading, two lines, 320px, line-height 0.96, letter-spacing -0.025em, top 4.8%, left 2.8%:
Want to
reach out?
Email link, top 68%, right 2.8%, 72px, underline 4px solid currentColor, href mailto:hello@example.com, visible text hello@example.com, with a ↗ prefix. Bottom row, left 2.8% to right 2.8%, bottom 2.8%, font-size 32px, space-between, plain text not links: X / TWITTER, PINTEREST, BEHANCE. When the section top hits 35% of the viewport, the three balls fall from above onto that row, compress, rebound, then rest. They do not recycle in this section.
MOBILE
Only when max-width 767px and portrait. Journey height 750svh. Stage and contact 100svh. Composition width base is 720, scale = viewportWidth/720.
Title becomes two lines, HI, I'M / MICHELLE, left 28px, top 40px, font-size 148px, line-height 1.
Subtitle left 28px, top 365px, font-size 32px, line-height 40px.
Footer becomes PLAYFUL / DIMENSIONS, left 28px, bottom 42px, font-size 128px, line-height 1.16, pointer-events auto, touch-action pan-y.
Horizontal drag on the footer tilts it. Horizontal drag in the tunnel looks around only after scroll has entered the hall. Vertical drag still scrolls. Tap a ball to show the pill at 27px type, height 68px; another tap or scroll hides it.
Avatar sits below the description. Balls collide with the first visible footer line. Pixel ratio cap 1.5. Tunnel field of view becomes 64 only after the hall is revealed. The opening frame is still flat white.
Portfolio padding 24px 22px. Heading 42px. Note 11px. Preview stays above the list, width 70%, left 15%. Rows stack: name 32px, services 11px, type 10px. Dialog is one column, width calc(100vw - 28px). Contact heading 160px at left 28px. Email 50px at top 57%, left 28px. Socials 28px.
REDUCED MOTION AND NO WEBGL
prefers-reduced-motion: journey 300vh, no sticky stage, static hero on flat white, then a separate static hall, then portfolio, balls at rest, no pointer tilt. If WebGL fails: journey 200vh, hero, portfolio, and contact remain readable HTML on white. Never show the hallway behind the opening hero.
DO NOT
Do not show the corridor, rooms, lights, or far portfolio wall on the opening frame. Do not invent a video, a background loop, extra sections, a nav bar, or different copy. Do not recolor the hero type blue. Do not replace the GLB portrait or balls with photographs or CSS shapes. Do not change the CloudFront URLs.