// Motion layer — restrained blur-fade section reveals + subtle card/button polish.
// Reference feel: lemonsqueezy.com — content softly resolves into focus as it scrolls in.
// No new colors, no new visual language. Polish only.
(function () {
const INK = '#0B1220';
const HAIR = 'rgba(11,18,32,0.08)';
const HAIR_2 = 'rgba(11,18,32,0.14)';
// ====== Global styles ======
function GlobalStyles() {
return (
);
}
// ====== Reveal wrapper — IntersectionObserver-driven blur fade ======
function Reveal({children, delay = 0}) {
const ref = React.useRef(null);
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
setSeen(true);
io.unobserve(e.target);
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -15% 0px' });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return (
{children}
);
}
// ====== WhatIs override — same layout, just adds the polish classes ======
// We reimplement this one component (tiny) so the feature cards pick up hover.
function WhatIsMotion() {
// Match originals exactly
const BG = '#FAFBFC';
const BG_2 = '#F3F5F8';
const SURFACE = '#FFFFFF';
const INK_2 = 'rgba(11,18,32,0.68)';
const CORAL = '#FF6A5B';
const FONT = '"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,sans-serif';
const items = [
{t:'Push to Deploy', d:'Every GitHub commit auto-updates your live site in about 30 seconds.', k:'↗'},
{t:'Global Edge', d:'300+ Cloudflare edge locations serve from the node nearest your visitor.', k:'◉'},
{t:'Custom Domains', d:'Any domain you own. Free SSL. Zero configuration required.', k:'✦'},
{t:'Human Support', d:'Real humans who know your setup. Not a forum. Not a chatbot.', k:'★'},
];
return (
The product
The fastest way to host a static website.
Whether you built it with Lovable, Replit, or hand-coded every line — connect your GitHub
repo and we deploy to Cloudflare's global edge in seconds. Custom domains, SSL,
analytics, and expert support included. Starting at $5/site.
{items.map((x,i)=>(
{x.k}
{x.t}
{x.d}
))}
);
}
window.MotionGlobalStyles = GlobalStyles;
window.MotionReveal = Reveal;
window.MotionWhatIs = WhatIsMotion;
// ====== Support override — same polish on the three "Real support" cards ======
function SupportMotion() {
const BG_2 = '#F3F5F8';
const SURFACE = '#FFFFFF';
const INK_2 = 'rgba(11,18,32,0.68)';
const INK_3 = 'rgba(11,18,32,0.50)';
const CORAL = '#FF6A5B';
const FONT = '"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,sans-serif';
const pillars = [
{t:'Simple Onboarding', d:"We'll walk you through your first deploy — no terminal, no stress.", k:'✦'},
{t:'24/7 Live Chat', d:'Real engineers in about 90 seconds. No ticket queues.', k:'●'},
{t:'Expert Troubleshooting', d:'Talk to a human who knows your setup — and cares about fixing it.', k:'★'},
];
return (
Support
Real support. From real humans.
{pillars.map((p,i)=>(
{p.k}
{p.t}
{p.d}
))}
);
}
window.MotionSupport = SupportMotion;
// ====== Tag the pricing card after render ======
function PricingCardTagger() {
React.useEffect(() => {
const tag = () => {
const sections = document.querySelectorAll('section');
sections.forEach(s => {
if (s.textContent.includes('Simple pricing. No surprises.')) {
const card = [...s.querySelectorAll('div')].find(d =>
d.style && d.style.borderRadius &&
parseInt(d.style.borderRadius) >= 16 &&
d.textContent.includes('/ site'));
if (card && !card.classList.contains('mo-pricing-card')) {
card.classList.add('mo-pricing-card');
}
}
});
};
tag();
const id = setInterval(tag, 400);
const stop = setTimeout(() => clearInterval(id), 4000);
return () => { clearInterval(id); clearTimeout(stop); };
}, []);
return null;
}
window.MotionPricingTagger = PricingCardTagger;
// ====== Tag primary CTAs (Start Free + matching dark buttons) ======
function PrimaryCTATagger() {
React.useEffect(() => {
const tag = () => {
const anchors = document.querySelectorAll('a');
anchors.forEach(a => {
if (a.classList.contains('mo-cta')) return;
// Skip anything inside the pricing card — user request.
if (a.closest('.mo-pricing-card')) return;
const txt = (a.textContent || '').trim();
const bg = (a.style && a.style.background) || '';
// Match: dark (INK) backgrounds — that's what Start Free and PrimaryBtn use.
const isDarkBg = /#0B1220|rgb\(11,\s*18,\s*32\)/i.test(bg);
const matchesLabel = /Start free|Deploy your first site|Watch the demo|Start free trial/i.test(txt);
if (isDarkBg || matchesLabel) {
a.classList.add('mo-cta');
}
});
};
tag();
const id = setInterval(tag, 400);
const stop = setTimeout(() => clearInterval(id), 4000);
return () => { clearInterval(id); clearTimeout(stop); };
}, []);
return null;
}
window.MotionPrimaryCTATagger = PrimaryCTATagger;
})();