import React from "react"; import { useFireproof } from "use-fireproof"; import { ImgGen, useImgGen, useViewer, useVibe } from "use-vibes"; import { Button, Heading, Icon, Input, Text } from "@vibes.diy/pouf"; const DB = "snackPlanets"; // The example wall: real planets painted once with the image model, shipped as bundle files. const EXAMPLES = [ { slug: "donut", name: "Glazed Donut" }, { slug: "ramen", name: "Midnight Ramen" }, { slug: "pizza", name: "Pepperoni Pizza" }, { slug: "boba", name: "Brown Sugar Boba" }, { slug: "sushi", name: "Salmon Roll" }, { slug: "cottoncandy", name: "Cotton Candy" }, { slug: "pancake", name: "Syrup Stack" }, { slug: "taco", name: "Taco Tuesday" }, { slug: "watermelon", name: "Watermelon" }, { slug: "popcorn", name: "Movie Popcorn" }, { slug: "strawberry", name: "Strawberry Shortcake" }, { slug: "nachos", name: "Nacho Cheese" }, ]; const FEATURED = EXAMPLES[0]; const TONES = ["yellow", "mint", "blue", "orange", "purple", "pink"]; const IDEAS = ["Birthday cake", "Churros", "Dumplings", "Mango sticky rice"]; function planetPrompt(snack) { return `A tiny round planet floating in deep colorful outer space, playful glossy 3D toy render, vivid saturated colors, soft rim light, sparkling stars and a swirly nebula behind, centered, whimsical and delicious. The planet is made entirely of ${snack}, with landscapes, moons and rings built from its own ingredients. No text, no letters.`; } function exampleFor(name) { const key = name.trim().toLowerCase(); return EXAMPLES.find((ex) => ex.name.toLowerCase() === key || ex.slug === key.replace(/\s+/g, "")); } function publicUrl() { const label = location.hostname.split(".")[0]; const cut = label.indexOf("--"); if (cut < 0) return location.href; return `https://vibes.diy/vibe/${label.slice(cut + 2)}/${label.slice(0, cut)}`; } // ---------- The drawn planet: an instant world for any snack, no waiting ---------- // Each flavor family brings its own colors and the bits its landscape is built from. const FLAVORS = [ { words: ["donut", "doughnut"], bits: ["🍩", "✨", "🍬"], hue: 330 }, { words: ["ramen", "noodle", "pho", "udon", "pasta", "spaghetti"], bits: ["🍜", "🥚", "🍥"], hue: 32 }, { words: ["pizza"], bits: ["🍕", "🍅", "🧀"], hue: 14 }, { words: ["boba", "bubble tea", "milk tea"], bits: ["🧋", "⚫", "🥛"], hue: 28 }, { words: ["sushi", "salmon", "maki", "onigiri"], bits: ["🍣", "🍙", "🥢"], hue: 12 }, { words: ["cotton candy", "candy", "lollipop", "gummy"], bits: ["🍭", "🍬", "☁️"], hue: 300 }, { words: ["pancake", "waffle", "crepe"], bits: ["🥞", "🧈", "🍯"], hue: 38 }, { words: ["taco", "burrito", "quesadilla", "nacho", "salsa"], bits: ["🌮", "🌶️", "🥑"], hue: 44 }, { words: ["watermelon", "melon"], bits: ["🍉", "💧", "🌱"], hue: 350 }, { words: ["popcorn", "corn"], bits: ["🍿", "🌽", "🧂"], hue: 48 }, { words: ["strawberry", "shortcake", "berry", "raspberry", "cherry"], bits: ["🍓", "🍰", "🍒"], hue: 345 }, { words: ["cake", "birthday", "cupcake"], bits: ["🎂", "🧁", "🎉"], hue: 320 }, { words: ["churro"], bits: ["🥖", "🍫", "✨"], hue: 30 }, { words: ["dumpling", "gyoza", "bao", "dim sum"], bits: ["🥟", "🥢", "🫖"], hue: 40 }, { words: ["sundae", "ice cream", "gelato", "froyo"], bits: ["🍨", "🍦", "🍒"], hue: 200 }, { words: ["chocolate", "brownie", "cocoa", "fudge"], bits: ["🍫", "🍪", "☕"], hue: 22 }, { words: ["cookie", "biscuit"], bits: ["🍪", "🥛", "🍫"], hue: 30 }, { words: ["coffee", "latte", "espresso", "mocha"], bits: ["☕", "🫘", "🥐"], hue: 25 }, { words: ["mango", "papaya", "pineapple", "tropical"], bits: ["🥭", "🍍", "🌴"], hue: 40 }, { words: ["banana"], bits: ["🍌", "🌴", "🍯"], hue: 52 }, { words: ["lemon", "lime", "citrus", "orange"], bits: ["🍋", "🍊", "🌼"], hue: 56 }, { words: ["matcha", "mint", "avocado", "kiwi", "pickle", "green"], bits: ["🍵", "🥑", "🌿"], hue: 120 }, { words: ["grape", "ube", "taro", "blueberry", "plum"], bits: ["🍇", "🫐", "💜"], hue: 270 }, { words: ["burger", "hamburger", "fries", "hot dog"], bits: ["🍔", "🍟", "🥤"], hue: 30 }, { words: ["cheese", "mac"], bits: ["🧀", "🫕", "🥨"], hue: 48 }, { words: ["croissant", "bread", "bagel", "toast", "pretzel"], bits: ["🥐", "🥨", "🍞"], hue: 34 }, { words: ["apple", "pie"], bits: ["🍎", "🥧", "🍂"], hue: 6 }, { words: ["peach"], bits: ["🍑", "🌸", "🍯"], hue: 22 }, { words: ["egg", "breakfast", "bacon"], bits: ["🍳", "🥓", "🧇"], hue: 46 }, { words: ["rice", "curry", "biryani"], bits: ["🍛", "🍚", "🌶️"], hue: 40 }, ]; function seeded(text) { let h = 2166136261; for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619); return () => { h = Math.imul(h ^ (h >>> 15), 2246822507); h = Math.imul(h ^ (h >>> 13), 3266489909); h ^= h >>> 16; return (h >>> 0) / 4294967296; }; } function flavorOf(snack) { const key = snack.toLowerCase(); const hit = FLAVORS.find((f) => f.words.some((w) => key.includes(w))); if (hit) return hit; const rand = seeded(key); return { bits: ["🍪", "✨", "🍬"], hue: Math.floor(rand() * 360) }; } function DrawnPlanet({ snack }) { const id = React.useId().replace(/:/g, ""); const world = React.useMemo(() => { const rand = seeded(snack.toLowerCase()); const flavor = flavorOf(snack); const hue = flavor.hue; const stars = Array.from({ length: 46 }, () => ({ x: rand() * 400, y: rand() * 400, r: 0.4 + rand() * 1.6, o: 0.4 + rand() * 0.6 })); const lands = Array.from({ length: 7 }, () => ({ x: 120 + rand() * 160, y: 120 + rand() * 160, rx: 18 + rand() * 40, ry: 10 + rand() * 24, rot: rand() * 180, shade: rand(), })); const bits = []; for (let i = 0; i < 18; i++) { const a = rand() * Math.PI * 2; const d = Math.sqrt(rand()) * 78; bits.push({ x: 200 + Math.cos(a) * d, y: 200 + Math.sin(a) * d, s: 30 - d * 0.18 + rand() * 6, e: flavor.bits[i % flavor.bits.length], r: rand() * 50 - 25 }); } const tilt = -18 + rand() * 36; const moons = [ { x: 70 + rand() * 40, y: 80 + rand() * 50, s: 34, e: flavor.bits[0] }, { x: 300 + rand() * 40, y: 300 + rand() * 40, s: 26, e: flavor.bits[1] }, ]; return { hue, stars, lands, bits, tilt, moons, ringHue: (hue + 40) % 360 }; }, [snack]); const { hue, ringHue } = world; return ( ); } // ---------- One planet's picture, whoever is looking ---------- // A wall planet shows its painting; a signed-in launcher's planet is painted by // the image model; a guest's planet is drawn on the spot. function PlanetArt({ planet, database, signedIn }) { if (planet.art) { return {`A

; } if (signedIn) { return ( ); } return ; } // Signed out: show the painting when the launcher already has one, otherwise draw it. function PaintedOrDrawn({ planet, database }) { const { document: saved } = useImgGen({ _id: planet._id, database }); const painted = Object.keys(saved?._files ?? {}).length > 0; if (painted) { return ; } return ; } // ---------- The hero: one big planet, the first thing anyone sees ---------- function Hero({ planet, database, signedIn, mine, onSignIn }) { const c = { stage: "relative w-full max-w-sm sm:max-w-md mx-auto aspect-square rounded-full overflow-hidden shadow-2xl sp-float", caption: "mt-3 text-center", name: "text-xl sm:text-2xl font-bold", keep: "mt-1 text-sm text-muted-foreground", }; return (

Planet {planet.snack}

{mine && !signedIn && !planet.art && (

Yours, launched just now.{" "}

)} {mine && (signedIn || planet.art) &&

Yours, on the launchpad now.

}

); } // ---------- Launching ---------- function Launcher({ snack, setSnack, onLaunch, ready }) { const typed = snack.trim(); const c = { form: "flex flex-col sm:flex-row sm:items-center gap-2 w-full bg-card text-card-foreground rounded-lg shadow-lg border border-border p-2", grow: "flex-1 min-w-0", chips: "flex flex-wrap gap-2 mt-3", }; function onSubmit(e) { e.preventDefault(); if (typed) onLaunch(typed); } return (

{IDEAS.map((idea, i) => ( ))}

); } function ExampleTile({ example, onPick, ready }) { const c = { tile: "relative block w-full overflow-hidden rounded-lg shadow-md bg-card transition-transform duration-200 hover:-translate-y-1 active:translate-y-0", img: "block w-full aspect-square object-cover", tag: "hidden sm:block absolute left-2 bottom-2 truncate rounded-sm bg-card text-card-foreground px-2 py-1 text-xs font-bold shadow-sm", }; return ( ); } // The launchpad shows planets that already have their picture, so nobody waits on someone else's launch. function FeedPlanet({ planet, database }) { const { document: saved } = useImgGen({ _id: planet._id, database }); const painted = Object.keys(saved?._files ?? {}).length > 0; if (!planet.art && !painted) return null; return (

); } const FLOAT_CSS = ` @keyframes sp-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } } .sp-float { animation: sp-float 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .sp-float { animation: none; } } `; export default function App() { const { database, useLiveQuery } = useFireproof(DB); const { docs } = useLiveQuery("type", { key: "planet", descending: true, limit: 24 }); const { viewer, isViewerPending, requestLogin } = useViewer(); const { me, ready } = useVibe(DB); const [snack, setSnack] = React.useState(""); const [heroId, setHeroId] = React.useState(null); const [copied, setCopied] = React.useState(false); const signedIn = !isViewerPending && !!viewer; const planets = [...docs].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); const launched = planets.find((p) => p._id === heroId); const featured = { _id: "featured", snack: FEATURED.name, art: `/planets/${FEATURED.slug}.jpg` }; const hero = launched ?? featured; async function launch(name, example) { const clean = name.trim().slice(0, 60); if (!clean) return; const match = example ?? exampleFor(clean); setSnack(""); const doc = { type: "planet", snack: match ? match.name : clean, prompt: planetPrompt(match ? match.name : clean), createdAt: Date.now(), }; if (match) doc.art = `/planets/${match.slug}.jpg`; if (signedIn && me?.userHandle) doc.authorHandle = me.userHandle; const { ok, id } = await database.put(doc); if (ok === false) setSnack((now) => now || clean); else { setHeroId(id); window.scrollTo({ top: 0, behavior: "smooth" }); } } async function copyLink() { try { await navigator.clipboard.writeText(publicUrl()); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (e) { setCopied(false); } } const c = { page: "min-h-screen bg-background text-foreground font-sans", wrap: "max-w-6xl mx-auto px-4 py-4 sm:py-8 flex flex-col gap-6 sm:gap-10", top: "grid gap-5 sm:gap-10 sm:grid-cols-2 sm:items-center", head: "flex flex-col gap-3", title: "text-4xl sm:text-6xl font-bold tracking-tight", sub: "text-base sm:text-lg text-muted-foreground", wall: "grid grid-cols-4 sm:grid-cols-6 gap-2 sm:gap-3", section: "flex flex-col gap-3", sectionHead: "flex flex-wrap items-center justify-between gap-2", feed: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", }; return (

Snack Planets

Name a snack. We build you a whole tiny world out of it.

launch(n)} ready={ready} />

Tap one to launch it

{EXAMPLES.map((ex) => ( launch(e.name, e)} /> ))}

Fresh from the launchpad

Every painted planet lands here for anyone with the link to visit.

{planets .filter((p) => p._id !== heroId) .map((p) => ( ))}

); }