Overview
Every animation in the HorizonX motion library in one runnable project. The gallery lists all 50 by family with a looping demo, and each one has its own page with the live component, its timing, accessibility notes and a ready prompt to ask Claude or Codex for it. Families: Overlays (10), Navigation (8), Forms (8), Feedback (8), Content (8), Buttons (4) and Motion (4), from modal, command palette and toast to sliding tabs, date picker, drag reorder and shared element transitions. Motion: enter transitions run 180 to 260 ms with an ease-out curve and exits 120 to 180 ms with an ease-in curve. Shared durations and easing curves live in one tokens file. With reduced motion turned on, every component changes state without movement and stays fully usable. Built with React 19 and TypeScript, Tailwind CSS 4, Motion and CSS transitions, with focus, keyboard and dismiss behavior from Base UI and React Aria, and Vite. Light and dark themes come from CSS variables you can edit. Included: the source of all 50 components, the gallery app with a page per animation, shared motion tokens, light and dark theme variables, the wireframe pages the demos are drawn on, and setup guides for people and for AI coding agents.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
