ToolTicker

Horizontal scrolling ticker of tools, technologies, or skills.

stable display #motion#marquee#branding

ReactAstroTailwindTypeScriVercelFigmaClaudeCursor

Loading preview…

Usage

- Use on About / Lab / brand-forward pages to show your toolset. - 8–20 items optimal — fewer feels sparse, more is overwhelming. - Pair with subtle dividers between items (vertical bars, dots, asterisks) for editorial feel.

Do / Don't

- **Do** keep tool names short (one or two words). - **Do** include semantic icons or initials when possible. - **Don't** use for actual links — focus disappears too fast. - **Don't** mix with ScrollMarquee on the same page (motion competition).

Tokens

motion.duration-base — 300ms
motion.ease-out-quart — cubic-bezier(0.165, 0.84, 0.44, 1)
space.4 — 1rem

ScrollMarquee

A11y

Respects prefers-reduced-motion — animation pauses. Pauses on hover and keyboard focus. Use aria-label on wrapper to describe contents.

Source

src/components/ToolTicker.tsx

Live playground