react-awesome-reveal 4.0.1 → 4.2.0

package/dist/index.js

@@ -0,0 +1,2103 @@
+"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_react30 = 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};
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  `;
+}
+
+// src/utils/guards.ts
+function isNullable(a) {
+  return a == void 0;
+}
+function isStringLike(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+
+// src/utils/patterns.ts
+function matchIf(onTrue, onFalse) {
+  return (condition) => condition ? onTrue() : onFalse();
+}
+function matchIfOrNull(onTrue) {
+  return matchIf(onTrue, () => null);
+}
+
+// src/Reveal.tsx
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function hideWhen(condition) {
+  return matchIf(
+    () => ({ opacity: 0 }),
+    () => ({ opacity: 1 })
+  )(condition);
+}
+var Reveal = (props) => {
+  const {
+    cascade = false,
+    damping = 0.5,
+    delay = 0,
+    duration = 1e3,
+    fraction = 0,
+    keyframes: keyframes87 = fadeInLeft,
+    triggerOnce = false,
+    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 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: Object.assign({}, 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: matchIfOrNull(() => animationStyles)(inView),
+                style: Object.assign(
+                  {},
+                  childStyle,
+                  node.props.style,
+                  hideWhen(!inView),
+                  { 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: matchIfOrNull(() => animationStyles)(inView),
+                style: Object.assign({}, 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: Object.assign(
+                      {},
+                      childStyle,
+                      node.props.style
+                    )
+                  }
+                ) })
+              }
+            )
+          }
+        );
+    }
+  }) });
+};
+var textBaseStyles = {
+  display: "inline-block",
+  whiteSpace: "pre"
+};
+var TextReveal = (props) => {
+  const {
+    animationStyles,
+    cascade = false,
+    damping = 0.5,
+    delay = 0,
+    duration = 1e3,
+    fraction = 0,
+    triggerOnce = false,
+    className,
+    style,
+    children,
+    onVisibilityChange
+  } = props;
+  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+    triggerOnce,
+    threshold: fraction,
+    onChange: onVisibilityChange
+  });
+  return matchIf(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        style: Object.assign({}, style, textBaseStyles),
+        children: children.split("").map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            css: matchIfOrNull(() => animationStyles)(inView),
+            style: Object.assign({}, hideWhen(!inView), {
+              animationDelay: delay + index * duration * damping + "ms"
+            }),
+            children: char
+          },
+          index
+        ))
+      }
+    ),
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, { ...props, children })
+  )(cascade);
+};
+var FragmentReveal = (props) => {
+  const {
+    animationStyles,
+    fraction = 0,
+    triggerOnce = false,
+    className,
+    style,
+    children,
+    onVisibilityChange
+  } = props;
+  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+    triggerOnce,
+    threshold: fraction,
+    onChange: onVisibilityChange
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className,
+      css: matchIfOrNull(() => animationStyles)(inView),
+      style: Object.assign({}, style, hideWhen(!inView)),
+      children
+    }
+  );
+};
+
+// src/components/AttentionSeeker.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+function getStyles(effect) {
+  switch (effect) {
+    case "bounce":
+      return [bounce, { transformOrigin: "center bottom" }];
+    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];
+  }
+}
+var AttentionSeeker = (props) => {
+  const { effect = "bounce", style, ...rest } = props;
+  const [keyframes87, animationCss3] = (0, import_react30.useMemo)(() => getStyles(effect), [effect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss3),
+      ...rest
+    }
+  );
+};
+
+// src/components/Bounce.tsx
+var import_react41 = require("react");
+
+// src/animations/bouncing_entrances/bounceIn.ts
+var import_react31 = require("@emotion/react");
+var bounceIn = import_react31.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_react32 = require("@emotion/react");
+var bounceInDown = import_react32.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_react33 = require("@emotion/react");
+var bounceInLeft = 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(-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_react34 = require("@emotion/react");
+var bounceInRight = import_react34.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_react35 = require("@emotion/react");
+var bounceInUp = 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(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_react36 = require("@emotion/react");
+var bounceOut = import_react36.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_react37 = require("@emotion/react");
+var bounceOutDown = import_react37.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_react38 = require("@emotion/react");
+var bounceOutLeft = import_react38.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_react39 = require("@emotion/react");
+var bounceOutRight = 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/bounceOutUp.ts
+var import_react40 = require("@emotion/react");
+var bounceOutUp = import_react40.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_react41.useMemo)(
+    () => getStyles2(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+};
+
+// src/components/Fade.tsx
+var import_react55 = require("react");
+
+// src/animations/fading_exits/fadeOut.ts
+var import_react42 = require("@emotion/react");
+var fadeOut = import_react42.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+// src/animations/fading_exits/fadeOutBottomLeft.ts
+var import_react43 = require("@emotion/react");
+var fadeOutBottomLeft = import_react43.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_react44 = require("@emotion/react");
+var fadeOutBottomRight = import_react44.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_react45 = require("@emotion/react");
+var fadeOutDown = import_react45.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutDownBig.ts
+var import_react46 = require("@emotion/react");
+var fadeOutDownBig = import_react46.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutLeft.ts
+var import_react47 = require("@emotion/react");
+var fadeOutLeft = import_react47.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutLeftBig.ts
+var import_react48 = require("@emotion/react");
+var fadeOutLeftBig = import_react48.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutRight.ts
+var import_react49 = require("@emotion/react");
+var fadeOutRight = import_react49.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutRightBig.ts
+var import_react50 = require("@emotion/react");
+var fadeOutRightBig = import_react50.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutTopLeft.ts
+var import_react51 = require("@emotion/react");
+var fadeOutTopLeft = import_react51.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_react52 = require("@emotion/react");
+var fadeOutTopRight = import_react52.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_react53 = require("@emotion/react");
+var fadeOutUp = import_react53.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutUpBig.ts
+var import_react54 = require("@emotion/react");
+var fadeOutUpBig = import_react54.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_react55.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_react61 = require("react");
+
+// src/animations/flippers/flip.ts
+var import_react56 = require("@emotion/react");
+var flip = import_react56.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_react57 = require("@emotion/react");
+var flipInX = import_react57.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_react58 = require("@emotion/react");
+var flipInY = import_react58.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_react59 = require("@emotion/react");
+var flipOutX = import_react59.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_react60 = require("@emotion/react");
+var flipOutY = import_react60.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 = {
+  backfaceVisibility: "visible"
+};
+var Flip = (props) => {
+  const { direction, reverse = false, style, ...rest } = props;
+  const keyframes87 = (0, import_react61.useMemo)(
+    () => getStyles4(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss),
+      ...rest
+    }
+  );
+};
+
+// src/animations/specials/hinge.ts
+var import_react62 = require("@emotion/react");
+var hinge = import_react62.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_react63 = require("@emotion/react");
+var jackInTheBox = import_react63.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_react64 = require("@emotion/react");
+var rollIn = import_react64.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_react65 = require("@emotion/react");
+var rollOut = import_react65.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 = {
+  transformOrigin: "top left"
+};
+var Hinge = (props) => {
+  const { style, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Reveal,
+    {
+      keyframes: hinge,
+      style: Object.assign({}, style, animationCss2),
+      ...rest
+    }
+  );
+};
+
+// 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_react66 = 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_react66.useMemo)(() => getStyles5(reverse), [reverse]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+};
+
+// src/components/Rotate.tsx
+var import_react77 = require("react");
+
+// src/animations/rotating_entrances/rotateIn.ts
+var import_react67 = require("@emotion/react");
+var rotateIn = import_react67.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_react68 = require("@emotion/react");
+var rotateInDownLeft = import_react68.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_react69 = require("@emotion/react");
+var rotateInDownRight = import_react69.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_react70 = require("@emotion/react");
+var rotateInUpLeft = import_react70.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_react71 = require("@emotion/react");
+var rotateInUpRight = import_react71.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_react72 = require("@emotion/react");
+var rotateOut = import_react72.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutDownLeft.ts
+var import_react73 = require("@emotion/react");
+var rotateOutDownLeft = import_react73.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutDownRight.ts
+var import_react74 = require("@emotion/react");
+var rotateOutDownRight = import_react74.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutUpLeft.ts
+var import_react75 = require("@emotion/react");
+var rotateOutUpLeft = import_react75.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutUpRight.ts
+var import_react76 = require("@emotion/react");
+var rotateOutUpRight = import_react76.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, style, ...rest } = props;
+  const [keyframes87, animationCss3] = (0, import_react77.useMemo)(
+    () => getStyles6(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss3),
+      ...rest
+    }
+  );
+};
+
+// src/components/Slide.tsx
+var import_react86 = require("react");
+
+// src/animations/sliding_entrances/slideInDown.ts
+var import_react78 = require("@emotion/react");
+var slideInDown = import_react78.keyframes`
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInLeft.ts
+var import_react79 = require("@emotion/react");
+var slideInLeft = import_react79.keyframes`
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInRight.ts
+var import_react80 = require("@emotion/react");
+var slideInRight = import_react80.keyframes`
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInUp.ts
+var import_react81 = require("@emotion/react");
+var slideInUp = import_react81.keyframes`
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutDown.ts
+var import_react82 = require("@emotion/react");
+var slideOutDown = import_react82.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutLeft.ts
+var import_react83 = require("@emotion/react");
+var slideOutLeft = import_react83.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutRight.ts
+var import_react84 = require("@emotion/react");
+var slideOutRight = import_react84.keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutUp.ts
+var import_react85 = require("@emotion/react");
+var slideOutUp = import_react85.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_react86.useMemo)(
+    () => getStyles7(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+};
+
+// src/components/Zoom.tsx
+var import_react97 = require("react");
+
+// src/animations/zooming_entrances/zoomIn.ts
+var import_react87 = require("@emotion/react");
+var zoomIn = import_react87.keyframes`
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+`;
+
+// src/animations/zooming_entrances/zoomInDown.ts
+var import_react88 = require("@emotion/react");
+var zoomInDown = import_react88.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_react89 = require("@emotion/react");
+var zoomInLeft = import_react89.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_react90 = require("@emotion/react");
+var zoomInRight = import_react90.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_react91 = require("@emotion/react");
+var zoomInUp = 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_exits/zoomOut.ts
+var import_react92 = require("@emotion/react");
+var zoomOut = import_react92.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_react93 = require("@emotion/react");
+var zoomOutDown = import_react93.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_react94 = require("@emotion/react");
+var zoomOutLeft = import_react94.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_react95 = require("@emotion/react");
+var zoomOutRight = import_react95.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_react96 = require("@emotion/react");
+var zoomOutUp = 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/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_react97.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