mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-10-03 10:13:47 +10:00
Amruth Pillai
b48a9c2142
Audit every animation in the app and shared UI primitives against a frequency-first motion bar: keyboard and high-frequency actions no longer animate, remaining motion uses interruptible CSS transitions with shared easing tokens, and redundant animation code is removed. UI primitives (@reactive-resume/ui) - Dialog, alert dialog, popover and tooltip move from tw-animate keyframes to Base UI data-starting/ending-style transitions; menus, popovers and tooltips skip motion when opened from the keyboard (data-instant). - Dialog gains an `instant` prop; the command palette uses it. - Accordion animates its real panel height; caret rotates instead of swapping icons. - Menu backdrop blur moves onto the popup so it no longer snaps in after the fade; context menus and comboboxes fade only. - Sidebar collapse uses the strong ease-out curve and snaps on Cmd+B. - Toast, sheet, checkbox, tabs, toggle, inputs and message scroller get tokenised easing, correct transition properties and press feedback. - Tabs no longer squeeze a trigger narrower than its label. - Spinners keep spinning under prefers-reduced-motion. Web app - Remove the default route view transition and page-entrance slides. - Add EASE_OUT_STRONG for Motion; replace built-in "easeOut" everywhere. - Switch LazyMotion to domMax so layout and Reorder animations run. - Builder: consolidate 12 section list files into one ItemsSection, opacity-only list rows with popLayout, instant Cmd+0, faster dock zoom, crossfade that no longer dips, transform-based progress bars. - Dashboard: keep previous results while sorting/filtering, no empty-state flash, uncontrolled sidebar (no network round trip on collapse), calmer resume card tilt, no stacked hover wrappers. - Settings: drop entrance/stagger wrappers and ActionButton. - Agent: CSS marquee paused on hover; thread switches keep the layout. - Homepage: fix invalid transition declarations, CSS spotlight drift, scroll-hiding header without a JS spring, tokenised curves. - Theme switches change every color at once. - Remove SSR-only useIsClient guards from the SPA. Docs: rewrite the DESIGN.md animation section around the new tokens.
29 lines
978 B
TypeScript
29 lines
978 B
TypeScript
import { m, useInView, useReducedMotion, useSpring, useTransform } from "motion/react";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
type CountUpProps = {
|
|
to: number;
|
|
className?: string;
|
|
"aria-hidden"?: boolean | "true" | "false";
|
|
};
|
|
|
|
// Integer count-up with en-US grouping. Starts once when scrolled into view; reduced motion shows the final value.
|
|
export function CountUp({ to, className, "aria-hidden": ariaHidden }: CountUpProps) {
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const isInView = useInView(ref, { once: true });
|
|
const reducedMotion = useReducedMotion();
|
|
const spring = useSpring(0, { visualDuration: 0.8, bounce: 0 });
|
|
const text = useTransform(spring, (value) => Math.round(value).toLocaleString("en-US"));
|
|
|
|
useEffect(() => {
|
|
if (reducedMotion) spring.jump(to);
|
|
else if (isInView) spring.set(to);
|
|
}, [isInView, reducedMotion, spring, to]);
|
|
|
|
return (
|
|
<m.span ref={ref} className={className} aria-hidden={ariaHidden}>
|
|
{text}
|
|
</m.span>
|
|
);
|
|
}
|