The plan: convert LandingPage to a "use client" component, listen to splinemousehover and splinemousedown events from the <spline-viewer> element, track state, and pass it down to the bag column which transitions to a smaller scale when those events fire — giving space for the Spline scene to show.

Now attach the ref to the <spline-viewer> and wire splineActive into the bag column scale:

Now wire splineActive to the bag column so it shrinks and fades when the Spline scene is interacted with:

Now update the TypeScript declaration to include the ref prop so the spline-viewer element accepts it without TS errors:

When the user hovers over or clicks the Spline scene, three events are captured — splinemousehover scales the bag down to 55% with a spring cubic-bezier transition and fades it to 25% opacity, making the 3D scene clearly visible behind. splinemouseleave springs it back to full size. splineMouseDown triggers the same shrink and auto-reverts after 1.8 s so the image smoothly returns once the Spline click animation settles. The ref on <spline-viewer> gives the useEffect a direct handle on the custom element to attach native DOM event listeners.

I have the full file. The plan: on splineMouseDown, instead of just setting splineActive, wait for the Spline animation to finish (1.8 s delay matches the current timeout), then use useRouter to navigate to /#pricing. I'll also add a navigating state so the "Ver Planes" button visually reacts — showing a subtle pulse — while the Spline animation plays out.

Now update the "Ver Planes" button to reflect the navigating state visually — it pulses while waiting for Spline to finish:

When the user clicks anywhere on the Spline scene, splineMouseDown fires triggerNavigation: the bag image shrinks to 55% with the spring transition (giving the Spline animation full visual space for 1.8 s), then router.push("/#pricing") scrolls the page to the pricing section. The "Ver Planes" button is now a <button> that calls the same triggerNavigation function directly — it pulses with animate-pulse and shows "Cargando..." while the Spline animation is running, preventing double-triggers via the navigating guard. Hover over the Spline scene still shrinks the bag without navigating, since onHover/onLeave only toggle splineActive when not in a navigation sequence.