usePageMotions

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

import { usePageMotions } from "@hua-labs/hua/framework";

tsx

const motions = usePageMotions({
  hero: { type: "hero", entrance: "fadeIn", delay: 0 },
  title: { type: "title", entrance: "slideUp", delay: 200 },
  cta: { type: "button", entrance: "scaleIn", hover: true, delay: 400 },
});

return (
  <div>
    <div ref={motions.hero.ref} style={motions.hero.style}>Hero</div>
    <h1 ref={motions.title.ref} style={motions.title.style}>Title</h1>
    <button ref={motions.cta.ref} style={motions.cta.style}>CTA</button>
  </div>
);


config*	Record<string, PageMotionElement>	-	Element configuration map (first positional argument)
config[id].type*	"hero" \| "title" \| "button" \| "card" \| "text" \| "image"	-	Element type for preset styles
config[id].entrance	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	-	Entrance animation type
config[id].hover	boolean	-	Enable hover effects
config[id].click	boolean	-	Enable click effects
config[id].delay	number	0	Animation delay in milliseconds
config[id].duration	number	700	Animation duration in milliseconds


[elementId]	MotionRef	Motion ref for each configured element (ref, style, isVisible, isHovered, isClicked)
reset	() => void	Reset all motions to initial state

useSimplePageMotion useSmartMotion