Swipe Hint First Visit

ProNew

Use this when it is not obvious that a row scrolls: a small "Swipe for more" hint over the next card that goes away at the first drag, key or button press, and shows still text instead of motion with reduced motion.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

hint

Guide and examples

When to use it

Use it on touch-first rows where the next card barely peeks, such as a mobile home screen, so the first visit teaches the gesture.

Do not use it on desktop rows with visible arrows, or on every visit: show it once and let it stay gone.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`CarouselItem[]`	`-`	The slides: `{ id, label, content }`.
`label`	`string`	`-`	Accessible name of the carousel.
`hint`	`string`	`Swipe for more`	The hint text.
`onDismiss`	`() => void`	`-`	Called once when the hint is dismissed, so you can remember it.

Accessibility

The hint is decorative and aria-hidden: screen reader users have the labelled buttons and need no gesture.
It never traps or blocks input (pointer events pass through) and disappears at the first drag, key press or button press.
Motion is limited to a gentle pulse that is removed with prefers-reduced-motion.
Keyboard: Any carousel key or button dismisses the hint

Testing

The pattern ships with a Testing Library test (swipe-hint-first-visit.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.