// yolo. marketing site — editorial magazine + polaroid hero const { useState, useEffect, useRef, useMemo } = React; // Polaroid photo bank — using picsum seeds so the photos are consistent and travel-y. const PHOTOS = [ { seed: 'reykjavik', caption: 'Reykjavík · ‑8°', hand: 'Inga' }, { seed: 'kyoto-rain', caption: 'Kyoto, raining', hand: 'M.' }, { seed: 'surf-ojai', caption: 'first time up', hand: 'J' }, { seed: 'lisbon-22', caption: 'Lisbon w/ S', hand: 'a.' }, { seed: 'patagonia', caption: 'Patagonia, day 4', hand: 'L' }, { seed: 'marrakech', caption: 'Marrakech market', hand: 'r' }, { seed: 'oaxaca-mez', caption: 'mezcal, oaxaca', hand: 'p.' }, { seed: 'tokyo-mid', caption: 'Tokyo, midnight', hand: 'k' }, { seed: 'hanoi-77', caption: 'Hà Nội · 77¢ pho', hand: 'V' }, { seed: 'iceland-cave', caption: 'ice cave, finally', hand: 'M' }, { seed: 'big-sur', caption: 'Big Sur, no service', hand: 'a' }, { seed: 'bali-sun', caption: 'Bali · 5:43am', hand: 's' }, { seed: 'nyc-snow', caption: 'NYC, first snow', hand: 'J.' }, { seed: 'amalfi', caption: 'Amalfi, sunburnt', hand: 'L' }, { seed: 'jaipur-hot', caption: 'Jaipur, too hot', hand: 'r' }, { seed: 'banff', caption: 'Banff, before sunrise', hand: 'k.' }, { seed: 'porto-tile', caption: 'Porto tiles', hand: 'a' }, { seed: 'sahara-2am', caption: 'Sahara · 2am', hand: 'i' }, { seed: 'budapest', caption: 'Budapest baths', hand: 's' }, { seed: 'sf-fog', caption: 'SF, the fog', hand: 'M.' }, { seed: 'mexico-cit', caption: 'CDMX, churros', hand: 'p' }, { seed: 'queenstown', caption: 'Queenstown skydive', hand: 'A' }, { seed: 'cinque', caption: 'Cinque Terre', hand: 'L' }, { seed: 'desert-rd', caption: 'desert road, AZ', hand: 'J' }, { seed: 'tulum-22', caption: 'Tulum, finally', hand: 'm.' }, { seed: 'seoul-han', caption: 'Seoul, Han at dusk', hand: 'k' }, { seed: 'norway-fj', caption: 'fjord, day 2', hand: 'E' }, { seed: 'pnp-flag', caption: 'Cape Point', hand: 's.' }, { seed: 'rome-7am', caption: 'Rome · 7am, empty', hand: 'L.' }, { seed: 'kerala-bw', caption: 'Kerala backwaters', hand: 'R' }, { seed: 'havana-66', caption: 'Havana, 1966 vibes', hand: 'j' }, { seed: 'paris-rain', caption: 'Paris in the rain', hand: 'm' }, { seed: 'sydney-nye', caption: 'Sydney NYE', hand: 'A.' }, { seed: 'istanbul-x', caption: 'İstanbul, both sides', hand: 'd' }, { seed: 'capetown-t', caption: 'Table Mtn., windy', hand: 'n' }, { seed: 'goa-mons', caption: 'Goa, monsoon', hand: 'p.' }, { seed: 'sapa-rice', caption: 'Sa Pa terraces', hand: 'V.' }, { seed: 'taroko', caption: 'Taroko Gorge', hand: 'c' }, { seed: 'chamonix', caption: 'Chamonix, top', hand: 'L' }, { seed: 'wadi-rum', caption: 'Wadi Rum, no moon', hand: 'i.' }, { seed: 'oslo-summ', caption: 'Oslo, white nights', hand: 'E.' }, { seed: 'tasmania', caption: 'Tassie east coast', hand: 'A' }, { seed: 'puglia-sun', caption: 'Puglia, white town', hand: 'l' }, { seed: 'cuzco-rd', caption: 'Cuzco, getting there', hand: 'm' }, { seed: 'banff-lake', caption: 'Moraine, before crowd', hand: 'k' }, { seed: 'galapagos', caption: 'Galápagos, swam w/', hand: 'd.' }, { seed: 'edinburgh', caption: 'Edinburgh, January', hand: 'C' }, { seed: 'lapland', caption: 'aurora, finally', hand: 'E' }, { seed: 'mongolia', caption: 'Gobi, no signal', hand: 'b' }, { seed: 'osaka-st', caption: 'Dōtonbori, late', hand: 'k.' }, { seed: 'naxos-sea', caption: 'Naxos, swimming', hand: 'a' }, { seed: 'crete-22', caption: 'Crete · taverna', hand: 'L.' }, { seed: 'la-paz', caption: 'La Paz, dizzy', hand: 'r' }, { seed: 'helsinki', caption: 'Helsinki sauna', hand: 'M' }, { seed: 'la-rooftop', caption: 'LA, that rooftop', hand: 'j.' }, { seed: 'koh-rong', caption: 'Koh Rong · plankton', hand: 'V' }, { seed: 'sicily-am', caption: 'Taormina sunrise', hand: 'L' }, { seed: 'iguazu', caption: 'Iguazú, drenched', hand: 'p' }, { seed: 'bryce-can', caption: 'Bryce, dawn', hand: 'k' }, { seed: 'antelope-c', caption: 'Antelope Canyon', hand: 'j' }, { seed: 'phong-nha', caption: 'Phong Nha, dripping', hand: 'V.' }, { seed: 'sintra-fog', caption: 'Sintra in fog', hand: 'a.' }, { seed: 'svalbard', caption: 'Svalbard, polar bear', hand: 'E' }, { seed: 'milan-tram', caption: 'Milan tram #1', hand: 'L' }, { seed: 'cartagena', caption: 'Cartagena, salsa', hand: 'p.' }, { seed: 'lake-como', caption: 'Como, ferry', hand: 'M.' }, { seed: 'medellin', caption: 'Medellín, comuna 13', hand: 'r' }, { seed: 'bhutan-22', caption: 'Tiger’s Nest', hand: 'd' }, { seed: 'fiji-noon', caption: 'Fiji · island #3', hand: 'A' }, { seed: 'newzealand', caption: 'Milford Sound', hand: 'L.' }, { seed: 'lalibela', caption: 'Lalibela, holy week', hand: 's' }, { seed: 'beirut-bal', caption: 'Beirut, balcony night', hand: 'n' }, { seed: 'venice-am', caption: 'Venice · 6am no tourists', hand: 'L' }, { seed: 'mumbai-rd', caption: 'Mumbai · raining', hand: 'p' }, { seed: 'machu-pic', caption: 'Machu Picchu, finally', hand: 'j.' }, { seed: 'maldives', caption: 'Maldives · still', hand: 'a' }, { seed: 'angkor-am', caption: 'Angkor · sunrise', hand: 'V' }, { seed: 'rio-corc', caption: 'Rio, Corcovado', hand: 'b' }, { seed: 'dubrovnik', caption: 'Dubrovnik walls', hand: 'L' }, { seed: 'siena-pal', caption: 'Siena, palio day', hand: 'L.' }, { seed: 'kathmandu', caption: 'Kathmandu, momos', hand: 'p' }, { seed: 'oahu-no2', caption: 'Oahu · north shore', hand: 's' }, { seed: 'bordeaux', caption: 'Bordeaux, the wine', hand: 'M' }, { seed: 'fes-leather',caption: 'Fès tannery', hand: 'r' }, { seed: 'singapore', caption: 'Singapore, midnight', hand: 'k.' }, { seed: 'salzburg', caption: 'Salzburg, snow', hand: 'E' }, { seed: 'havana-2', caption: 'Havana, malecón', hand: 'j' }, { seed: 'okinawa', caption: 'Okinawa, quiet', hand: 'M.' }, { seed: 'andalucia', caption: 'Sevilla, naranjos', hand: 'a' }, { seed: 'nara-deer', caption: 'Nara · deer everywhere',hand: 'k' }, { seed: 'utah-arc', caption: 'Arches, golden hour', hand: 'J' }, { seed: 'split-cro', caption: 'Split, harbour', hand: 'A.' }, { seed: 'galway', caption: 'Galway, raining (yes)', hand: 'C' }, { seed: 'gili-air', caption: 'Gili Air · snorkel', hand: 'd' }, { seed: 'jokulsarl', caption: 'Jökulsárlón floes', hand: 'E.' }, { seed: 'georgia-tb', caption: 'Tbilisi · supra night', hand: 'n' }, { seed: 'comino-bg', caption: 'Comino · blue lagoon', hand: 'L' }, { seed: 'kakadu', caption: 'Kakadu, crocs', hand: 'A' }, { seed: 'taj-am', caption: 'Taj · 6:14am', hand: 'p.' }, { seed: 'st-john', caption: 'St. John, sailing', hand: 'j.' }, { seed: 'mara-safari',caption: 'Maasai Mara', hand: 's.' }, ]; // pseudo-random deterministic positions for polaroid scatter — looks chaotic, stays stable // Bleeds beyond the hero edges so coverage is full corner-to-corner. const COLS = 10; const ROWS = 7; const SCATTER = PHOTOS.map((_, i) => { const cell = i % (COLS * ROWS); const col = cell % COLS; const row = Math.floor(cell / COLS); // base position in cell — extend slightly beyond [0,1] so polaroids bleed off edges const baseX = -0.05 + (col + 0.5) / COLS * 1.10; const baseY = -0.04 + (row + 0.5) / ROWS * 1.08; const phi = 0.61803398875; const jx = (((i * phi * 11) % 1) - 0.5) * 0.10; const jy = (((i * phi * 13 + 0.17) % 1) - 0.5) * 0.12; const x = baseX + jx; const y = baseY + jy; // wild rotation — photos dumped from a shoebox const rot = ((i * 137.508) % 90) - 45; // -45 to +45 degrees const scale = 0.78 + ((i * 0.41) % 0.62); // 0.78 → 1.40 return { x, y, rot, scale, z: (i * 17) % 100 }; }); // ============ POLAROID ============ function Polaroid({ photo, x, y, rot, scale, z, gridMode }) { const left = gridMode === 'grid' ? `${(x * 100)}%` : `${(x * 100)}%`; const top = gridMode === 'grid' ? `${(y * 100)}%` : `${(y * 100)}%`; const rotation = gridMode === 'grid' ? 0 : rot; return (
{photo.hand} {photo.caption}
); } // ============ HERO ============ function Hero({ variant, onCTAClick }) { // variants: scatter (default), grid, ticker // Shuffle the photo deck once per mount. SCATTER is deterministic // (jitter is a function of cell index), so the layout stays stable // within a page load, but each refresh gets a new photo→cell // assignment. This also spreads out any picsum seed collisions // where two different seeds happen to return the same image. const photos = useMemo(() => { const arr = PHOTOS.slice(); for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }, []); return (
{photos.map((p, i) => ( ))}
The only app for living more

One life.
A thousand yolos.

Keep a list. Make them happen. Brag a little.
Read other people’s lists and steal the good ideas.

How it works
); } // ============ HOW IT WORKS ============ function HowItWorks() { const steps = [ { n: '01', title: 'Make a list.', body: 'Anything you want to do before you don\u2019t. A weekend. A decade. The next 80 years.', example: 'Surf in Sayulita · Read all of Calvino · Sleep in a yurt', }, { n: '02', title: 'Plan it. Or don\u2019t.', body: 'Tap any yolo to see flights, stays, and people doing it this month. Or just sit with the list until you\u2019re ready.', example: 'Plan · Stay · Bring · When', }, { n: '03', title: 'Cross it off. Loud.', body: 'Share the proof. Inspire the next person. Watch your feed fill up with their attempts at yours.', example: 'Done. Photo. Story. Inspired 12.', }, ]; return (
How it works

Three steps. Then forever.

    {steps.map(s => (
  1. {s.n}

    {s.title}

    {s.body}

    {s.example}
    2. ))}
); } // ============ FEATURE STRIP ============ function FeatureStrip() { const features = [ { kw: 'Lists', body: 'Public, private, or shared with one friend.' }, { kw: 'Plan', body: 'Flights, stays, gear — without leaving the yolo.' }, { kw: 'Inspired-by', body: 'Steal lovingly. Credit automatically.' }, { kw: 'Proof', body: 'Photo, story, location. Or a single word.' }, { kw: 'Maps', body: 'Where you\u2019ve been. Where you\u2019re going next.' }, { kw: 'Quiet mode', body: 'Some yolos aren\u2019t for the timeline.' }, ]; return (
{features.map(f => (
{f.kw}
{f.body}
))}
); } // ============ PULLQUOTE ============ function Pullquote() { return (
“
I used to keep a list in the Notes app. Eight years. Twelve items. I yolo’d thirty‑four things this year.
— a beta tester who didn’t want to be named
); } // ============ DOWNLOAD ============ function Download({ onSubmit, submitted }) { const [email, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [method, setMethod] = useState('email'); const submit = (e) => { e.preventDefault(); onSubmit({ email, phone, method }); }; return (
Get the app

It’s free.
The yolos cost whatever they cost.

iOS and Android. Send yourself a download link, or grab it from the store.

Download on App Store
Get it on Google Play
Or, send me a link.
{method === 'email' ? ( setEmail(e.target.value)} placeholder="you@somewhere.com" className="dl-input" /> ) : ( setPhone(e.target.value)} placeholder="+1 (555) 000‑0000" className="dl-input" /> )}
One link. No marketing emails. We mean it.
); } // ============ FOOTER ============ function Footer() { return ( ); } // ============ NAV ============ function Nav({ onDownloadClick }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 80); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return (
yolo.
); } // ============ APP ROOT ============ function App() { const tweaksDefaults = window.__YOLO_TWEAKS || { heroVariant: 'scatter' }; const [tweaks] = useState(tweaksDefaults); const [submitted, setSubmitted] = useState(false); const goToDownload = () => { document.getElementById('download')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const onFormSubmit = (data) => { // TODO(send-link): POST to /v1/notify/send-link once endpoint lands. // For now the form is a no-op stub; "Sent" is purely a UI confirmation. setSubmitted(true); setTimeout(() => setSubmitted(false), 4000); }; return (
); } ReactDOM.createRoot(document.getElementById('root')).render();