// Shared building blocks for Regrade
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const REGRADE_WAITLIST_LS = 'regrade_waitlist_v1';
function getWaitlistEmail() {
const cfg = typeof window !== 'undefined' && window.REGRADE_CONFIG;
const raw = cfg && String(cfg.waitlistEmail || '').trim();
if (!raw || raw.includes('YOUR_EMAIL@')) return 'hello@regrade.app';
return raw;
}
/** Same-window mailto avoids blank tabs that `window.location` / `target=_blank` often cause. */
function openMailtoUrl(href) {
try {
const a = document.createElement('a');
a.href = href;
a.rel = 'noopener noreferrer';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} catch (_) {
window.location.assign(href);
}
}
function buildWaitlistMailtoHref({ name, email }) {
const to = getWaitlistEmail();
const subject = encodeURIComponent('Regrade waitlist — early access');
const body = encodeURIComponent(
'Please add me to the Regrade early access waitlist.\n\n' +
`Name: ${String(name).trim()}\n` +
`Email: ${String(email).trim()}\n`
);
return `mailto:${to}?subject=${subject}&body=${body}`;
}
function openWaitlistMailto({ name, email }) {
openMailtoUrl(buildWaitlistMailtoHref({ name, email }));
}
function recordWaitlistEntry({ name, email, source }) {
try {
const prev = JSON.parse(localStorage.getItem(REGRADE_WAITLIST_LS) || '[]');
if (!Array.isArray(prev)) return;
prev.push({
name: String(name).trim(),
email: String(email).trim(),
source: source || 'unknown',
ts: new Date().toISOString(),
});
localStorage.setItem(REGRADE_WAITLIST_LS, JSON.stringify(prev));
} catch (_) {}
}
/**
* Saves signup locally, optionally POSTs to Web3Forms (see site-config.js), then opens mailto.
* Returns { mailtoHref, serverOk, web3formsEnabled } for UI fallbacks.
*/
async function submitWaitlistSignup({ name, email, source = 'form' }) {
const n = String(name).trim();
const em = String(email).trim();
recordWaitlistEntry({ name: n, email: em, source });
const cfg = typeof window !== 'undefined' && window.REGRADE_CONFIG;
const key = cfg && String(cfg.web3formsAccessKey || '').trim();
let serverOk = null;
if (key) {
try {
const message =
`Regrade early-access waitlist\n\n` +
`Name: ${n}\n` +
`Email: ${em}\n` +
`Source: ${source}\n`;
const fd = new FormData();
fd.append('access_key', key);
fd.append('name', n);
fd.append('email', em);
fd.append('message', message);
fd.append('subject', 'Regrade waitlist — ' + em);
const res = await fetch('https://api.web3forms.com/submit', {
method: 'POST',
body: fd,
headers: { Accept: 'application/json' },
});
const data = await res.json().catch(() => ({}));
serverOk = !!(data && data.success);
} catch (_) {
serverOk = false;
}
}
const mailtoHref = buildWaitlistMailtoHref({ name: n, email: em });
openMailtoUrl(mailtoHref);
return { mailtoHref, serverOk, web3formsEnabled: !!key };
}
// Cursor-tracked tilt + radial glow for any element
function useTilt(maxDeg = 8, scale = 1.0) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReduced) return;
let raf = 0, tx = 0, ty = 0, ctx = 0, cty = 0;
const onMove = (e) => {
const r = el.getBoundingClientRect();
const px = (e.clientX - r.left) / r.width;
const py = (e.clientY - r.top) / r.height;
tx = (py - 0.5) * -2 * maxDeg;
ty = (px - 0.5) * 2 * maxDeg;
el.style.setProperty('--mx', `${(px*100).toFixed(2)}%`);
el.style.setProperty('--my', `${(py*100).toFixed(2)}%`);
if (!raf) raf = requestAnimationFrame(loop);
};
const onLeave = () => { tx = ty = 0; if (!raf) raf = requestAnimationFrame(loop); };
const loop = () => {
ctx += (tx - ctx) * 0.12;
cty += (ty - cty) * 0.12;
el.style.transform = `perspective(1100px) rotateX(${ctx.toFixed(2)}deg) rotateY(${cty.toFixed(2)}deg) scale(${scale})`;
if (Math.abs(tx - ctx) > 0.02 || Math.abs(ty - cty) > 0.02) raf = requestAnimationFrame(loop);
else raf = 0;
};
el.addEventListener('mousemove', onMove);
el.addEventListener('mouseleave', onLeave);
return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(raf); };
}, [maxDeg, scale]);
return ref;
}
// In-view trigger
function useInView(opts = {}) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current; if (!el || seen) return;
const io = new IntersectionObserver((ents) => {
ents.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: 0.3, ...opts });
io.observe(el);
return () => io.disconnect();
}, [seen]);
return [ref, seen];
}
// Looping typewriter for a phrase set — locked width so layout doesn't reflow
function LoopType({ words, className = '', hold = 1500, speed = 75 }) {
const longest = useMemo(() => words.reduce((a, b) => a.length >= b.length ? a : b, ''), [words]);
const [i, setI] = useState(0);
const [text, setText] = useState(words[0] || '');
const [phase, setPhase] = useState('hold');
useEffect(() => {
const word = words[i % words.length];
let t;
if (phase === 'type') {
if (text.length < word.length) t = setTimeout(() => setText(word.slice(0, text.length+1)), speed);
else t = setTimeout(() => setPhase('hold'), hold);
} else if (phase === 'hold') {
t = setTimeout(() => setPhase('erase'), hold);
} else if (phase === 'erase') {
if (text.length > 0) t = setTimeout(() => setText(text.slice(0, -1)), speed * 0.55);
else { setPhase('type'); setI((i+1) % words.length); }
}
return () => clearTimeout(t);
}, [text, phase, i, words, speed, hold]);
return (
{longest}
{text}
);
}
// Number that counts up when in view
function CountUp({ to, suffix = '', duration = 1400, className = '' }) {
const [ref, seen] = useInView();
const [v, setV] = useState(0);
useEffect(() => {
if (!seen) return;
const start = performance.now();
let raf;
const tick = (now) => {
const p = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(Math.round(eased * to));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [seen, to, duration]);
return {v}{suffix};
}
// Section eyebrow
function Eyebrow({ children, color = 'var(--ink-60)' }) {
return {children}
;
}
// Cyan italic emphasis with breathing glow
function Em({ children, className = '' }) {
return {children};
}
// Pulsing dot
function Dot() {
return ;
}
// Primary CTA — static (no magnetic follow, breathing shadow, shimmer, or ripple)
function GlowButton({ children, onClick, type = 'button', className = '', disabled = false }) {
return (
);
}
// Pill inputs + button — waitlist (mailto + optional Web3Forms; see site-config.js)
function EmailPill({ onSubmit, cta = 'Get Early Access' }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [done, setDone] = useState(false);
const [mailtoHref, setMailtoHref] = useState('');
const [busy, setBusy] = useState(false);
const submit = async (e) => {
e.preventDefault();
const n = name.trim();
const em = email.trim();
if (!n || !em || !em.includes('@')) return;
setBusy(true);
try {
const r = await submitWaitlistSignup({ name: n, email: em, source: 'hero' });
setMailtoHref(r.mailtoHref || '');
setDone(true);
onSubmit?.({ name: n, email: em, mailtoHref: r.mailtoHref });
} finally {
setBusy(false);
}
};
return (
);
}
// Glass card
function Glass({ className = '', children, style = {} }) {
return (
{children}
);
}
// Tracking marquee row
function Marquee({ items, className = '' }) {
const doubled = [...items, ...items];
return (
{doubled.map((x, i) => (
{x}
))}
);
}
// Cursor blob: a soft glow that lazily follows the cursor
function CursorBlob() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { el.style.display = 'none'; return; }
if (window.matchMedia('(hover: none)').matches) { el.style.display = 'none'; return; }
let tx = window.innerWidth / 2, ty = window.innerHeight / 2;
let cx = tx, cy = ty, raf;
const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
const loop = () => {
cx += (tx - cx) * 0.08;
cy += (ty - cy) * 0.08;
el.style.transform = `translate(${cx}px, ${cy}px) translate(-50%,-50%)`;
raf = requestAnimationFrame(loop);
};
window.addEventListener('mousemove', onMove);
raf = requestAnimationFrame(loop);
return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
}, []);
return ;
}
// Scroll progress bar
function ScrollProgress() {
const ref = useRef(null);
useEffect(() => {
const onScroll = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
const p = max > 0 ? Math.min(1, Math.max(0, h.scrollTop / max)) : 0;
if (ref.current) ref.current.style.transform = `scaleX(${p.toFixed(4)})`;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return ;
}
// Headline with per-letter hover dance (split per word so spaces don't break)
function DancyHeading({ text, className = '', as: Tag = 'span' }) {
const words = text.split(/(\s+)/);
return (
{words.map((w, i) => {
if (/^\s+$/.test(w)) return {w};
return (
{Array.from(w).map((c, j) => (
{c}
))}
);
})}
);
}
// Per-word entrance — wrap each word in a rise-in span on mount
function RiseWords({ text, delayStart = 0, step = 60, className = '', italicLast = false }) {
const words = text.split(/(\s+)/);
let wordIdx = 0;
return (
{words.map((w, i) => {
if (/^\s+$/.test(w)) return {w};
const idx = wordIdx++;
return (
{w}
);
})}
);
}
// Confetti burst on success
function Confetti({ run }) {
const pieces = useMemo(() => Array.from({length: 56}, (_,i) => {
const ang = (Math.PI * 2 * i) / 56 + Math.random()*0.4;
const dist = 220 + Math.random() * 260;
return {
dx: Math.cos(ang) * dist,
dy: Math.sin(ang) * dist,
rot: (Math.random()*720 - 360) + 'deg',
delay: Math.random() * 0.15,
color: i % 3 === 0 ? '#7DD3FC' : i % 3 === 1 ? '#4FA8E0' : '#0A1F44',
};
}), []);
if (!run) return null;
return (
{pieces.map((p,i) => (
))}
);
}
Object.assign(window, {
useTilt, useInView, LoopType, CountUp, Eyebrow, Em, Dot, GlowButton, EmailPill, Glass, Marquee, Confetti,
CursorBlob, ScrollProgress, DancyHeading, RiseWords,
getWaitlistEmail, openWaitlistMailto, openMailtoUrl, buildWaitlistMailtoHref,
recordWaitlistEntry, submitWaitlistSignup, REGRADE_WAITLIST_LS,
});