Skip to content

Commit 4297e3e

Browse files
jajupmochiclaude
andcommitted
feat(personal): open the entrance + 旺财 the Li Hua cat (focus, petting, crouch)
Entrance: navbar Personal now opens personal.html directly on both index files; the temporary coming-soon teaser is fully removed (overlay HTML x2, .ptz-* CSS, showPersonalTeaser JS); res/portfolio/img/personal-room.png re-shot from the v3 paper home (feeds the no-WebGL fallback too). 旺财 (procedural Li Hua tabby), three passes: - body: lathed cat silhouette + haunches/shoulder/scruff/cheeks; canvas mackerel fur (rings, dorsal line, tabby-M crown); white bib/belly/paws; ringed tail rooted inside the rear (was floating); whiskers; toon inverted-hull outline - face: golden almond eyes per Dragon-Li references (outer corners higher), big round pupils + double glints, random blinking, sleep/bliss squint; pink ears/nose - collar: cinnabar ring seated perpendicular to the neck axis; gilt link wraps the collar tube; hanging gilt tag engraved 旺财 (canvas, CJK-safe stack) - behaviour: 5-action state machine (sit+look / walk on a 7-node waypoint graph / sleep with breathing / stretch / groom) with smooth pose blending; reduced-motion = sleeping cat - interaction: click 旺财 -> camera focuses and FOLLOWS him; nearby cursor becomes a hand; click = paper-hand pat with 3 random reactions (blissful lean-in + floating hearts / belly-flop roll / offended shake then storm off); scroll out past 3.4u (or ESC) steps back; hotspots suspended during focus and intact after - collision: height-aware table zone -> crouch-slink (趴着走) under the coffee table (root -0.105, legs tucked, slower gait; clears the tabletop underside by 0.05+); post-reaction walks route to the nearest waypoint (kills the stale-node shortcut that cut across furniture); reactions suppressed under the table Verified: 0 console errors desktop+mobile loads; full interaction cycle (focus->pat x2->wheel-out->hotspots OK); all 3 reactions individually; numeric crouch clearance sampled across the table zone. Docs: UPDATES 2026-06-11 V2-V5, PLAN H3.M5.G2 updated; round shots in docs/strategy/personal-room-v2-2026-06-11/. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 5e73f8b commit 4297e3e

42 files changed

Lines changed: 422 additions & 50 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

css/main.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3576,17 +3576,6 @@
35763576
.coming-soon-toast { transition: opacity 0.1s ease; }
35773577
}
35783578

3579-
/* Personal-room teaser (temporary) */
3580-
.ptz-overlay { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: rgba(40,28,16,0.62); padding: 5vw; }
3581-
.ptz-overlay.on { display: flex; }
3582-
.ptz-card { position: relative; max-width: 520px; width: 100%; background: #f3ead4; border: 1px solid rgba(120,70,40,0.3); border-radius: 10px 7px 11px 8px; padding: 0.7rem; box-shadow: 0 22px 60px rgba(40,20,5,0.42); }
3583-
.ptz-card img { width: 100%; display: block; border-radius: 6px 4px 7px 5px; }
3584-
.ptz-cap { padding: 0.75rem 0.6rem 0.4rem; text-align: center; }
3585-
.ptz-cap b { font-family: 'Patrick Hand','LXGW WenKai',cursive; font-size: 1.45rem; color: #2e2a25; display: block; }
3586-
.ptz-cap span { font-size: 0.92rem; line-height: 1.45; color: #6f6557; display: block; margin-top: 0.25em; }
3587-
.ptz-x { position: absolute; top: 0.4rem; right: 0.65rem; background: none; border: none; font-size: 1.6rem; line-height: 1; color: #6f6557; cursor: pointer; z-index: 2; }
3588-
.ptz-x:hover { color: #7c3a2e; }
3589-
35903579
/* ============================================================
35913580
Site-wide search (Cmd/Ctrl+K) — nav button + modal + results
35923581
============================================================ */

docs/PLAN.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,8 @@ writing demonstrate technical communication ability beyond the homepage scroll.
458458
#### G2 — Paper pop-up home redesign (v2 + v3) `[✓]`
459459
- `[✓]` H3.M5.G2.T1 — (2026-06-11) v2: rebuilt the room as a **paper pop-up book diorama** (Linlin: v1 ugly + style-mismatched; personal content only). MeshToon + EdgesGeometry ink lines, parchment palette, 4 personal corners, pop-up entrance. `docs/strategy/personal-room-v2-2026-06-11/`.
460460
- `[✓]` H3.M5.G2.T2 — (2026-06-11) v3 per Linlin's 5-point review: indoor **paper home** (dollhouse cutaway; hinged door to a pocket trail world = future-expansion area), sane proportions, multi-part detailed objects, **diegetic interactions** (wall map / door swings open / vinyl spins + notes / album opens + page-flip + lightbox — right sidebar removed), aspect-adaptive full-screen HOME view. Verified: all modes + ESC chain, 0 console errors desktop + mobile.
461-
- `[ ]` H3.M5.G2.T3 — Post-ship: re-shoot `res/portfolio/img/personal-room.png` (homepage teaser still shows the v1 room) and decide when navbar **Personal** links `personal.html` directly again (currently the coming-soon teaser).
461+
- `[✓]` H3.M5.G2.T3 — (2026-06-11) Entrance opened: navbar **Personal**`personal.html` directly on both index files; the temporary coming-soon teaser (markup + `.ptz-*` CSS + `showPersonalTeaser` JS) removed; `res/portfolio/img/personal-room.png` re-shot from the v3 home (also feeds the no-WebGL fallback).
462+
- `[✓]` H3.M5.G2.T5 — (2026-06-11) 狸花猫 inhabitant: procedural Li Hua tabby (striped canvas fur, white bib/belly/paws, tabby-M head, ringed tail, whiskers, toon outline) with a behaviour state machine — sit+look / walk (waypoint graph, collision-free) / sleep (breathing) / stretch / groom, random transitions with smooth pose blending; reduced-motion = asleep. **v2 refinement (same day, Linlin's 4 points):** lathed organic body + haunches/scruff/cheeks; tail properly rooted (was floating); layered amber eyes w/ slit pupils + random blinking; cinnabar collar + gilt 旺财 tag. **v3 (same day):** click-to-focus + camera-follow, pat interaction w/ 3 random reactions (bliss+hearts / flop / storm-off), wheel-out exit; eyes redesigned cuter (Dragon-Li ref: golden almond, round pupil, 2 glints); collar seated ⊥ neck axis + tag chained via gilt link.
462463
- `[ ]` H3.M5.G2.T4 — Replace canvas postcard placeholders with Linlin's real photos (`photoTex`/`photoURL` call sites); optionally expand the outdoor world beyond the door.
463464

464465
---

docs/UPDATES.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
## Master TOC
1010

1111
- [2026-06-11](#2026-06-11)
12+
- [V5 — 旺财 slinks under the coffee table (height-aware collision)](#v5--旺财-slinks-under-the-coffee-table-height-aware-collision) — a standing cat's head (y≈0.68) clipped through the tabletop (underside y≈0.59); now the table zone triggers a smooth crouch-walk (root −0.105, legs tucked, head down, slower gait) that clears the table by 0.05+, and post-reaction walks route to the NEAREST waypoint (the stale-node shortcut was the path that cut through furniture). Reactions are suppressed under the table (hearts only).
13+
- [V4 — pet 旺财: focus-follow camera, pat with 3 reactions; cuter eyes; collar fixed](#v4--pet-旺财-focus-follow-camera-pat-with-3-reactions-cuter-eyes-collar-fixed) — click 旺财 → the camera focuses and follows him around; nearby cursor becomes a hand; click = a paper hand pats him with one of 3 random reactions (blissful lean-in + hearts / belly-flop roll / offended shake-then-storm-off); scroll out (or ESC) steps back. Eyes redesigned to Dragon-Li reference (large golden almond, outer corner higher, big round pupil, two glints). Collar now truly wraps the neck and the 旺财 tag chains to it via a link.
14+
- [V3 — 旺财 gets a real body](#v3--旺财-gets-a-real-body) — the cat refined per Linlin's 4 points: lathed organic body (no more capsule-pill) + haunches/shoulder/scruff/cheeks; tail properly rooted (was floating 0.27 above the back); layered eyes (dark rim, amber iris, vertical slit pupil, glint) with random blinking; cinnabar collar + gilt tag engraved 旺财. Sleep tail flattened; fallback image re-shot.
15+
- [V2 — Personal entrance opened + a living 狸花猫](#v2--personal-entrance-opened--a-living-狸花猫) — navbar Personal now opens `personal.html` directly (teaser removed, teaser/fallback image re-shot from the v3 home); the placeholder cat became a procedural Li Hua tabby with 5 random, smoothly-blended behaviours (sit+look / walk on a waypoint graph / sleep / stretch / groom).
1216
- [V1 — Personal page rebuilt: paper pop-up HOME with diegetic interactions (v2+v3)](#v1--personal-page-rebuilt-paper-pop-up-home-with-diegetic-interactions-v2v3)`personal.html` redesigned twice in one arc: v2 turned the generic 3D room into a parchment-true paper pop-up-book diorama (personal content only); v3, after Linlin's 5-point review, made it an indoor paper home (hinged door opening onto a pocket trail world) with game-like in-world interactions — wall-map story, door swing, spinning vinyl + floating notes, a page-flipping photo album — replacing the right sidebar entirely. Full-screen aspect-adaptive initial view.
1317
- [2026-06-08](#2026-06-08)
1418
- [V3 — EN CV updated to the research-scientist build](#v3--en-cv-updated-to-the-research-scientist-build)`res/cv/CV_Linlin_Jia_en.pdf` replaced (6 pp, 207 KB); same filename so every "my cv" link picks it up.
@@ -81,6 +85,92 @@
8185

8286
# 2026-06-11
8387

88+
## V5 — 旺财 slinks under the coffee table (height-aware collision)
89+
90+
Linlin spotted the cat clipping through the coffee table. Root causes + fixes:
91+
92+
- **Height conflict.** Standing, the cat's back tops out at y≈0.595 and the head at ≈0.68,
93+
while the tabletop's underside is at y≈0.59 — any crossing clipped. Fix (per Linlin's
94+
suggestion): a **table zone** (r 0.8 around the tabletop) makes a walking cat
95+
**crouch-slink (趴着走)**: root drops 0.105, legs tuck (+0.85 rad), head lowers, gait
96+
swing/bounce damped, speed ×0.65 — crouched clearance 0.05+ under the table, eased in
97+
and out (no snapping). Verified numerically (root 0.261→0.150 across the zone) and
98+
visually (side shots at table height).
99+
- **Stale-node shortcut.** When a pet reaction interrupted a walk, the next walk targeted
100+
a neighbour of the *last visited* node from wherever the cat stood — a straight line
101+
that could cut across furniture. Now an off-graph cat routes to the **nearest** waypoint
102+
first.
103+
- Reactions are suppressed while inside the table zone (no sitting up under the tabletop;
104+
patting there gives hearts only).
105+
106+
## V4 — pet 旺财: focus-follow camera, pat with 3 reactions; cuter eyes; collar fixed
107+
108+
Third cat pass per Linlin's points:
109+
110+
- **Click-to-focus + follow.** Clicking 旺财 (hover shows a washi「旺财」label + pointer)
111+
enters a focus mode: the camera tweens close and then **follows him** as he wanders
112+
(target tracks the cat each frame; the camera keeps its user-controlled orbit offset).
113+
Hotspot clicks are suspended during focus; ESC or **scrolling out past 3.4 units**
114+
steps back to the HOME view (the requested wheel-out exit).
115+
- **Patting.** While focused, the cursor near the cat becomes a **hand** (`grab`); click
116+
= a paper hand (ink-outlined canvas, matching the world) bobs two pats over his head,
117+
and one of **3 random reactions** plays: ① blissful — leans into the hand, eyes squint
118+
shut, 3 cinnabar hearts float up; ② flop — rolls onto his side, belly up, and rights
119+
himself; ③ offended — quick head-shake, tail lashing, then storms off to another
120+
waypoint. Reactions blend through the same pose system (no snapping); reduced-motion
121+
gets hearts only. Verified: full cycle focus→pat→pat→wheel-out→hotspots-intact, plus
122+
each reaction individually; 0 console errors.
123+
- **Cuter eyes** (per [Dragon Li breed references](https://en.wikipedia.org/wiki/Dragon_Li):
124+
large luminous almond eyes, golden-green, outer corners set higher) — rebuilt as big
125+
golden almonds with **large round pupils** + two glints, outer-corner-up tilt; reads
126+
warm instead of beady. Blink + sleep/bliss squint retained.
127+
- **Collar/tag fixed.** The collar ring now sits perpendicular to the neck axis (fully
128+
around the neck, inner edge seated in the fur) and the 旺财 tag hangs from a **gilt
129+
link that wraps the collar tube** — chained, not floating. Verified in macro shots.
130+
131+
## V3 — 旺财 gets a real body
132+
133+
Cat refinement per Linlin's 4-point review (technique grounded in a quick web check:
134+
[LatheGeometry profile-spinning](https://threejs.org/docs/pages/LatheGeometry.html) is the
135+
standard way to get organic bodies from a 2D silhouette; also referenced
136+
[three-low-poly](https://github.com/jasonsturges/three-low-poly) and the
137+
[learning-three.js lathe example](https://github.com/josdirksen/learning-threejs/blob/master/chapter-06/02-advanced-3d-geometries-lathe.html)):
138+
139+
- **Body de-geometrized.** The capsule pill became a **lathed cat silhouette** (neck →
140+
shoulders → belly → haunches → tapered rear, 12-point profile spun 18 segments), plus
141+
haunch/shoulder/scruff lumps and white cheeks — reads as an animal, not a primitive.
142+
- **Tail rooted.** The tail base was floating 0.27 above the spine (v1 bug Linlin spotted);
143+
now anchored inside the rear of the body with a joint ball hiding the seam. Sleep-pose
144+
tail re-tuned to lie flat on the floor (was ending tip-up like a question mark).
145+
- **Eyes rebuilt.** Black dots → layered cat eyes: dark rim, amber iris (Li Hua yellow),
146+
vertical slit pupil, white glint, slight outward angle — plus **random blinking**
147+
(every 2–7 s) and eyes closed while sleeping.
148+
- **项圈 + 旺财.** Cinnabar leather collar (torus, tilted with the neck) + a gilt ring and
149+
a hanging gilt tag engraved **旺财** (canvas texture, maroon rim, CJK-safe font stack).
150+
Verified readable in macro screenshots.
151+
- Re-verified: 18 s roam (walk→sit→walk, continuous positions), all poses with the new
152+
body, 0 console errors; `res/portfolio/img/personal-room.png` re-shot with the final cat.
153+
154+
## V2 — Personal entrance opened + a living 狸花猫
155+
156+
- **Entrance open.** Navbar **Personal**`personal.html` directly on both index files;
157+
the temporary coming-soon teaser fully removed (overlay markup ×2, `.ptz-*` CSS,
158+
`showPersonalTeaser`/`closePersonalTeaser` JS). Verified: click navigates, no stray
159+
references, no new console errors.
160+
- **Teaser/fallback image re-shot.** `res/portfolio/img/personal-room.png` now shows the
161+
v3 paper home (clean render, UI hidden, cat in frame) — used by `personal.html`'s
162+
no-WebGL fallback.
163+
- **狸花猫 (Li Hua tabby).** The 2-box placeholder became a procedural cat: canvas-painted
164+
mackerel fur (rings + dorsal line + tabby-M crown), white bib/belly/paws/muzzle, pink
165+
ears + nose, green eyes with glints, whiskers, ringed tail (3-segment chain), toon
166+
inverted-hull outline. **Behaviour state machine** with 5 actions — sit+look-around /
167+
walk / sleep (breathing) / stretch / groom (nodding) — random transitions with smooth
168+
pose blending (sleep→stretch 80%, etc.), walking on a 7-node waypoint graph with
169+
edge-list adjacency so paths are collision-free by construction; gait, head-bob, tail
170+
sway/flick layered on top. `prefers-reduced-motion` → the cat just sleeps and breathes.
171+
Verified: 25 s roam sample shows continuous positions + random state changes; all 5
172+
poses screenshot-checked; 0 console errors.
173+
84174
## V1 — Personal page rebuilt: paper pop-up HOME with diegetic interactions (v2+v3)
85175

86176
Linlin: the v1 3D room was ugly, style-mismatched, and carried professional content. Two
372 KB
Loading
366 KB
Loading
387 KB
Loading
317 KB
Loading
347 KB
Loading
367 KB
Loading
254 KB
Loading

0 commit comments

Comments
 (0)