All components
Scroll Cue
NavigationA mouse-shaped scroll hint that fades out once the reader scrolls.
Hero content
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/scroll-cue.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/scroll-cue.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Scroll" | Text under the mouse. Empty string shows only the icon. |
| threshold | number | 80 | How far the reader must scroll, in px, before it fades. |
| containerSelector | string | - | Selector for the scrolling element, when the window is not what scrolls. |
Accessibility
- aria-hidden: it is a hint, and the page is scrollable without it.
- pointer-events-none, so it never intercepts a click.
- Holds still under prefers-reduced-motion rather than looping.
- Hidden below the sm breakpoint, where a scroll hint earns nothing.
Dependencies
motionclsxtailwind-merge