\n {({ inView, ref }) => (\n \n \n {({ cx }) =>\n jsx(nodeElement.type, {\n ...nodeElement.props,\n className: cx(\n childClassName,\n nodeElement.props.className\n ),\n style: { ...childStyle, ...nodeElement.props.style },\n })\n }\n \n
\n )}\n \n );\n }\n })}\n >\n );\n};\n\nexport default Reveal;\n","export function isNullOrUndefined(value: unknown): value is null | undefined {\n return value === null || value === undefined;\n}\n\nexport function isStringLike(\n value: unknown\n): value is string | number | boolean {\n return (\n typeof value === \"string\" ||\n typeof value === \"number\" ||\n typeof value === \"boolean\"\n );\n}\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/bounce.css}\n */\nconst bounce = keyframes`\n from,\n 20%,\n 53%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n transform: translate3d(0, 0, 0);\n }\n\n 40%,\n 43% {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n transform: translate3d(0, -30px, 0) scaleY(1.1);\n }\n\n 70% {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n transform: translate3d(0, -15px, 0) scaleY(1.05);\n }\n\n 80% {\n transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n transform: translate3d(0, 0, 0) scaleY(0.95);\n }\n\n 90% {\n transform: translate3d(0, -4px, 0) scaleY(1.02);\n }\n`;\n\nexport default bounce;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/flash.css}\n */\nconst flash = keyframes`\n from,\n 50%,\n to {\n opacity: 1;\n }\n\n 25%,\n 75% {\n opacity: 0;\n }\n`;\n\nexport default flash;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/headShake.css}\n */\nconst headShake = keyframes`\n 0% {\n transform: translateX(0);\n }\n\n 6.5% {\n transform: translateX(-6px) rotateY(-9deg);\n }\n\n 18.5% {\n transform: translateX(5px) rotateY(7deg);\n }\n\n 31.5% {\n transform: translateX(-3px) rotateY(-5deg);\n }\n\n 43.5% {\n transform: translateX(2px) rotateY(3deg);\n }\n\n 50% {\n transform: translateX(0);\n }\n`;\n\nexport default headShake;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/heartBeat.css}\n */\nconst heartBeat = keyframes`\n 0% {\n transform: scale(1);\n }\n\n 14% {\n transform: scale(1.3);\n }\n\n 28% {\n transform: scale(1);\n }\n\n 42% {\n transform: scale(1.3);\n }\n\n 70% {\n transform: scale(1);\n }\n`;\n\nexport default heartBeat;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/jello.css}\n */\nconst jello = keyframes`\n from,\n 11.1%,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 22.2% {\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n`;\n\nexport default jello;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/pulse.css}\n */\nconst pulse = keyframes`\n from {\n transform: scale3d(1, 1, 1);\n }\n\n 50% {\n transform: scale3d(1.05, 1.05, 1.05);\n }\n\n to {\n transform: scale3d(1, 1, 1);\n }\n`;\n\nexport default pulse;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/rubberBand.css}\n */\nconst rubberBand = keyframes`\n from {\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n transform: scale3d(1.05, 0.95, 1);\n }\n\n to {\n transform: scale3d(1, 1, 1);\n }\n`;\n\nexport default rubberBand;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/shake.css}\n */\nconst shake = keyframes`\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(10px, 0, 0);\n }\n`;\n\nexport default shake;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/shakeX.css}\n */\nconst shakeX = keyframes`\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(10px, 0, 0);\n }\n`;\n\nexport default shakeX;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/shakeY.css}\n */\nconst shakeY = keyframes`\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(0, -10px, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(0, 10px, 0);\n }\n`;\n\nexport default shakeY;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/swing.css}\n */\nconst swing = keyframes`\n 20% {\n transform: rotate3d(0, 0, 1, 15deg);\n }\n\n 40% {\n transform: rotate3d(0, 0, 1, -10deg);\n }\n\n 60% {\n transform: rotate3d(0, 0, 1, 5deg);\n }\n\n 80% {\n transform: rotate3d(0, 0, 1, -5deg);\n }\n\n to {\n transform: rotate3d(0, 0, 1, 0deg);\n }\n`;\n\nexport default swing;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/tada.css}\n */\nconst tada = keyframes`\n from {\n transform: scale3d(1, 1, 1);\n }\n\n 10%,\n 20% {\n transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n }\n\n 30%,\n 50%,\n 70%,\n 90% {\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n }\n\n 40%,\n 60%,\n 80% {\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n\n to {\n transform: scale3d(1, 1, 1);\n }\n`;\n\nexport default tada;\n","import { keyframes } from \"@emotion/react\";\n\n/**\n * @see {@link https://github.com/animate-css/animate.css/blob/master/source/attention_seekers/wobble.css}\n */\nconst wobble = keyframes`\n from {\n transform: translate3d(0, 0, 0);\n }\n\n 15% {\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n\n 30% {\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n\n 45% {\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n\n 60% {\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n\n 75% {\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nexport default wobble;\n","import { Interpolation, Theme } from \"@emotion/react\";\nimport { Keyframes } from \"@emotion/serialize\";\n\nimport {\n bounce,\n flash,\n headShake,\n heartBeat,\n jello,\n pulse,\n rubberBand,\n shake,\n shakeX,\n shakeY,\n swing,\n tada,\n wobble,\n} from \"../animations/attention_seekers\";\nimport Reveal, { RevealProps } from \"../Reveal\";\n\ntype AttentionSeekerEffect =\n | \"bounce\"\n | \"flash\"\n | \"headShake\"\n | \"heartBeat\"\n | \"jello\"\n | \"pulse\"\n | \"rubberBand\"\n | \"shake\"\n | \"shakeX\"\n | \"shakeY\"\n | \"swing\"\n | \"tada\"\n | \"wobble\";\n\nexport interface AttentionSeekerProps\n extends Omit