react-awesome-reveal 4.0.1 → 4.1.0

package/dist/index.mjs

@@ -0,0 +1,2055 @@
+// src/components/AttentionSeeker.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/animations/attention_seekers/bounce.ts
+import { keyframes } from "@emotion/react";
+var bounce = 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
+import { keyframes as keyframes2 } from "@emotion/react";
+var flash = keyframes2`
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+`;
+
+// src/animations/attention_seekers/headShake.ts
+import { keyframes as keyframes3 } from "@emotion/react";
+var headShake = keyframes3`
+  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
+import { keyframes as keyframes4 } from "@emotion/react";
+var heartBeat = keyframes4`
+  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
+import { keyframes as keyframes5 } from "@emotion/react";
+var jello = keyframes5`
+  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
+import { keyframes as keyframes6 } from "@emotion/react";
+var pulse = keyframes6`
+  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
+import { keyframes as keyframes7 } from "@emotion/react";
+var rubberBand = keyframes7`
+  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
+import { keyframes as keyframes8 } from "@emotion/react";
+var shake = keyframes8`
+  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
+import { keyframes as keyframes9 } from "@emotion/react";
+var shakeX = keyframes9`
+  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
+import { keyframes as keyframes10 } from "@emotion/react";
+var shakeY = keyframes10`
+  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
+import { keyframes as keyframes11 } from "@emotion/react";
+var swing = keyframes11`
+  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
+import { keyframes as keyframes12 } from "@emotion/react";
+var tada = keyframes12`
+  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
+import { keyframes as keyframes13 } from "@emotion/react";
+var wobble = keyframes13`
+  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
+import {
+  ClassNames,
+  css as css2
+} from "@emotion/react";
+import { Children, isValidElement, useMemo } from "react";
+import { InView, useInView } from "react-intersection-observer";
+import { isFragment } from "react-is";
+
+// src/animations/fading_entrances/fadeIn.ts
+import { keyframes as keyframes14 } from "@emotion/react";
+var fadeIn = keyframes14`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+
+// src/animations/fading_entrances/fadeInBottomLeft.ts
+import { keyframes as keyframes15 } from "@emotion/react";
+var fadeInBottomLeft = keyframes15`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInBottomRight.ts
+import { keyframes as keyframes16 } from "@emotion/react";
+var fadeInBottomRight = keyframes16`
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInDown.ts
+import { keyframes as keyframes17 } from "@emotion/react";
+var fadeInDown = keyframes17`
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInDownBig.ts
+import { keyframes as keyframes18 } from "@emotion/react";
+var fadeInDownBig = keyframes18`
+  from {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInLeft.ts
+import { keyframes as keyframes19 } from "@emotion/react";
+var fadeInLeft = keyframes19`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInLeftBig.ts
+import { keyframes as keyframes20 } from "@emotion/react";
+var fadeInLeftBig = keyframes20`
+  from {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInRight.ts
+import { keyframes as keyframes21 } from "@emotion/react";
+var fadeInRight = keyframes21`
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInRightBig.ts
+import { keyframes as keyframes22 } from "@emotion/react";
+var fadeInRightBig = keyframes22`
+  from {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInTopLeft.ts
+import { keyframes as keyframes23 } from "@emotion/react";
+var fadeInTopLeft = keyframes23`
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInTopRight.ts
+import { keyframes as keyframes24 } from "@emotion/react";
+var fadeInTopRight = keyframes24`
+  from {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInUp.ts
+import { keyframes as keyframes25 } from "@emotion/react";
+var fadeInUp = keyframes25`
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/fading_entrances/fadeInUpBig.ts
+import { keyframes as keyframes26 } from "@emotion/react";
+var fadeInUpBig = keyframes26`
+  from {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/utils/animations.ts
+import { css } from "@emotion/react";
+function getAnimationCss({
+  duration = 1e3,
+  delay = 0,
+  timingFunction = "ease",
+  keyframes: keyframes87 = fadeInLeft,
+  iterationCount = 1
+}) {
+  return 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
+import { Fragment, jsx } from "@emotion/react/jsx-runtime";
+var hiddenStyles = css2`
+  opacity: 0;
+`;
+var textBaseStyles = css2`
+  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 = useMemo(
+    () => getAnimationCss({
+      keyframes: keyframes87,
+      duration
+    }),
+    [duration, keyframes87]
+  );
+  if (isNullable(children)) {
+    return null;
+  }
+  if (isStringLike(children)) {
+    return /* @__PURE__ */ jsx(TextReveal, {
+      ...props,
+      animationStyles,
+      children: String(children)
+    });
+  }
+  if (isFragment(children)) {
+    return /* @__PURE__ */ jsx(FragmentReveal, {
+      ...props,
+      animationStyles
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: Children.map(children, (node, index) => {
+      if (!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__ */ jsx(ClassNames, {
+            children: ({ cx }) => /* @__PURE__ */ jsx(node.type, {
+              ...node.props,
+              className: cx(className, node.props.className),
+              style: { ...style, ...node.props.style },
+              children: /* @__PURE__ */ jsx(Reveal, {
+                ...props,
+                children: node.props.children
+              })
+            })
+          });
+        case "li":
+          return /* @__PURE__ */ jsx(InView, {
+            threshold: fraction,
+            triggerOnce,
+            onChange: onVisibilityChange,
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx(ClassNames, {
+              children: ({ cx }) => /* @__PURE__ */ 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__ */ jsx(InView, {
+            threshold: fraction,
+            triggerOnce,
+            onChange: onVisibilityChange,
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx("div", {
+              ref,
+              className,
+              css: inView ? inViewStyles : hiddenStyles,
+              style: { ...style, animationDelay: nodeDelay + "ms" },
+              children: /* @__PURE__ */ jsx(ClassNames, {
+                children: ({ cx }) => /* @__PURE__ */ 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 } = useInView({
+    triggerOnce,
+    threshold: fraction,
+    onChange: onVisibilityChange
+  });
+  return cascade ? /* @__PURE__ */ jsx("div", {
+    ref,
+    className,
+    css: [revealCss, textBaseStyles],
+    style,
+    children: children.split("").map((char, index) => /* @__PURE__ */ jsx("span", {
+      css: inView ? animationStyles : hiddenStyles,
+      style: {
+        animationDelay: delay + index * duration * damping + "ms"
+      },
+      children: char
+    }, index))
+  }) : /* @__PURE__ */ jsx(FragmentReveal, {
+    ...props,
+    children
+  });
+};
+var FragmentReveal = (props) => {
+  const {
+    animationStyles,
+    fraction = 0,
+    triggerOnce = false,
+    css: revealCss,
+    className,
+    style,
+    children,
+    onVisibilityChange
+  } = props;
+  const { ref, inView } = useInView({
+    triggerOnce,
+    threshold: fraction,
+    onChange: onVisibilityChange
+  });
+  const inViewStyles = [revealCss, animationStyles];
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className,
+    css: inView ? inViewStyles : hiddenStyles,
+    style,
+    children
+  });
+};
+
+// src/components/AttentionSeeker.tsx
+import { jsx as jsx2 } from "@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] = useMemo2(() => getStyles(effect), [effect]);
+  return /* @__PURE__ */ jsx2(Reveal, {
+    keyframes: keyframes87,
+    css: animationCss3,
+    ...rest
+  });
+};
+
+// src/components/Bounce.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/animations/bouncing_entrances/bounceIn.ts
+import { keyframes as keyframes27 } from "@emotion/react";
+var bounceIn = keyframes27`
+  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
+import { keyframes as keyframes28 } from "@emotion/react";
+var bounceInDown = keyframes28`
+  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
+import { keyframes as keyframes29 } from "@emotion/react";
+var bounceInLeft = keyframes29`
+  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
+import { keyframes as keyframes30 } from "@emotion/react";
+var bounceInRight = keyframes30`
+  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
+import { keyframes as keyframes31 } from "@emotion/react";
+var bounceInUp = keyframes31`
+  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
+import { keyframes as keyframes32 } from "@emotion/react";
+var bounceOut = keyframes32`
+  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
+import { keyframes as keyframes33 } from "@emotion/react";
+var bounceOutDown = keyframes33`
+  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
+import { keyframes as keyframes34 } from "@emotion/react";
+var bounceOutLeft = keyframes34`
+  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
+import { keyframes as keyframes35 } from "@emotion/react";
+var bounceOutRight = keyframes35`
+  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
+import { keyframes as keyframes36 } from "@emotion/react";
+var bounceOutUp = keyframes36`
+  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
+import { jsx as jsx3 } from "@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 = useMemo3(
+    () => getStyles2(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ jsx3(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Fade.tsx
+import { useMemo as useMemo4 } from "react";
+
+// src/animations/fading_exits/fadeOut.ts
+import { keyframes as keyframes37 } from "@emotion/react";
+var fadeOut = keyframes37`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+// src/animations/fading_exits/fadeOutBottomLeft.ts
+import { keyframes as keyframes38 } from "@emotion/react";
+var fadeOutBottomLeft = keyframes38`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutBottomRight.ts
+import { keyframes as keyframes39 } from "@emotion/react";
+var fadeOutBottomRight = keyframes39`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutDown.ts
+import { keyframes as keyframes40 } from "@emotion/react";
+var fadeOutDown = keyframes40`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutDownBig.ts
+import { keyframes as keyframes41 } from "@emotion/react";
+var fadeOutDownBig = keyframes41`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutLeft.ts
+import { keyframes as keyframes42 } from "@emotion/react";
+var fadeOutLeft = keyframes42`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutLeftBig.ts
+import { keyframes as keyframes43 } from "@emotion/react";
+var fadeOutLeftBig = keyframes43`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutRight.ts
+import { keyframes as keyframes44 } from "@emotion/react";
+var fadeOutRight = keyframes44`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutRightBig.ts
+import { keyframes as keyframes45 } from "@emotion/react";
+var fadeOutRightBig = keyframes45`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutTopLeft.ts
+import { keyframes as keyframes46 } from "@emotion/react";
+var fadeOutTopLeft = keyframes46`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutTopRight.ts
+import { keyframes as keyframes47 } from "@emotion/react";
+var fadeOutTopRight = keyframes47`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutUp.ts
+import { keyframes as keyframes48 } from "@emotion/react";
+var fadeOutUp = keyframes48`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+
+// src/animations/fading_exits/fadeOutUpBig.ts
+import { keyframes as keyframes49 } from "@emotion/react";
+var fadeOutUpBig = keyframes49`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+`;
+
+// src/components/Fade.tsx
+import { jsx as jsx4 } from "@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 = useMemo4(
+    () => getStyles3(big, reverse, direction),
+    [big, direction, reverse]
+  );
+  return /* @__PURE__ */ jsx4(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Flip.tsx
+import { css as css3 } from "@emotion/react";
+import { useMemo as useMemo5 } from "react";
+
+// src/animations/flippers/flip.ts
+import { keyframes as keyframes50 } from "@emotion/react";
+var flip = keyframes50`
+  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
+import { keyframes as keyframes51 } from "@emotion/react";
+var flipInX = keyframes51`
+  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
+import { keyframes as keyframes52 } from "@emotion/react";
+var flipInY = keyframes52`
+  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
+import { keyframes as keyframes53 } from "@emotion/react";
+var flipOutX = keyframes53`
+  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
+import { keyframes as keyframes54 } from "@emotion/react";
+var flipOutY = keyframes54`
+  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
+import { jsx as jsx5 } from "@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 = css3`
+  backface-visibility: visible;
+`;
+var Flip = (props) => {
+  const { direction, reverse = false, ...rest } = props;
+  const keyframes87 = useMemo5(
+    () => getStyles4(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ jsx5(Reveal, {
+    css: animationCss,
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Hinge.tsx
+import { css as css4 } from "@emotion/react";
+
+// src/animations/specials/hinge.ts
+import { keyframes as keyframes55 } from "@emotion/react";
+var hinge = keyframes55`
+  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
+import { keyframes as keyframes56 } from "@emotion/react";
+var jackInTheBox = keyframes56`
+  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
+import { keyframes as keyframes57 } from "@emotion/react";
+var rollIn = keyframes57`
+  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
+import { keyframes as keyframes58 } from "@emotion/react";
+var rollOut = keyframes58`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+`;
+
+// src/components/Hinge.tsx
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
+var animationCss2 = css4`
+  transform-origin: top left;
+`;
+var Hinge = (props) => {
+  return /* @__PURE__ */ jsx6(Reveal, {
+    css: animationCss2,
+    keyframes: hinge,
+    ...props
+  });
+};
+
+// src/components/JackInTheBox.tsx
+import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
+var JackInTheBox = (props) => {
+  return /* @__PURE__ */ jsx7(Reveal, {
+    keyframes: jackInTheBox,
+    ...props
+  });
+};
+
+// src/components/Roll.tsx
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
+function getStyles5(reverse) {
+  return reverse ? rollOut : rollIn;
+}
+var Roll = (props) => {
+  const { reverse = false, ...rest } = props;
+  const keyframes87 = useMemo6(() => getStyles5(reverse), [reverse]);
+  return /* @__PURE__ */ jsx8(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Rotate.tsx
+import { useMemo as useMemo7 } from "react";
+
+// src/animations/rotating_entrances/rotateIn.ts
+import { keyframes as keyframes59 } from "@emotion/react";
+var rotateIn = keyframes59`
+  from {
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInDownLeft.ts
+import { keyframes as keyframes60 } from "@emotion/react";
+var rotateInDownLeft = keyframes60`
+  from {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInDownRight.ts
+import { keyframes as keyframes61 } from "@emotion/react";
+var rotateInDownRight = keyframes61`
+  from {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInUpLeft.ts
+import { keyframes as keyframes62 } from "@emotion/react";
+var rotateInUpLeft = keyframes62`
+  from {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_entrances/rotateInUpRight.ts
+import { keyframes as keyframes63 } from "@emotion/react";
+var rotateInUpRight = keyframes63`
+  from {
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOut.ts
+import { keyframes as keyframes64 } from "@emotion/react";
+var rotateOut = keyframes64`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutDownLeft.ts
+import { keyframes as keyframes65 } from "@emotion/react";
+var rotateOutDownLeft = keyframes65`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutDownRight.ts
+import { keyframes as keyframes66 } from "@emotion/react";
+var rotateOutDownRight = keyframes66`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutUpLeft.ts
+import { keyframes as keyframes67 } from "@emotion/react";
+var rotateOutUpLeft = keyframes67`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+`;
+
+// src/animations/rotating_exits/rotateOutUpRight.ts
+import { keyframes as keyframes68 } from "@emotion/react";
+var rotateOutUpRight = keyframes68`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+`;
+
+// src/components/Rotate.tsx
+import { jsx as jsx9 } from "@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] = useMemo7(
+    () => getStyles6(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ jsx9(Reveal, {
+    css: animationCss3,
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Slide.tsx
+import { useMemo as useMemo8 } from "react";
+
+// src/animations/sliding_entrances/slideInDown.ts
+import { keyframes as keyframes69 } from "@emotion/react";
+var slideInDown = keyframes69`
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInLeft.ts
+import { keyframes as keyframes70 } from "@emotion/react";
+var slideInLeft = keyframes70`
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInRight.ts
+import { keyframes as keyframes71 } from "@emotion/react";
+var slideInRight = keyframes71`
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_entrances/slideInUp.ts
+import { keyframes as keyframes72 } from "@emotion/react";
+var slideInUp = keyframes72`
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutDown.ts
+import { keyframes as keyframes73 } from "@emotion/react";
+var slideOutDown = keyframes73`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutLeft.ts
+import { keyframes as keyframes74 } from "@emotion/react";
+var slideOutLeft = keyframes74`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutRight.ts
+import { keyframes as keyframes75 } from "@emotion/react";
+var slideOutRight = keyframes75`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+// src/animations/sliding_exits/slideOutUp.ts
+import { keyframes as keyframes76 } from "@emotion/react";
+var slideOutUp = keyframes76`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+
+// src/components/Slide.tsx
+import { jsx as jsx10 } from "@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 = useMemo8(
+    () => getStyles7(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ jsx10(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+
+// src/components/Zoom.tsx
+import { useMemo as useMemo9 } from "react";
+
+// src/animations/zooming_entrances/zoomIn.ts
+import { keyframes as keyframes77 } from "@emotion/react";
+var zoomIn = keyframes77`
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+`;
+
+// src/animations/zooming_entrances/zoomInDown.ts
+import { keyframes as keyframes78 } from "@emotion/react";
+var zoomInDown = keyframes78`
+  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
+import { keyframes as keyframes79 } from "@emotion/react";
+var zoomInLeft = keyframes79`
+  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
+import { keyframes as keyframes80 } from "@emotion/react";
+var zoomInRight = keyframes80`
+  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
+import { keyframes as keyframes81 } from "@emotion/react";
+var zoomInUp = keyframes81`
+  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
+import { keyframes as keyframes82 } from "@emotion/react";
+var zoomOut = keyframes82`
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+// src/animations/zooming_exits/zoomOutDown.ts
+import { keyframes as keyframes83 } from "@emotion/react";
+var zoomOutDown = keyframes83`
+  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
+import { keyframes as keyframes84 } from "@emotion/react";
+var zoomOutLeft = keyframes84`
+  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
+import { keyframes as keyframes85 } from "@emotion/react";
+var zoomOutRight = keyframes85`
+  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
+import { keyframes as keyframes86 } from "@emotion/react";
+var zoomOutUp = keyframes86`
+  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
+import { jsx as jsx11 } from "@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 = useMemo9(
+    () => getStyles8(reverse, direction),
+    [direction, reverse]
+  );
+  return /* @__PURE__ */ jsx11(Reveal, {
+    keyframes: keyframes87,
+    ...rest
+  });
+};
+export {
+  AttentionSeeker,
+  Bounce,
+  Fade,
+  Flip,
+  Hinge,
+  JackInTheBox,
+  Reveal,
+  Roll,
+  Rotate,
+  Slide,
+  Zoom,
+  Reveal as default
+};
+//# sourceMappingURL=index.mjs.map