// Motion primitives + drop-release signup modal. // Adds: ScrollReveal, FloatingPouch, PageFadeIn, AnimatedArrow, // DropProvider/useDrop, and DropSignupModal. // ────────────────────────────────────────────────────────────── // One-time CSS injection — keyframes + base motion classes. // ────────────────────────────────────────────────────────────── (function injectMotionCss() { if (document.getElementById('site-motion-css')) return; const s = document.createElement('style'); s.id = 'site-motion-css'; s.textContent = ` @keyframes rg-fade-up { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @keyframes rg-fade { from { opacity:0; } to { opacity:1; } } @keyframes rg-float-a { 0%,100% { transform:translateY(0) rotate(var(--rg-rot,0deg)); } 50% { transform:translateY(-8px) rotate(var(--rg-rot,0deg)); } } @keyframes rg-stamp { 0% { opacity:0; transform:scale(.85); } 60% { opacity:1; transform:scale(1.04); } 100% { opacity:1; transform:scale(1); } } @keyframes rg-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes rg-arrow { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } } @keyframes rg-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .rg-fade-up { opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); } .rg-fade-up.rg-in { opacity:1; transform:translateY(0); } .rg-fade { opacity:0; transition: opacity 1.2s ease; } .rg-fade.rg-in { opacity:1; } .rg-float { animation: rg-float-a 6s ease-in-out infinite; will-change: transform; } .rg-stamp-in { animation: rg-stamp .9s cubic-bezier(.2,.9,.3,1.05) both; } .rg-page { animation: rg-fade-up .55s cubic-bezier(.2,.7,.3,1) both; } .rg-marquee-track { display:flex; gap:48px; animation: rg-marquee 38s linear infinite; will-change: transform; } .rg-btn { position:relative; overflow:hidden; } .rg-btn:hover .rg-arrow { animation: rg-arrow 1s ease-in-out infinite; } .rg-btn::after { content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition: opacity .25s; pointer-events:none; mix-blend-mode:overlay; } .rg-btn:hover::after { opacity:.08; } .rg-btn:active { transform: translateY(1px); } .rg-card-lift { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .rg-card-lift:hover { transform: translateY(-4px); } .rg-pouch-lift { transition: transform .45s cubic-bezier(.2,.7,.3,1); will-change: transform; } .rg-link-underline { position:relative; } .rg-link-underline::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .rg-link-underline:hover::after { transform:scaleX(1); } .rg-spinner { width:18px; height:18px; border-radius:50%; border:1.5px solid currentColor; border-top-color:transparent; animation: rg-spin .9s linear infinite; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { .rg-fade-up, .rg-fade, .rg-float, .rg-stamp-in, .rg-page, .rg-marquee-track { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; } } `; document.head.appendChild(s); })(); // ────────────────────────────────────────────────────────────── // ScrollReveal — wraps children, adds .rg-in once they enter viewport. // ────────────────────────────────────────────────────────────── function ScrollReveal({ children, delay = 0, as: As = 'div', className = '', style }) { const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); React.useEffect(() => { if (!ref.current || seen) return; if (typeof IntersectionObserver === 'undefined') { setSeen(true); return; } const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); obs.observe(ref.current); return () => obs.disconnect(); }, [seen]); return ( {children} ); } // Stagger helper — wraps a list and gives each child an incrementing delay. function Stagger({ children, step = 80, start = 0, className = '', style }) { const arr = React.Children.toArray(children); return (
{arr.map((c, i) => ( {c} ))}
); } // ────────────────────────────────────────────────────────────── // FloatingPouch — wraps a pouch and gives it a gentle infinite float, // while preserving its base rotate/translate transforms via CSS vars. // ────────────────────────────────────────────────────────────── function FloatingPouch({ children, rotate = 0, translateX = 0, translateY = 0, delay = 0, duration = 6, lift = 0 }) { return (
{ e.currentTarget.style.animationPlayState = 'paused'; e.currentTarget.style.transform = `rotate(${rotate}deg) translateY(${-(lift || 14)}px) scale(1.04)`; }} onMouseLeave={(e) => { e.currentTarget.style.animationPlayState = 'running'; e.currentTarget.style.transform = `rotate(${rotate}deg)`; }} >{children}
); } // ────────────────────────────────────────────────────────────── // Animated arrow that scoots on parent .rg-btn hover. // ────────────────────────────────────────────────────────────── function AnimatedArrow({ children = '→' }) { return {children}; } // ────────────────────────────────────────────────────────────── // Drop signup context + modal // ────────────────────────────────────────────────────────────── const DropContext = React.createContext({ open: () => {}, isOpen: false }); function DropProvider({ children }) { const [isOpen, setIsOpen] = React.useState(false); const [source, setSource] = React.useState(null); const open = (src) => { setSource(src || null); setIsOpen(true); }; const close = () => setIsOpen(false); return ( {children} ); } const useDrop = () => React.useContext(DropContext); // Reusable "Sign up for drop release" button. Pulls action from context. function DropCTA({ children = 'Sign up for drop release', variant = 'solid', source, fg, bg, style, full }) { const { open } = useDrop(); const v = variant === 'solid' ? { background: bg || site.ink, color: fg || site.paper, border:`1px solid ${bg || site.ink}` } : { background:'transparent', color: fg || site.ink, border:`1px solid ${fg || site.ink}` }; return ( ); } // The modal itself — apothecary-styled email collector. function DropSignupModal() { const { isOpen, close, source } = useDrop(); const [email, setEmail] = React.useState(''); const [stage, setStage] = React.useState('form'); // 'form' | 'loading' | 'done' const [interest, setInterest] = React.useState(['all']); // viewport reflects iPhone-narrow cases so we full-screen the modal there const isNarrow = (typeof window !== 'undefined') ? window.innerWidth < 720 : false; React.useEffect(() => { if (isOpen) { setStage('form'); setEmail(''); setInterest(source ? [source] : ['all']); } }, [isOpen, source]); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') close(); }; if (isOpen) window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [isOpen, close]); const submit = (e) => { e.preventDefault(); if (!email) return; setStage('loading'); // Fake the network call — show success after a beat. setTimeout(() => setStage('done'), 950); }; const toggle = (id) => setInterest((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev.filter((x) => x !== 'all'), id] ); return ( <>
{/* close */} {/* stamped seal */}
{stage !== 'done' && ( <>
PRE-LAUNCH · SS 26

The first drop opens soon.

Leave your inbox. We will write only when the apothecary opens — once for the drop, and a small thank-you note after.

setEmail(e.target.value)} placeholder="your@inbox.com" autoFocus disabled={stage === 'loading'} style={{flex:1, padding:'16px 18px', border:'none', background:'transparent', fontFamily: site.serif, fontStyle:'italic', fontSize:18, color: site.ink, outline:'none'}} />
WHAT TO TELL ME ABOUT
{[ ['all','Everything'], ['hydrate','Hydrate · 01'], ['recover','Recover · 02'], ['sleep','Sleep · 03'], ['revive','Revive · 04'], ['focus','Focus · 05'], ].map(([id, label]) => { const active = interest.includes(id); return ( ); })}
NO SPAM · UNSUBSCRIBE IN ONE CLICK · 식약처 등록 진행 중
)} {stage === 'done' && (
SEALED.

You are on the list.

We will write to {email} the morning the apothecary opens. Until then, drink water.

)}
); } Object.assign(window, { ScrollReveal, Stagger, FloatingPouch, AnimatedArrow, DropContext, DropProvider, useDrop, DropCTA, DropSignupModal, useViewport, }); // ────────────────────────────────────────────────────────────── // useViewport — width + breakpoint flags, updates on resize. // ────────────────────────────────────────────────────────────── function useViewport() { const get = () => ({ width: typeof window !== 'undefined' ? window.innerWidth : 1440, height: typeof window !== 'undefined' ? window.innerHeight : 900, }); const [vp, setVp] = React.useState(get); React.useEffect(() => { const onResize = () => setVp(get()); window.addEventListener('resize', onResize); window.addEventListener('orientationchange', onResize); return () => { window.removeEventListener('resize', onResize); window.removeEventListener('orientationchange', onResize); }; }, []); return { width: vp.width, height: vp.height, isMobile: vp.width < 720, isTablet: vp.width >= 720 && vp.width < 1100, isDesktop: vp.width >= 1100, }; }