Landing 3D decor: scroll-driven rotation and higher damping#119
Open
Landing 3D decor: scroll-driven rotation and higher damping#119
Conversation
- Combine scroll-based azimuth/polar deltas with desktop pointer parallax - Single rAF loop and passive scroll listener for mobile and desktop - Raise HERO_MODEL_DAMPING and OrbitControls dampingFactor for snappier follow Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Scroll progress was clamped after ~one viewport, so lower Python decor appeared static. Use document scroll range and refresh on resize. Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
MainLayout wraps content in PageScrollContainer; scrolling happens on [data-overlayscrollbars-viewport], not window. Attach scroll listener and scroll metrics to that element with window fallback and a short rAF chase for deferred OS init. Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
Increase azimuth/polar amplitudes, scroll multipliers, polar clamp range, follow damping, and pointer parallax strength for clearer motion. Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
Add useLandingDecor3dMobileEntrance: fade + slide + scale on xs/sm only, hero after mount, Python on section intersection; respects reduced motion. Merge sx into hero and Python wrappers (inner Box for Python preserves vertical centering). Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
Desktop uses original pointer parallax ranges, damping, and polar clamps; no scroll listeners. Revert OrbitControls dampingFactor to 0.005 for interactive canvases. Reset pose when crossing mobile/desktop. Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
…helper - Extract prefersReducedMotion to shared lib; use in landing reveal + 3D entrance - landingHeroOrbitMotionConstants: single source for desktop vs mobile orbit tuning - getPageScrollRoot + attachPageScrollRoot simplify useHeroOrbitModelMotion - LANDING_DECOR_CANVAS_SIZE_PX / GLASS_OPACITY_SX for hero + Python wrappers - useLandingDecor3dMobileEntrance: re-arm entrance only on desktop→mobile - useLandingReveal: fix id-length; eslint pragmas for intentional sync setState Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
- Add smoothed dual-sine idle azimuth/polar on mobile (respect reduced motion) - Window touch listeners (capture) map finger position with higher gain + decay - idleMotionPhaseSec + LANDING_DECOR_PYTHON_IDLE_MOTION_PHASE_SEC to de-phase models - Extend LANDING_HERO_ORBIT_TUNING.mobile with idle and touch constants Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
…r touch polar - Double desktop/mobile frameDamping for snappier follow - LANDING_DECOR_PYTHON_CANVAS_SIZE_PX (~22% larger per breakpoint) - Raise mobile touchPolarMultiplier for clearer vertical finger effect Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
- Remove scroll listeners and scrollPhasePx; delete getPageScrollMetrics - Triple frameDamping (desktop 0.48; mobile 1 = snap to target) - Mobile motion: idle + screen-space touch only Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Landing background 3D decor: mobile uses idle oscillation + screen-space touch parallax (global
windowtouch listeners) + mobile-only entrance animations. Desktop uses mouse parallax only. No scroll-driven orbit (scroll metrics / listeners removed).Motion
useMobileLayout): time-based idle drift + touch position mapped to azimuth/polar; touch deltas decay after release.idleMotionPhaseSec/LANDING_DECOR_PYTHON_IDLE_MOTION_PHASE_SECde-phases hero vs Python idle.mousemoveparallax; blur / mouseleave resets pointer deltas.LANDING_HERO_ORBIT_TUNING.*.frameDamping— desktop 0.48; mobile 1 (snap to target each frame after 3× from prior values).Mobile appearance (
xs/smonly,useMobileLayout)useLandingDecor3dMobileEntrance: fade + slide + scale; respects reduced motion.Layout / size
LANDING_DECOR_PYTHON_CANVAS_SIZE_PXfor larger Python ambient canvas vs hero.Refactor
prefersReducedMotionin#/shared/lib/prefersReducedMotion.landingHeroOrbitMotionConstants.tsholds orbit/touch/idle tuning.Testing
pnpm exec eslinton touched files +pnpm run tsc(pass).