components / fade-in

fade-in.

fade + translate a node in on mount. pure css keyframe with per-instance delay/offset; stagger a list via the staggerDelay helper. honors prefers-reduced-motion.

01fade in on mount
02staggered by index
03pure css, no motion dep
04respects reduced motion
installation
bunx @justin06lee/chrome@latest add fade-in
props
nametypedefaultdescription
asElementType'div'element/component to render.
delaynumber0delay before the animation starts, in seconds.
ynumber-10starting vertical offset in px (animates to 0).
xnumber0starting horizontal offset in px (animates to 0).
durationnumber0.8animation duration in seconds.
classNamestring-
childrenReactNode-