const { useState, useEffect, useRef } = React;
const Arrow = ({ className = "" }) => (
);
const Sticker = ({ kind, className = "", style }) => {
const glyphs = {
star: (
),
sparkle: (
),
wave: (
),
dot: (
),
squig: (
),
burst: (
),
flower: (
),
plus: (
),
heart: (
),
};
return (
{glyphs[kind] || glyphs.star}
);
};
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const check = () => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight - 40 && r.bottom > 0) {
el.classList.add("in");
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
return true;
}
return false;
};
if (check()) return;
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check);
const t = setTimeout(() => { el.classList.add("in"); }, 2000);
return () => {
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
clearTimeout(t);
};
}, []);
return ref;
}
const Reveal = ({ as = "div", className = "", children, ...rest }) => {
const Tag = as;
const r = useReveal();
return {children};
};
Object.assign(window, { Arrow, Sticker, useReveal, Reveal });