react-awesome-reveal 4.0.0 → 4.1.0

package/dist/index.js

@@ -0,0 +1,2089 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AttentionSeeker: () => AttentionSeeker,
+  Bounce: () => Bounce,
+  Fade: () => Fade,
+  Flip: () => Flip,
+  Hinge: () => Hinge,
+  JackInTheBox: () => JackInTheBox,
+  Reveal: () => Reveal,
+  Roll: () => Roll,
+  Rotate: () => Rotate,
+  Slide: () => Slide,
+  Zoom: () => Zoom,
+  default: () => Reveal
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/AttentionSeeker.tsx
+var import_react31 = require("react");
+
+// src/animations/attention_seekers/bounce.ts
+var import_react = require("@emotion/react");
+var bounce = import_react.keyframes`
+  from,
+  20%,
+  53%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0) scaleY(1.1);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0) scaleY(1.05);
+  }
+
+  80% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0) scaleY(0.95);
+  }
+
+  90% {
+    transform: translate3d(0, -4px, 0) scaleY(1.02);
+  }
+`;
+
+// src/animations/attention_seekers/flash.ts
+var import_react2 = require("@emotion/react");
+var flash = import_react2.keyframes`
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+`;
+
+// src/animations/attention_seekers/headShake.ts
+var import_react3 = require("@emotion/react");
+var headShake = import_react3.keyframes`
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+`;
+
+// src/animations/attention_seekers/heartBeat.ts
+var import_react4 = require("@emotion/react");
+var heartBeat = import_react4.keyframes`
+  0% {
+    transform: scale(1);
+  }
+
+  14% {
+    transform: scale(1.3);
+  }
+
+  28% {
+    transform: scale(1);
+  }
+
+  42% {
+    transform: scale(1.3);
+  }
+
+  70% {
+    transform: scale(1);
+  }
+`;
+
+// src/animations/attention_seekers/jello.ts
+var import_react5 = require("@emotion/react");
+var jello = import_react5.keyframes`
+  from,
+  11.1%,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  22.2% {
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+`;
+
+// src/animations/attention_seekers/pulse.ts
+var import_react6 = require("@emotion/react");
+var pulse = import_react6.keyframes`
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+`;
+
+// src/animations/attention_seekers/rubberBand.ts
+var import_react7 = require("@emotion/react");
+var rubberBand = import_react7.keyframes`
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+`;
+
+// src/animations/attention_seekers/shake.ts
+var import_react8 = require("@emotion/react");
+var shake = import_react8.keyframes`
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(10px, 0, 0);
+  }
+`;
+
+// src/animations/attention_seekers/shakeX.ts
+var import_react9 = require("@emotion/react");
+var shakeX = import_react9.keyframes`
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(10px, 0, 0);
+  }
+`;
+
+// src/animations/attention_seekers/shakeY.ts
+var import_react10 = require("@emotion/react");
+var shakeY = import_react10.keyframes`
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(0, -10px, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(0, 10px, 0);
+  }
+`;
+
+// src/animations/attention_seekers/swing.ts
+var import_react11 = require("@emotion/react");
+var swing = import_react11.keyframes`
+  20% {
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+`;
+
+// src/animations/attention_seekers/tada.ts
+var import_react12 = require("@emotion/react");
+var tada = import_react12.keyframes`
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+`;
+
+// src/animations/attention_seekers/wobble.ts
+var import_react13 = require("@emotion/react");
+var wobble = import_react13.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  15% {
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/Reveal.tsx
+var import_react28 = require("@emotion/react");
+var import_react29 = require("react");
+var import_react_intersection_observer = require("react-intersection-observer");
+var import_react_is = require("react-is");
+
+// src/animations/fading_entrances/fadeIn.ts
+var import_react14 = require("@emotion/react");
+var fadeIn = import_react14.keyframes`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+
+// src/animations/fading_entrances/fadeInBottomLeft.ts
+var import_react15 = require("@emotion/react");
+var fadeInBottomLeft = import_react15.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInBottomRight.ts
+var import_react16 = require("@emotion/react");
+var fadeInBottomRight = import_react16.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInDown.ts
+var import_react17 = require("@emotion/react");
+var fadeInDown = import_react17.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInDownBig.ts
+var import_react18 = require("@emotion/react");
+var fadeInDownBig = import_react18.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInLeft.ts
+var import_react19 = require("@emotion/react");
+var fadeInLeft = import_react19.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInLeftBig.ts
+var import_react20 = require("@emotion/react");
+var fadeInLeftBig = import_react20.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInRight.ts
+var import_react21 = require("@emotion/react");
+var fadeInRight = import_react21.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInRightBig.ts
+var import_react22 = require("@emotion/react");
+var fadeInRightBig = import_react22.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInTopLeft.ts
+var import_react23 = require("@emotion/react");
+var fadeInTopLeft = import_react23.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInTopRight.ts
+var import_react24 = require("@emotion/react");
+var fadeInTopRight = import_react24.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInUp.ts
+var import_react25 = require("@emotion/react");
+var fadeInUp = import_react25.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInUpBig.ts
+var import_react26 = require("@emotion/react");
+var fadeInUpBig = import_react26.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/utils/animations.ts
+var import_react27 = require("@emotion/react");
+function getAnimationCss({
+  duration = 1e3,
+  delay = 0,
+  timingFunction = "ease",
+  keyframes: keyframes87 = fadeInLeft,
+  iterationCount = 1
+}) {
+  return import_react27.css`
+    animation-duration: ${duration}ms;
+    animation-timing-function: ${timingFunction};
+    animation-delay: ${delay}ms;
+    animation-name: ${keyframes87};
+    animation-direction: normal;
+    animation-fill-mode: both;
+    animation-iteration-count: ${iterationCount};
+  `;
+}
+
+// src/utils/react.ts
+function isNullable(a) {
+  return a == void 0;
+}
+function isStringLike(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+
+// src/Reveal.tsx
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+var hiddenStyles = import_react28.css`
+  opacity: 0;
+`;
+var textBaseStyles = import_react28.css`
+  display: inline-block;
+  white-space: pre;
+`;
+var Reveal = (props) => {
+  const {
+    cascade = false,
+    damping = 0.5,
+    delay = 0,
+    duration = 1e3,
+    fraction = 0,
+    keyframes: keyframes87 = fadeInLeft,
+    triggerOnce = false,
+    css: revealCss,
+    className,
+    style,
+    childClassName,
+    childStyle,
+    children,
+    onVisibilityChange
+  } = props;
+  const animationStyles = (0, import_react29.useMemo)(
+    () => getAnimationCss({
+      keyframes: keyframes87,
+      duration
+    }),
+    [duration, keyframes87]
+  );
+  if (isNullable(children)) {
+    return null;
+  }
+  if (isStringLike(children)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextReveal, {
+      ...props,
+      animationStyles,
+      children: String(children)
+    });
+  }
+  if ((0, import_react_is.isFragment)(children)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, {
+      ...props,
+      animationStyles
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: import_react29.Children.map(children, (node, index) => {
+      if (!(0, import_react29.isValidElement)(node))
+        return null;
+      const inViewStyles = [revealCss, animationStyles];
+      const nodeDelay = delay + (cascade ? index * duration * damping : 0);
+      switch (node.type) {
+        case "ol":
+        case "ul":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, {
+            children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(node.type, {
+              ...node.props,
+              className: cx(className, node.props.className),
+              style: { ...style, ...node.props.style },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Reveal, {
+                ...props,
+                children: node.props.children
+              })
+            })
+          });
+        case "li":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intersection_observer.InView, {
+            threshold: fraction,
+            triggerOnce,
+            onChange: onVisibilityChange,
+            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, {
+              children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(node.type, {
+                ...node.props,
+                ref,
+                className: cx(childClassName, node.props.className),
+                css: inView ? inViewStyles : hiddenStyles,
+                style: {
+                  ...childStyle,
+                  ...node.props.style,
+                  animationDelay: nodeDelay + "ms"
+                }
+              })
+            })
+          });
+        default:
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intersection_observer.InView, {
+            threshold: fraction,
+            triggerOnce,
+            onChange: onVisibilityChange,
+            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+              ref,
+              className,
+              css: inView ? inViewStyles : hiddenStyles,
+              style: { ...style, animationDelay: nodeDelay + "ms" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, {
+                children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(node.type, {
+                  ...node.props,
+                  className: cx(childClassName, node.props.className),
+                  style: { ...childStyle, ...node.props.style }
+                })
+              })
+            })
+          });
+      }
+    })
+  });
+};
+var TextReveal = (props) => {
+  const {
+    animationStyles,
+    cascade = false,
+    damping = 0.5,
+    delay = 0,
+    duration = 1e3,
+    fraction = 0,
+    triggerOnce = false,
+    css: revealCss,
+    className,
+    style,
+    children,
+    onVisibilityChange
+  } = props;
+  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+    triggerOnce,
+    threshold: fraction,
+    onChange: onVisibilityChange
+  });
+  return cascade ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    ref,
+    className,
+    css: [revealCss, textBaseStyles],
+    style,
+    children: children.split("").map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+      css: inView ? animationStyles : hiddenStyles,
+      style: {
+        animationDelay: delay + index * duration * damping + "ms"
+      },
+      children: char
+    }, index))
+  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, {
+    ...props,
+    children
+  });
+};
+var FragmentReveal = (props) => {
+  const {
+    animationStyles,
+    fraction = 0,
+    triggerOnce = false,
+    css: revealCss,
+    className,
+    style,
+    children,
+    onVisibilityChange
+  } = props;
+  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+    triggerOnce,
+    threshold: fraction,
+    onChange: onVisibilityChange
+  });
+  const inViewStyles = [revealCss, animationStyles];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    ref,
+    className,
+    css: inView ? inViewStyles : hiddenStyles,
+    style,
+    children
+  });
+};
+
+// src/components/AttentionSeeker.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+function getStyles(effect) {
+  switch (effect) {
+    case "flash":
+      return [flash];
+    case "headShake":
+      return [headShake, { animationTimingFunction: "ease-in-out" }];
+    case "heartBeat":
+      return [heartBeat, { animationTimingFunction: "ease-in-out" }];
+    case "jello":
+      return [jello, { transformOrigin: "center" }];
+    case "pulse":
+      return [pulse, { animationTimingFunction: "ease-in-out" }];
+    case "rubberBand":
+      return [rubberBand];
+    case "shake":
+      return [shake];
+    case "shakeX":
+      return [shakeX];
+    case "shakeY":
+      return [shakeY];
+    case "swing":
+      return [swing, { transformOrigin: "top center" }];
+    case "tada":
+      return [tada];
+    case "wobble":
+      return [wobble];
+    case "bounce":
+    default:
+      return [bounce, { transformOrigin: "center bottom" }];
+  }
+}
+var AttentionSeeker = (props) => {
+  const { effect = "bounce", ...rest } = props;
+  const [keyframes87, animationCss3] = (0, import_react31.useMemo)(() => getStyles(effect), [effect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Reveal, {
+    keyframes: keyframes87,
+    css: animationCss3,
+    ...rest
+  });
+};
+
+// src/components/Bounce.tsx
+var import_react42 = require("react");
+
+// src/animations/bouncing_entrances/bounceIn.ts
+var import_react32 = require("@emotion/react");
+var bounceIn = import_react32.keyframes`
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+`;
+
+// src/animations/bouncing_entrances/bounceInDown.ts
+var import_react33 = require("@emotion/react");
+var bounceInDown = import_react33.keyframes`
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0) scaleY(3);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0) scaleY(0.9);
+  }
+
+  75% {
+    transform: translate3d(0, -10px, 0) scaleY(0.95);
+  }
+
+  90% {
+    transform: translate3d(0, 5px, 0) scaleY(0.985);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/bouncing_entrances/bounceInLeft.ts
+var import_react34 = require("@emotion/react");
+var bounceInLeft = import_react34.keyframes`
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0) scaleX(3);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0) scaleX(1);
+  }
+
+  75% {
+    transform: translate3d(-10px, 0, 0) scaleX(0.98);
+  }
+
+  90% {
+    transform: translate3d(5px, 0, 0) scaleX(0.995);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/bouncing_entrances/bounceInRight.ts
+var import_react35 = require("@emotion/react");
+var bounceInRight = import_react35.keyframes`
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0) scaleX(3);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0) scaleX(1);
+  }
+
+  75% {
+    transform: translate3d(10px, 0, 0) scaleX(0.98);
+  }
+
+  90% {
+    transform: translate3d(-5px, 0, 0) scaleX(0.995);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/bouncing_entrances/bounceInUp.ts
+var import_react36 = require("@emotion/react");
+var bounceInUp = import_react36.keyframes`
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0) scaleY(5);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0) scaleY(0.9);
+  }
+
+  75% {
+    transform: translate3d(0, 10px, 0) scaleY(0.95);
+  }
+
+  90% {
+    transform: translate3d(0, -5px, 0) scaleY(0.985);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/bouncing_exits/bounceOut.ts
+var import_react37 = require("@emotion/react");
+var bounceOut = import_react37.keyframes`
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  50%,
+  55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+`;
+
+// src/animations/bouncing_exits/bounceOutDown.ts
+var import_react38 = require("@emotion/react");
+var bounceOutDown = import_react38.keyframes`
+  20% {
+    transform: translate3d(0, 10px, 0) scaleY(0.985);
+  }
+
+  40%,
+  45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0) scaleY(0.9);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0) scaleY(3);
+  }
+`;
+
+// src/animations/bouncing_exits/bounceOutLeft.ts
+var import_react39 = require("@emotion/react");
+var bounceOutLeft = import_react39.keyframes`
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0) scaleX(0.9);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0) scaleX(2);
+  }
+`;
+
+// src/animations/bouncing_exits/bounceOutRight.ts
+var import_react40 = require("@emotion/react");
+var bounceOutRight = import_react40.keyframes`
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0) scaleX(0.9);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0) scaleX(2);
+  }
+`;
+
+// src/animations/bouncing_exits/bounceOutUp.ts
+var import_react41 = require("@emotion/react");
+var bounceOutUp = import_react41.keyframes`
+  20% {
+    transform: translate3d(0, -10px, 0) scaleY(0.985);
+  }
+
+  40%,
+  45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0) scaleY(0.9);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0) scaleY(3);
+  }
+`;
+
+// src/components/Bounce.tsx
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+function getStyles2(reverse, direction) {
+  switch (direction) {
+    case "down":
+      return reverse ? bounceOutDown : bounceInDown;
+    case "left":
+      return reverse ? bounceOutLeft : bounceInLeft;
+    case "right":
+      return reverse ? bounceOutRight : bounceInRight;
+    case "up":
+      return reverse ? bounceOutUp : bounceInUp;
+    default:
+      return reverse ? bounceOut : bounceIn;
+  }
+}
+var Bounce = (props) => {
+  const { direction, reverse = false, ...rest } = props;
+  const keyframes87 = (0, import_react42.useMemo)(
+    () => getStyles2(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Fade.tsx
+var import_react56 = require("react");
+
+// src/animations/fading_exits/fadeOut.ts
+var import_react43 = require("@emotion/react");
+var fadeOut = import_react43.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+// src/animations/fading_exits/fadeOutBottomLeft.ts
+var import_react44 = require("@emotion/react");
+var fadeOutBottomLeft = import_react44.keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutBottomRight.ts
+var import_react45 = require("@emotion/react");
+var fadeOutBottomRight = import_react45.keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutDown.ts
+var import_react46 = require("@emotion/react");
+var fadeOutDown = import_react46.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutDownBig.ts
+var import_react47 = require("@emotion/react");
+var fadeOutDownBig = import_react47.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutLeft.ts
+var import_react48 = require("@emotion/react");
+var fadeOutLeft = import_react48.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutLeftBig.ts
+var import_react49 = require("@emotion/react");
+var fadeOutLeftBig = import_react49.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutRight.ts
+var import_react50 = require("@emotion/react");
+var fadeOutRight = import_react50.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutRightBig.ts
+var import_react51 = require("@emotion/react");
+var fadeOutRightBig = import_react51.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutTopLeft.ts
+var import_react52 = require("@emotion/react");
+var fadeOutTopLeft = import_react52.keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutTopRight.ts
+var import_react53 = require("@emotion/react");
+var fadeOutTopRight = import_react53.keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutUp.ts
+var import_react54 = require("@emotion/react");
+var fadeOutUp = import_react54.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutUpBig.ts
+var import_react55 = require("@emotion/react");
+var fadeOutUpBig = import_react55.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+`;
+
+// src/components/Fade.tsx
+var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
+function getStyles3(big, reverse, direction) {
+  switch (direction) {
+    case "bottom-left":
+      return reverse ? fadeOutBottomLeft : fadeInBottomLeft;
+    case "bottom-right":
+      return reverse ? fadeOutBottomRight : fadeInBottomRight;
+    case "down":
+      return big ? reverse ? fadeOutDownBig : fadeInDownBig : reverse ? fadeOutDown : fadeInDown;
+    case "left":
+      return big ? reverse ? fadeOutLeftBig : fadeInLeftBig : reverse ? fadeOutLeft : fadeInLeft;
+    case "right":
+      return big ? reverse ? fadeOutRightBig : fadeInRightBig : reverse ? fadeOutRight : fadeInRight;
+    case "top-left":
+      return reverse ? fadeOutTopLeft : fadeInTopLeft;
+    case "top-right":
+      return reverse ? fadeOutTopRight : fadeInTopRight;
+    case "up":
+      return big ? reverse ? fadeOutUpBig : fadeInUpBig : reverse ? fadeOutUp : fadeInUp;
+    default:
+      return reverse ? fadeOut : fadeIn;
+  }
+}
+var Fade = (props) => {
+  const { big = false, direction, reverse = false, ...rest } = props;
+  const keyframes87 = (0, import_react56.useMemo)(
+    () => getStyles3(big, reverse, direction),
+    [big, direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Flip.tsx
+var import_react62 = require("@emotion/react");
+var import_react63 = require("react");
+
+// src/animations/flippers/flip.ts
+var import_react57 = require("@emotion/react");
+var flip = import_react57.keyframes`
+  from {
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+    animation-timing-function: ease-in;
+  }
+`;
+
+// src/animations/flippers/flipInX.ts
+var import_react58 = require("@emotion/react");
+var flipInX = import_react58.keyframes`
+  from {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    transform: perspective(400px);
+  }
+`;
+
+// src/animations/flippers/flipInY.ts
+var import_react59 = require("@emotion/react");
+var flipInY = import_react59.keyframes`
+  from {
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    transform: perspective(400px);
+  }
+`;
+
+// src/animations/flippers/flipOutX.ts
+var import_react60 = require("@emotion/react");
+var flipOutX = import_react60.keyframes`
+  from {
+    transform: perspective(400px);
+  }
+
+  30% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/flippers/flipOutY.ts
+var import_react61 = require("@emotion/react");
+var flipOutY = import_react61.keyframes`
+  from {
+    transform: perspective(400px);
+  }
+
+  30% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+`;
+
+// src/components/Flip.tsx
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+function getStyles4(reverse, direction) {
+  switch (direction) {
+    case "horizontal":
+      return reverse ? flipOutX : flipInX;
+    case "vertical":
+      return reverse ? flipOutY : flipInY;
+    default:
+      return flip;
+  }
+}
+var animationCss = import_react62.css`
+  backface-visibility: visible;
+`;
+var Flip = (props) => {
+  const { direction, reverse = false, ...rest } = props;
+  const keyframes87 = (0, import_react63.useMemo)(
+    () => getStyles4(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Reveal, {
+    css: animationCss,
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Hinge.tsx
+var import_react68 = require("@emotion/react");
+
+// src/animations/specials/hinge.ts
+var import_react64 = require("@emotion/react");
+var hinge = import_react64.keyframes`
+  0% {
+    animation-timing-function: ease-in-out;
+  }
+
+  20%,
+  60% {
+    transform: rotate3d(0, 0, 1, 80deg);
+    animation-timing-function: ease-in-out;
+  }
+
+  40%,
+  80% {
+    transform: rotate3d(0, 0, 1, 60deg);
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+`;
+
+// src/animations/specials/jackInTheBox.ts
+var import_react65 = require("@emotion/react");
+var jackInTheBox = import_react65.keyframes`
+  from {
+    opacity: 0;
+    transform: scale(0.1) rotate(30deg);
+    transform-origin: center bottom;
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  70% {
+    transform: rotate(3deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+
+// src/animations/specials/rollIn.ts
+var import_react66 = require("@emotion/react");
+var rollIn = import_react66.keyframes`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/specials/rollOut.ts
+var import_react67 = require("@emotion/react");
+var rollOut = import_react67.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+`;
+
+// src/components/Hinge.tsx
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var animationCss2 = import_react68.css`
+  transform-origin: top left;
+`;
+var Hinge = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Reveal, {
+    css: animationCss2,
+    keyframes: hinge,
+    ...props
+  });
+};
+
+// src/components/JackInTheBox.tsx
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+var JackInTheBox = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Reveal, {
+    keyframes: jackInTheBox,
+    ...props
+  });
+};
+
+// src/components/Roll.tsx
+var import_react69 = require("react");
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+function getStyles5(reverse) {
+  return reverse ? rollOut : rollIn;
+}
+var Roll = (props) => {
+  const { reverse = false, ...rest } = props;
+  const keyframes87 = (0, import_react69.useMemo)(() => getStyles5(reverse), [reverse]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Rotate.tsx
+var import_react80 = require("react");
+
+// src/animations/rotating_entrances/rotateIn.ts
+var import_react70 = require("@emotion/react");
+var rotateIn = import_react70.keyframes`
+  from {
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInDownLeft.ts
+var import_react71 = require("@emotion/react");
+var rotateInDownLeft = import_react71.keyframes`
+  from {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInDownRight.ts
+var import_react72 = require("@emotion/react");
+var rotateInDownRight = import_react72.keyframes`
+  from {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInUpLeft.ts
+var import_react73 = require("@emotion/react");
+var rotateInUpLeft = import_react73.keyframes`
+  from {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInUpRight.ts
+var import_react74 = require("@emotion/react");
+var rotateInUpRight = import_react74.keyframes`
+  from {
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOut.ts
+var import_react75 = require("@emotion/react");
+var rotateOut = import_react75.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutDownLeft.ts
+var import_react76 = require("@emotion/react");
+var rotateOutDownLeft = import_react76.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutDownRight.ts
+var import_react77 = require("@emotion/react");
+var rotateOutDownRight = import_react77.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutUpLeft.ts
+var import_react78 = require("@emotion/react");
+var rotateOutUpLeft = import_react78.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutUpRight.ts
+var import_react79 = require("@emotion/react");
+var rotateOutUpRight = import_react79.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+`;
+
+// src/components/Rotate.tsx
+var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
+function getStyles6(reverse, direction) {
+  switch (direction) {
+    case "bottom-left":
+      return reverse ? [rotateOutDownLeft, { transformOrigin: "left bottom" }] : [rotateInDownLeft, { transformOrigin: "left bottom" }];
+    case "bottom-right":
+      return reverse ? [rotateOutDownRight, { transformOrigin: "right bottom" }] : [rotateInDownRight, { transformOrigin: "right bottom" }];
+    case "top-left":
+      return reverse ? [rotateOutUpLeft, { transformOrigin: "left bottom" }] : [rotateInUpLeft, { transformOrigin: "left bottom" }];
+    case "top-right":
+      return reverse ? [rotateOutUpRight, { transformOrigin: "right bottom" }] : [rotateInUpRight, { transformOrigin: "right bottom" }];
+    default:
+      return reverse ? [rotateOut, { transformOrigin: "center" }] : [rotateIn, { transformOrigin: "center" }];
+  }
+}
+var Rotate = (props) => {
+  const { direction, reverse = false, ...rest } = props;
+  const [keyframes87, animationCss3] = (0, import_react80.useMemo)(
+    () => getStyles6(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Reveal, {
+    css: animationCss3,
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Slide.tsx
+var import_react89 = require("react");
+
+// src/animations/sliding_entrances/slideInDown.ts
+var import_react81 = require("@emotion/react");
+var slideInDown = import_react81.keyframes`
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInLeft.ts
+var import_react82 = require("@emotion/react");
+var slideInLeft = import_react82.keyframes`
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInRight.ts
+var import_react83 = require("@emotion/react");
+var slideInRight = import_react83.keyframes`
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInUp.ts
+var import_react84 = require("@emotion/react");
+var slideInUp = import_react84.keyframes`
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutDown.ts
+var import_react85 = require("@emotion/react");
+var slideOutDown = import_react85.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutLeft.ts
+var import_react86 = require("@emotion/react");
+var slideOutLeft = import_react86.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutRight.ts
+var import_react87 = require("@emotion/react");
+var slideOutRight = import_react87.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutUp.ts
+var import_react88 = require("@emotion/react");
+var slideOutUp = import_react88.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+
+// src/components/Slide.tsx
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+function getStyles7(reverse, direction) {
+  switch (direction) {
+    case "down":
+      return reverse ? slideOutDown : slideInDown;
+    case "right":
+      return reverse ? slideOutRight : slideInRight;
+    case "up":
+      return reverse ? slideOutUp : slideInUp;
+    case "left":
+    default:
+      return reverse ? slideOutLeft : slideInLeft;
+  }
+}
+var Slide = (props) => {
+  const { direction, reverse = false, ...rest } = props;
+  const keyframes87 = (0, import_react89.useMemo)(
+    () => getStyles7(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Zoom.tsx
+var import_react100 = require("react");
+
+// src/animations/zooming_entrances/zoomIn.ts
+var import_react90 = require("@emotion/react");
+var zoomIn = import_react90.keyframes`
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+`;
+
+// src/animations/zooming_entrances/zoomInDown.ts
+var import_react91 = require("@emotion/react");
+var zoomInDown = import_react91.keyframes`
+  from {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+// src/animations/zooming_entrances/zoomInLeft.ts
+var import_react92 = require("@emotion/react");
+var zoomInLeft = import_react92.keyframes`
+  from {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+// src/animations/zooming_entrances/zoomInRight.ts
+var import_react93 = require("@emotion/react");
+var zoomInRight = import_react93.keyframes`
+  from {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+// src/animations/zooming_entrances/zoomInUp.ts
+var import_react94 = require("@emotion/react");
+var zoomInUp = import_react94.keyframes`
+  from {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+// src/animations/zooming_exits/zoomOut.ts
+var import_react95 = require("@emotion/react");
+var zoomOut = import_react95.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+// src/animations/zooming_exits/zoomOutDown.ts
+var import_react96 = require("@emotion/react");
+var zoomOutDown = import_react96.keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+// src/animations/zooming_exits/zoomOutLeft.ts
+var import_react97 = require("@emotion/react");
+var zoomOutLeft = import_react97.keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
+  }
+`;
+
+// src/animations/zooming_exits/zoomOutRight.ts
+var import_react98 = require("@emotion/react");
+var zoomOutRight = import_react98.keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.1) translate3d(2000px, 0, 0);
+  }
+`;
+
+// src/animations/zooming_exits/zoomOutUp.ts
+var import_react99 = require("@emotion/react");
+var zoomOutUp = import_react99.keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+// src/components/Zoom.tsx
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+function getStyles8(reverse, direction) {
+  switch (direction) {
+    case "down":
+      return reverse ? zoomOutDown : zoomInDown;
+    case "left":
+      return reverse ? zoomOutLeft : zoomInLeft;
+    case "right":
+      return reverse ? zoomOutRight : zoomInRight;
+    case "up":
+      return reverse ? zoomOutUp : zoomInUp;
+    default:
+      return reverse ? zoomOut : zoomIn;
+  }
+}
+var Zoom = (props) => {
+  const { direction, reverse = false, ...rest } = props;
+  const keyframes87 = (0, import_react100.useMemo)(
+    () => getStyles8(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AttentionSeeker,
+  Bounce,
+  Fade,
+  Flip,
+  Hinge,
+  JackInTheBox,
+  Reveal,
+  Roll,
+  Rotate,
+  Slide,
+  Zoom
+});
+//# sourceMappingURL=index.js.map