react-awesome-reveal 4.3.0 → 5.0.0-next.0

package/dist/index.js

@@ -1,1830 +1 @@
-import { jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { keyframes, css, ClassNames } from '@emotion/react';
-import { useMemo, Children, isValidElement } from 'react';
-import { InView, useInView } from 'react-intersection-observer';
-import { isFragment } from 'react-is';
-
-const 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);
-  }
-`;
-
-const flash = keyframes`
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-
-  25%,
-  75% {
-    opacity: 0;
-  }
-`;
-
-const headShake = 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);
-  }
-`;
-
-const heartBeat = keyframes`
-  0% {
-    transform: scale(1);
-  }
-
-  14% {
-    transform: scale(1.3);
-  }
-
-  28% {
-    transform: scale(1);
-  }
-
-  42% {
-    transform: scale(1.3);
-  }
-
-  70% {
-    transform: scale(1);
-  }
-`;
-
-const jello = 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);
-  }
-`;
-
-const pulse = keyframes`
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-`;
-
-const rubberBand = 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);
-  }
-`;
-
-const shake = 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);
-  }
-`;
-
-const shakeX = 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);
-  }
-`;
-
-const shakeY = 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);
-  }
-`;
-
-const swing = 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);
-  }
-`;
-
-const tada = 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);
-  }
-`;
-
-const wobble = 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);
-  }
-`;
-
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`;
-
-const fadeInBottomLeft = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInBottomRight = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInDown = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInDownBig = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInLeft = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInLeftBig = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInRight = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInRightBig = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInTopLeft = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInTopRight = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(100%, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInUp = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const fadeInUpBig = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(0, 2000px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-function getAnimationCss({
-  duration = 1e3,
-  delay = 0,
-  timingFunction = "ease",
-  keyframes = fadeInLeft,
-  iterationCount = 1
-}) {
-  return css`
-    animation-duration: ${duration}ms;
-    animation-timing-function: ${timingFunction};
-    animation-delay: ${delay}ms;
-    animation-name: ${keyframes};
-    animation-direction: normal;
-    animation-fill-mode: both;
-    animation-iteration-count: ${iterationCount};
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-  `;
-}
-
-function isNullable(a) {
-  return a == void 0;
-}
-function isStringLike(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
-}
-
-function matchIf(onTrue, onFalse) {
-  return (condition) => condition ? onTrue() : onFalse();
-}
-function matchIfOrNull(onTrue) {
-  return matchIf(onTrue, () => null);
-}
-
-function hideWhen(condition) {
-  return matchIfOrNull(() => ({ opacity: 0 }))(condition);
-}
-const Reveal = (props) => {
-  const {
-    cascade = false,
-    damping = 0.5,
-    delay = 0,
-    duration = 1e3,
-    fraction = 0,
-    keyframes = fadeInLeft,
-    triggerOnce = false,
-    className,
-    style,
-    childClassName,
-    childStyle,
-    children,
-    onVisibilityChange
-  } = props;
-  const animationStyles = useMemo(
-    () => getAnimationCss({
-      keyframes,
-      duration
-    }),
-    [duration, keyframes]
-  );
-  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 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: Object.assign({}, 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: matchIfOrNull(() => animationStyles)(inView),
-                style: Object.assign(
-                  {},
-                  childStyle,
-                  node.props.style,
-                  hideWhen(!inView),
-                  {
-                    animationDelay: nodeDelay + "ms"
-                  }
-                )
-              }
-            ) })
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx(
-          InView,
-          {
-            threshold: fraction,
-            triggerOnce,
-            onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref,
-                className,
-                css: matchIfOrNull(() => animationStyles)(inView),
-                style: Object.assign({}, style, hideWhen(!inView), {
-                  animationDelay: nodeDelay + "ms"
-                }),
-                children: /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
-                  node.type,
-                  {
-                    ...node.props,
-                    className: cx(childClassName, node.props.className),
-                    style: Object.assign(
-                      {},
-                      childStyle,
-                      node.props.style
-                    )
-                  }
-                ) })
-              }
-            )
-          }
-        );
-    }
-  }) });
-};
-const textBaseStyles = {
-  display: "inline-block",
-  whiteSpace: "pre"
-};
-const 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 } = useInView({
-    triggerOnce,
-    threshold: fraction,
-    onChange: onVisibilityChange
-  });
-  return matchIf(
-    () => /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className,
-        style: Object.assign({}, style, textBaseStyles),
-        children: children.split("").map((char, index) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            css: matchIfOrNull(() => animationStyles)(inView),
-            style: {
-              animationDelay: delay + index * duration * damping + "ms"
-            },
-            children: char
-          },
-          index
-        ))
-      }
-    ),
-    () => /* @__PURE__ */ jsx(FragmentReveal, { ...props, children })
-  )(cascade);
-};
-const FragmentReveal = (props) => {
-  const {
-    animationStyles,
-    fraction = 0,
-    triggerOnce = false,
-    className,
-    style,
-    children,
-    onVisibilityChange
-  } = props;
-  const { ref, inView } = useInView({
-    triggerOnce,
-    threshold: fraction,
-    onChange: onVisibilityChange
-  });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className,
-      css: matchIfOrNull(() => animationStyles)(inView),
-      style: Object.assign({}, style, hideWhen(!inView)),
-      children
-    }
-  );
-};
-
-function getStyles$7(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];
-  }
-}
-const AttentionSeeker = (props) => {
-  const { effect = "bounce", style, ...rest } = props;
-  const [keyframes, animationCss] = useMemo(() => getStyles$7(effect), [effect]);
-  return /* @__PURE__ */ jsx(
-    Reveal,
-    {
-      keyframes,
-      style: Object.assign({}, style, animationCss),
-      ...rest
-    }
-  );
-};
-
-const bounceIn = 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);
-  }
-`;
-
-const bounceInDown = 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);
-  }
-`;
-
-const bounceInLeft = 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);
-  }
-`;
-
-const bounceInRight = 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);
-  }
-`;
-
-const bounceInUp = 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);
-  }
-`;
-
-const bounceOut = 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);
-  }
-`;
-
-const bounceOutDown = 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);
-  }
-`;
-
-const bounceOutLeft = keyframes`
-  20% {
-    opacity: 1;
-    transform: translate3d(20px, 0, 0) scaleX(0.9);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0) scaleX(2);
-  }
-`;
-
-const bounceOutRight = keyframes`
-  20% {
-    opacity: 1;
-    transform: translate3d(-20px, 0, 0) scaleX(0.9);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0) scaleX(2);
-  }
-`;
-
-const bounceOutUp = 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);
-  }
-`;
-
-function getStyles$6(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;
-  }
-}
-const Bounce = (props) => {
-  const { direction, reverse = false, ...rest } = props;
-  const keyframes = useMemo(
-    () => getStyles$6(reverse, direction),
-    [direction, reverse]
-  );
-  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
-};
-
-const fadeOut = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-`;
-
-const fadeOutBottomLeft = keyframes`
-  from {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-100%, 100%, 0);
-  }
-`;
-
-const fadeOutBottomRight = keyframes`
-  from {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(100%, 100%, 0);
-  }
-`;
-
-const fadeOutDown = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-`;
-
-const fadeOutDownBig = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 2000px, 0);
-  }
-`;
-
-const fadeOutLeft = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-`;
-
-const fadeOutLeftBig = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
-  }
-`;
-
-const fadeOutRight = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-`;
-
-const fadeOutRightBig = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0);
-  }
-`;
-
-const fadeOutTopLeft = keyframes`
-  from {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-100%, -100%, 0);
-  }
-`;
-
-const fadeOutTopRight = keyframes`
-  from {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(100%, -100%, 0);
-  }
-`;
-
-const fadeOutUp = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-
-const fadeOutUpBig = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0);
-  }
-`;
-
-function getStyles$5(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;
-  }
-}
-const Fade = (props) => {
-  const { big = false, direction, reverse = false, ...rest } = props;
-  const keyframes = useMemo(
-    () => getStyles$5(big, reverse, direction),
-    [big, direction, reverse]
-  );
-  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
-};
-
-const flip = 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;
-  }
-`;
-
-const flipInX = 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);
-  }
-`;
-
-const flipInY = 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);
-  }
-`;
-
-const flipOutX = 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;
-  }
-`;
-
-const flipOutY = 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;
-  }
-`;
-
-function getStyles$4(reverse, direction) {
-  switch (direction) {
-    case "horizontal":
-      return reverse ? flipOutX : flipInX;
-    case "vertical":
-      return reverse ? flipOutY : flipInY;
-    default:
-      return flip;
-  }
-}
-const animationCss$1 = {
-  backfaceVisibility: "visible"
-};
-const Flip = (props) => {
-  const { direction, reverse = false, style, ...rest } = props;
-  const keyframes = useMemo(
-    () => getStyles$4(reverse, direction),
-    [direction, reverse]
-  );
-  return /* @__PURE__ */ jsx(
-    Reveal,
-    {
-      keyframes,
-      style: Object.assign({}, style, animationCss$1),
-      ...rest
-    }
-  );
-};
-
-const hinge = 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;
-  }
-`;
-
-const jackInTheBox = 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);
-  }
-`;
-
-const rollIn = keyframes`
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const rollOut = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-  }
-`;
-
-const animationCss = {
-  transformOrigin: "top left"
-};
-const Hinge = (props) => {
-  const { style, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    Reveal,
-    {
-      keyframes: hinge,
-      style: Object.assign({}, style, animationCss),
-      ...rest
-    }
-  );
-};
-
-const JackInTheBox = (props) => {
-  return /* @__PURE__ */ jsx(Reveal, { keyframes: jackInTheBox, ...props });
-};
-
-function getStyles$3(reverse) {
-  return reverse ? rollOut : rollIn;
-}
-const Roll = (props) => {
-  const { reverse = false, ...rest } = props;
-  const keyframes = useMemo(() => getStyles$3(reverse), [reverse]);
-  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
-};
-
-const rotateIn = keyframes`
-  from {
-    transform: rotate3d(0, 0, 1, -200deg);
-    opacity: 0;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-`;
-
-const rotateInDownLeft = keyframes`
-  from {
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-`;
-
-const rotateInDownRight = keyframes`
-  from {
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-`;
-
-const rotateInUpLeft = keyframes`
-  from {
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-`;
-
-const rotateInUpRight = keyframes`
-  from {
-    transform: rotate3d(0, 0, 1, -90deg);
-    opacity: 0;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-`;
-
-const rotateOut = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, 200deg);
-    opacity: 0;
-  }
-`;
-
-const rotateOutDownLeft = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-`;
-
-const rotateOutDownRight = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-`;
-
-const rotateOutUpLeft = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-`;
-
-const rotateOutUpRight = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, 90deg);
-    opacity: 0;
-  }
-`;
-
-function getStyles$2(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" }];
-  }
-}
-const Rotate = (props) => {
-  const { direction, reverse = false, style, ...rest } = props;
-  const [keyframes, animationCss] = useMemo(
-    () => getStyles$2(reverse, direction),
-    [direction, reverse]
-  );
-  return /* @__PURE__ */ jsx(
-    Reveal,
-    {
-      keyframes,
-      style: Object.assign({}, style, animationCss),
-      ...rest
-    }
-  );
-};
-
-const slideInDown = keyframes`
-  from {
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const slideInLeft = keyframes`
-  from {
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const slideInRight = keyframes`
-  from {
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const slideInUp = keyframes`
-  from {
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-const slideOutDown = keyframes`
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(0, 100%, 0);
-  }
-`;
-
-const slideOutLeft = keyframes`
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(-100%, 0, 0);
-  }
-`;
-
-const slideOutRight = keyframes`
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(100%, 0, 0);
-  }
-`;
-
-const slideOutUp = keyframes`
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-
-function getStyles$1(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;
-  }
-}
-const Slide = (props) => {
-  const { direction, reverse = false, ...rest } = props;
-  const keyframes = useMemo(
-    () => getStyles$1(reverse, direction),
-    [direction, reverse]
-  );
-  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
-};
-
-const zoomIn = keyframes`
-  from {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  50% {
-    opacity: 1;
-  }
-`;
-
-const zoomInDown = 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);
-  }
-`;
-
-const zoomInLeft = 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);
-  }
-`;
-
-const zoomInRight = 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);
-  }
-`;
-
-const zoomInUp = 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);
-  }
-`;
-
-const zoomOut = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  to {
-    opacity: 0;
-  }
-`;
-
-const zoomOutDown = 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);
-  }
-`;
-
-const zoomOutLeft = 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);
-  }
-`;
-
-const zoomOutRight = 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);
-  }
-`;
-
-const zoomOutUp = 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);
-  }
-`;
-
-function getStyles(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;
-  }
-}
-const Zoom = (props) => {
-  const { direction, reverse = false, ...rest } = props;
-  const keyframes = useMemo(
-    () => getStyles(reverse, direction),
-    [direction, reverse]
-  );
-  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
-};
-
-export { AttentionSeeker, Bounce, Fade, Flip, Hinge, JackInTheBox, Reveal, Roll, Rotate, Slide, Zoom, Reveal as default };
+export * from "@awesome-reveal/react";