The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 6 |
| * toggles) where a little overshoot reads as physical. `MotionConfig |
| 7 | * reducedMotion="user"` in the provider turns transforms off for people |
| 8 | * who ask for less motion. |
| 9 | */ |
| 10 |
| 11 | export const EASE_OUT = [0.22, 1, 0.36, 1] as const; |
| 12 |
| 13 | export const transitions = { |
| 14 | /** Enter/exit of panels, rows, and popovers. */ |
| 15 | enter: { duration: 0.24, ease: EASE_OUT } satisfies Transition, |
| 16 | /** Hover and press feedback. */ |
| 17 | quick: { duration: 0.14, ease: EASE_OUT } satisfies Transition, |
| 18 | /** Shared-layout indicators (tabs, segmented controls). */ |
| 19 | indicator: { type: "spring", stiffness: 520, damping: 40, mass: 0.8 } satisfies Transition, |
| 20 | /** Direct manipulation: drag and drop, switches. */ |
| 21 | spring: { type: "spring", stiffness: 420, damping: 32 } satisfies Transition, |
| 22 | } as const; |
| 23 |
| 24 | /** Stagger list items by index, capped so long lists still arrive quickly. */ |
| 25 | export function staggerDelay(index: number, step = 0.03, max = 0.3): number { |
| 26 | return Math.min(index * step, max); |
| 27 | } |
| 28 |
| 29 | export const fadeUp = { |
| 30 | initial: { opacity: 0, y: 6 }, |
| 31 | animate: { opacity: 1, y: 0 }, |
| 32 | exit: { opacity: 0, y: -4 }, |
| 33 | } as const; |
| 34 |