feat: initial @jason/ui-kit — tokens, preset, components, motion, blocks, Impeccable

src/motion/index.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { motion, useReducedMotion, type Variants } from "motion/react";
+
+const easeOut = [0.22, 1, 0.36, 1] as const;
+
+/** Fade + rise on mount. Respects prefers-reduced-motion. */
+export function FadeIn({
+  children,
+  delay = 0,
+  y = 8,
+  className,
+}: {
+  children: React.ReactNode;
+  delay?: number;
+  y?: number;
+  className?: string;
+}) {
+  const reduce = useReducedMotion();
+  return (
+    <motion.div
+      className={className}
+      initial={reduce ? false : { opacity: 0, y }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-10% 0px" }}
+      transition={{ duration: 0.4, ease: easeOut, delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/** Stagger container — pair with <StaggerItem>. */
+export const staggerContainer: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.06 } },
+};
+export const staggerItem: Variants = {
+  hidden: { opacity: 0, y: 10 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: easeOut } },
+};
+
+export function Stagger({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <motion.div
+      className={className}
+      variants={staggerContainer}
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, margin: "-10% 0px" }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+export function StaggerItem({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <motion.div className={className} variants={staggerItem}>{children}</motion.div>;
+}
+
+export { motion };