/* Direction B — STICKER COLLAGE (responsive) Cereal-box wall scrapbook energy. Zines, stickers, taped photos. */ function useIsMobile(bp = 768) { const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < bp); React.useEffect(() => { const on = () => setM(window.innerWidth < bp); on(); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, [bp]); return m; } const SCstyles = { root: { fontFamily: "'Space Grotesk', system-ui, sans-serif", color: "#1A1410", background: "#F4ECE0", minHeight: "100%", width: "100%", }, display: { fontFamily: "'Archivo Black', 'Bagel Fat One', sans-serif", letterSpacing: "-0.02em", lineHeight: 0.92, }, hand: { fontFamily: "'Caveat', 'Permanent Marker', cursive", }, mono: { fontFamily: "'JetBrains Mono', ui-monospace, monospace", letterSpacing: "0.04em", }, }; function SCBoxWall({ style }) { const m = useIsMobile(); return (
); } function SCPhotoCard({ src, rotate = 0, caption, tape, w = 200, h = 220, responsive = true }) { const m = useIsMobile(); // On mobile: scale down width/height by ~0.75 if responsive const rw = responsive && m ? Math.round(w * 0.72) : w; const rh = responsive && m ? Math.round(h * 0.72) : h; return (
{tape != null && tape !== 0 && (
)}
{ e.currentTarget.style.display = "none"; }} />
{caption && (
{caption}
)}
); } function SCSticker({ children, bg, rotate = 0, style }) { return (
{children}
); } function SCButton({ children, color = "var(--ts-pink)", fg = "#fff", rotate = 0, onClick, href = "#", target }) { const m = useIsMobile(); return ( {children} ); } function SCHero() { const m = useIsMobile(); return (
{/* Nav */}
Twisted Spoons
MURRIETA · CA · EST. 2025
{!m && ( )} ORDER →
{/* Stickers + headline block */}
★ NOW OPEN ★ CEREAL BAR

THE
CEREAL
AISLE,

but better.

Pick a cereal. Any cereal. We swirl it into ice cream, pile it with the good stuff, and hand it over before it melts. That's the whole thing.

SEE THE SWIRLS VISIT THE SHOP
{m ? (
) : ( <>
made to order!
)}
{/* The cereal box WALL */}
★ AISLE 7 · CEREAL ★ {!m && 40+ BOXES · ALL FAIR GAME} ★ SWIRLED TO ORDER ★
); } function SCTicker() { const m = useIsMobile(); return (
{Array.from({length: 4}).map((_, i) => ( CEREALIOUSLY DELICIOUS ★ HAND SWIRLED ★ MURRIETA LOCAL ★ SINCE 2025 ★ ))}
); } function SCSwirlOfWeek() { const m = useIsMobile(); const d = window.TS_DATA; const s = d.swirls.find(x => x.n === 4); return (
SWIRL OF THE WEEK
NOW SERVING
#{String(s.n).padStart(2,"0")}

{s.name.toUpperCase()}

BASE
{s.base} ice cream
BLEND
{s.blend}
TOP
{s.top}
DRIZZLE
{s.drizzle}
ORDER THIS SWIRL
← try it!
); } function SCMenu() { const m = useIsMobile(); const d = window.TS_DATA; const [tab, setTab] = React.useState("all"); const filtered = d.swirls.filter(s => { if (tab === "all") return true; if (tab === "choc") return /chocolate|oreo|brownie|reese|nutter|cookie|cocoa|peanut/i.test(s.name + s.blend + s.top); if (tab === "fruit") return /strawberr|berry|fruit|bananas|raspberry|cactus|silly/i.test(s.name + s.blend + s.top + s.drizzle); if (tab === "classic") return /cinnamon|toast|flake|cereal|honey|frosted|captain|goat/i.test(s.name + s.blend + s.top); return true; }); return ( ); } function SCStory() { const m = useIsMobile(); return (
OUR STORY

IT STARTED WITH
A BIG BOWL.

Twisted Spoons is a small family shop in Murrieta, California. We're a cereal bar first — floor-to-ceiling boxes on the wall, all the classics, plus the weird ones nobody's made in twenty years. And every single swirl gets made right in front of you.

Bring the kids. Bring your cousin. Bring a date who isn't afraid of sprinkles. We'll be the ones behind the counter in pink aprons, swirling your cereal into something you can't stop thinking about.

— The Twisted Spoons Fam
); } function SCGallery() { const m = useIsMobile(); const items = [ { src: "assets/product5.jpg", caption: "aye aye captain", rotate: -5, tape: 3 }, { src: "assets/product4.jpg", caption: "pebble shake!!", rotate: 4, tape: -4 }, { src: "assets/product3.jpg", caption: "monster shake", rotate: -2, tape: 5 }, { src: "assets/mascot-bench.jpg", caption: "★ mascot alert ★", rotate: 6, tape: -3 }, { src: "assets/product6.jpg", caption: "berry crumble", rotate: 3, tape: -4 }, { src: "assets/product2.jpg", caption: "#18 SMASHER", rotate: -6, tape: 4 }, ]; return (
THE SHOP

SCRAPBOOK PAGE.

SEE MORE ON IG →
{m ? (
{items.map((it, i) => ( ))}
TAG @TWISTEDSPOONS
) : (
TAG @TWISTEDSPOONS
)}
); } function SCPartyModal({ open, onClose }) { const m = useIsMobile(); const [status, setStatus] = React.useState('idle'); const [form, setForm] = React.useState({ name:'', email:'', phone:'', date:'', guests:'', type:'Birthday', notes:'' }); if (!open) return null; const set = k => e => setForm(f => ({ ...f, [k]: e.target.value })); const submit = e => { e.preventDefault(); setStatus('sending'); setTimeout(() => setStatus('sent'), 1800); }; const reset = () => { setStatus('idle'); setForm({ name:'', email:'', phone:'', date:'', guests:'', type:'Birthday', notes:'' }); onClose(); }; const inp = { width:'100%', boxSizing:'border-box', padding:'10px 14px', borderRadius:6, border:'2px solid #1A1410', fontSize:14, fontFamily:'Space Grotesk,system-ui,sans-serif', background:'#fff', outline:'none' }; const lbl = { ...SCstyles.display, fontSize:11, letterSpacing:'0.12em', color:'#1A1410', display:'block', marginBottom:5 }; return (
e.stopPropagation()} style={{ background:'#F4ECE0', border:'3px solid #1A1410', boxShadow:'6px 6px 0 #1A1410', borderRadius:12, width:'100%', maxWidth:520, maxHeight:'90vh', overflowY:'auto', padding: m ? 20 : 36, position:'relative' }}> {status === 'sent' ? (
🎉

REQUEST SENT!

We got your party request! We'll reach out within 24 hours to lock in your date.

CLOSE ✕
) : ( <>
★ PARTY REQUEST ★

BOOK THE
CEREAL BAR.