SlideIn
A small, fixed-distance jump-and-fade entrance triggered by IntersectionObserver, from the left, right, or bottom edge.
Installation
npx dafink-ui add slide-inDemo
Jumps in from the bottom
Jumps in from the left
Jumps in from the right
Props
| Name | Type | Default | Description |
|---|---|---|---|
| direction | 'left' | 'right' | 'bottom' | 'bottom' | Which edge the element jumps in from when scrolled into view. |
| distance | number | 24 | Pixel distance of the jump. |
| once | boolean | true | Reveal only on first entry. When false, content re-hides on exit and re-reveals on re-entry. |
| children | ReactNode | - | Content to reveal. |
| className | string | '' | Additional CSS classes. |
Accessibility
SlideIn explicitly checks window.matchMedia('(prefers-reduced-motion: reduce)') in a useEffect before ever hiding content, skipping the IntersectionObserver and leaving children rendered fully visible when the user prefers reduced motion. The wrapper is a plain, non-decorative <div> — its children are real content, not aria-hidden — and it adds no role, tabindex, or focus handling, so it never changes the keyboard behavior of whatever it wraps.