pure-ui — Cursor Rules

• Default to use ease-out for most animations. • Animations should never be longer than 1s (unless it's illustrative), most of them should be around 0.2s to 0.3s.

• Don't use built-in CSS easings unless it's ease or linear. • Use the following easings for their described use case: • ease-in: (Starts slow, speeds up) Should generally be avoided as it makes the UI feel slow. • ease-in-quad: cubic-bezier(.55, .085, .68, .53) • ease-in-cubic: cubic-bezier(.550, .055, .675, .19) • ease-in-quart: cubic-bezier(.895, .03, .685, .22) • ease-in-quint: cubic-bezier(.755, .05, .855, .06) • ease-in-expo: cubic-bezier(.95, .05, .795, .035) • ease-in-circ: cubic-bezier(.6, .04, .98, .335) • ease-out: (Starts fast, slows down) Best for elements entering the screen or user-initiated interactions. • ease-out-quad: cubic-bezier(.25, .46, .45, .94) • ease-out-cubic: cubic-bezier(.215, .61, .355, 1) • ease-out-quart: cubic-bezier(.165, .84, .44, 1) • ease-out-quint: cubic-bezier(.23, 1, .32, 1) • ease-out-expo: cubic-bezier(.19, 1, .22, 1) • ease-out-circ: cubic-bezier(.075, .82, .165, 1) • ease-in-out: (Smooth acceleration and deceleration) Perfect for elements moving within the screen. • ease-in-out-quad: cubic-bezier(.455, .03, .515, .955) • ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1) • ease-in-out-quart: cubic-bezier(.77, 0, .175, 1) • ease-in-out-quint: cubic-bezier(.86, 0, .07, 1) • ease-in-out-expo: cubic-bezier(1, 0, 0, 1) • ease-in-out-circ: cubic-bezier(.785, .135, .15, .86)

• Use the built-in CSS ease with a duration of 200ms for simple hover transitions like color, background-color,opacity. • Fall back to easing rules for more complex hover transitions. • Disable hover transitions on touch devices with the @media (hover: hover) and (pointer: fine) media query.

• If transform is use in the animation, disable it in the prefers-reduced-motion media query.