@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
117 lines (116 loc) • 1.94 kB
JavaScript
import { durations, easings } from "./tokens.js";
const fadeIn = {
initial: {
opacity: 0
},
animate: {
opacity: 1
},
exit: {
opacity: 0
},
transition: {
duration: durations.normal,
ease: easings.ease
}
};
const fadeInUp = {
initial: {
opacity: 0,
y: 8
},
animate: {
opacity: 1,
y: 0
},
exit: {
opacity: 0,
y: 8
},
transition: {
duration: durations.normal,
ease: easings.easeOut
}
};
const fadeInDown = {
initial: {
opacity: 0,
y: -8
},
animate: {
opacity: 1,
y: 0
},
exit: {
opacity: 0,
y: -8
},
transition: {
duration: durations.normal,
ease: easings.easeOut
}
};
const scaleIn = {
initial: {
opacity: 0,
scale: 0.95
},
animate: {
opacity: 1,
scale: 1
},
exit: {
opacity: 0,
scale: 0.95
},
transition: {
duration: durations.fast,
ease: easings.easeOut
}
};
const slideInFromLeft = {
initial: {
opacity: 0,
x: -16
},
animate: {
opacity: 1,
x: 0
},
exit: {
opacity: 0,
x: -16
},
transition: {
duration: durations.slow,
ease: easings.easeOut
}
};
const slideInFromRight = {
initial: {
opacity: 0,
x: 16
},
animate: {
opacity: 1,
x: 0
},
exit: {
opacity: 0,
x: 16
},
transition: {
duration: durations.slow,
ease: easings.easeOut
}
};
const reducedMotion = {
initial: {},
animate: {},
exit: {},
transition: {
duration: 0
}
};
export { fadeIn, fadeInDown, fadeInUp, reducedMotion, scaleIn, slideInFromLeft, slideInFromRight };
//# sourceMappingURL=presets.js.map