Author: 桌子
Try it live About this project
Maya Bennett is a six-chapter 3D résumé for a fictional graphic designer. Four Tripo fruit models float between biography, education, career and expertise panels while scrolling moves an imported camera animation forward or backward.
The WebGL layer stays separate from the HTML résumé, keeping the story readable and skippable even without the 3D scene. Below it, six branding, packaging and editorial projects open into focused detail views, while Color Lab exposes the lighting, focus and material controls behind the final look.
Highlights
- Scroll through six résumé chapters while the imported camera animation moves with you — scroll back and the same journey reverses naturally.
- Drag any of the four floating fruit models to spin it with inertia, then watch it settle back into the scene.
- Open Color Lab to tune exposure, depth of field, EXR lighting and each fruit material in real time.
- Continue into six selected identity, packaging and editorial projects, each opening into its own detail view.
Technical breakdown
3D assets · Tripo fruit models
Banana, tomato, strawberry and apple ship as four GLB assets whose scene nodes and materials carry Tripo identifiers. React Three Fiber loads each asset through one shared component, while scene configuration owns scale, position, floating motion and focus offsets.
Scroll choreography · GSAP + animated camera
GSAP ScrollTrigger maps the résumé’s scroll progress to one 0–1 timeline. The imported camera GLB is normalized to five seconds and sampled across frames 0, 60, 120, 180, 240 and 300, so each chapter lands predictably and reverses on upward scroll.
Fruit interaction · quaternion drag and return
Pointer movement drives quaternion rotation and a capped angular velocity. After release, each fruit keeps a short inertial spin, then damping returns it to its authored pose and fades automatic motion back in; the same pointer path works for mouse and touch.
Cinematic finish · EXR light, autofocus and Color Lab
An EXR sky lights PBR materials through PMREM, while a fixed 25mm camera shifts focus between the four-fruit group and the active subject. BokehPass, bloom and grading finish the frame, and Color Lab exposes those controls live.
