> ## Documentation Index
> Fetch the complete documentation index at: https://developers.reflection.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Gallery
> Demos built with Beam
export const Gallery = () => {
const ITEMS = [{
"id": "escape-room",
"category": "Agent workflows",
"title": "Escape room",
"authors": "Lorenzo Balderrama Porras, CoreWeave",
"description": "Beam writes and debugs Python to solve a multi-step escape room in CoreWeave Sandbox. The 3D room visualizes the run.",
"gif": "/images/gallery/escape-room.gif"
}, {
"id": "fine-tuning-in-opencode",
"category": "Agent workflows",
"title": "Fine-tuning in OpenCode",
"description": "Beam works in OpenCode to create a Text2SQL fine-tuning notebook for the smallest Gemma 4 model using Unsloth. It researches the model, training tools and available data, then writes the notebook for the user to run.",
"gif": "/images/gallery/fine-tuning-in-opencode.gif"
}, {
"id": "land-or-water",
"category": "Data and research",
"title": "Land or water",
"description": "Beam classifies 16,200 latitude and longitude points as land or water, without maps, search or geographic reference data during prediction. A separate land mask is used afterward to check the results and visualize classification errors.",
"gif": "/images/gallery/land-or-water.gif"
}, {
"id": "fractal-explorer",
"category": "Apps and visuals",
"title": "Fractal explorer",
"description": "Beam builds an interactive fractal explorer with a guided tour into Seahorse Valley. The GIF shows the tour in the live application. This version was selected after feedback and multiple runs.",
"gif": "/images/gallery/fractal-explorer.gif"
}, {
"id": "mobile-snake-game",
"category": "Games",
"title": "Mobile Snake game",
"authors": "adam roman (@adamisnotroman)",
"description": "Beam, shown as Catjam, builds a mobile browser Snake game in OpenCode. The recording compares Catjam and Big Pickle using the same prompt. The creator preferred Catjam's aesthetic.",
"source": ["Original X post", "https://x.com/adamisnotroman/status/2110139408460480525"],
"gif": "/images/gallery/mobile-snake-game.gif"
}, {
"id": "eda-in-pi",
"category": "Data and research",
"title": "EDA in Pi",
"description": "Beam works in Pi to find the latest dataset in the TidyTuesday repository and build an exploratory data analysis notebook. The notebook examines the data and presents the findings through charts.",
"gif": "/images/gallery/eda-in-pi.gif"
}, {
"id": "3d-space-game",
"category": "Games",
"title": "3D space game",
"description": "Beam builds a 3D astronaut game in p5.js. The player steers through falling asteroids and fires a green beam to clear obstacles. The design was refined through follow-up prompts.",
"gif": "/images/gallery/3d-space-game.gif"
}, {
"id": "game-studio",
"category": "Games",
"title": "Game studio",
"description": "Beam builds and revises ten playable browser games through Mirror, including an arena shooter, rhythm game, tower defense and farming simulation.",
"gif": "/images/gallery/game-studio.gif"
}, {
"id": "nyc-metro-live-map",
"category": "Apps and visuals",
"title": "NYC Metro live map",
"description": "Beam builds a live subway map from public MTA data. It researches feed formats and station geometry, then builds the frontend and backend to estimate train positions between stations and show approaching trains.",
"gif": "/images/gallery/nyc-metro-live-map.gif"
}, {
"id": "seven-game-testing",
"category": "Games",
"title": "Seven-game testing video",
"authors": "Wayne Lowry (@wikiwayne)",
"description": "Beam, shown as Missingno through Hermes, works through seven game-building tasks. Four pass on the first attempt, and all seven pass after retries. The recording shows the results across the different tasks.",
"source": ["Original X post", "https://x.com/wikiwayne/status/2109090570211656044"],
"gif": "/images/gallery/seven-game-testing.gif"
}, {
"id": "voxel-pagoda-garden",
"category": "Apps and visuals",
"title": "Voxel pagoda garden",
"authors": "Wësche (@WescheNex1q)",
"description": "Beam, shown as Missingno in the recording, creates a voxel pagoda garden with cherry trees and pines from a prompt for a single HTML page. The video compares four models; this version needed a one-line fix.",
"source": ["Original X post", "https://x.com/WescheNex1q/status/2110028285237485776"],
"gif": "/images/gallery/voxel-pagoda-garden.gif"
}, {
"id": "korean-translation-and-survey",
"category": "Data and research",
"title": "Korean translation and survey",
"description": "A synthetic-panel app uses Korean demographic personas from NVIDIA's Nemotron dataset. Beam translates English questions into Korean, interviews sampled personas, and translates and summarizes their responses in English.",
"gif": "/images/gallery/korean-translation-and-survey.gif"
}, {
"id": "groovebox",
"category": "Apps and visuals",
"title": "Groovebox",
"description": "Beam builds a browser music sequencer with pattern presets, a moving playhead, spectrum visualization and a filter cutoff control. The GIF shows the interface in use; the live app includes audio.",
"gif": "/images/gallery/groovebox.gif"
}, {
"id": "pixel-platformer-comparison",
"category": "Games",
"title": "Pixel platformer comparison",
"authors": "J A Z I I (@notjazii)",
"description": "J A Z I I compares pixel platform games made with Missingno and CatJam, both stealth names of Beam. The side-by-side recording shows both games running, with jumping, coin collection and score counters.",
"source": ["Original X post", "https://x.com/notjazii/status/2110324422183940575"],
"gif": "/images/gallery/pixel-platformer-comparison.gif"
}];
const CATEGORIES = ["All", "Agent workflows", "Apps and visuals", "Data and research", "Games"];
const [top, setTop] = useState(0);
const [filter, setFilter] = useState("All");
const [openId, setOpenId] = useState(null);
const open = id => {
setOpenId(id);
try {
window.history.replaceState(null, "", "#" + id);
} catch (e) {}
};
const close = () => {
setOpenId(null);
try {
window.history.replaceState(null, "", window.location.pathname + window.location.search);
} catch (e) {}
};
useEffect(() => {
const id = window.location.hash.slice(1);
if (ITEMS.some(d => d.id === id)) setOpenId(id);
}, []);
useEffect(() => {
if (!openId) return undefined;
const onKey = e => {
if (e.key === "Escape") close();
};
const measure = () => {
const bar = document.getElementById("navbar");
setTop(bar ? Math.max(0, Math.round(bar.getBoundingClientRect().bottom)) : 0);
};
measure();
window.addEventListener("resize", measure);
document.addEventListener("keydown", onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.removeEventListener("keydown", onKey);
window.removeEventListener("resize", measure);
document.body.style.overflow = prev;
};
}, [openId]);
const item = ITEMS.find(d => d.id === openId);
return