// Main App — composes everything const { useState, useEffect, useMemo } = React; // ── Feature flags — flip to true to re-enable ──────────────────────────────── const FLAGS = { caseStudy: false, // open project cards → case study modal workshops: false, // workshops & talks section tools: false, // tools section tutorials: false, // tutorials & education section clients: false, // selected clients section }; // ───────────────────────────────────────────────────────────────────────────── function App() { const [layout, setLayout] = useState("grid"); const [density, setDensity] = useState("regular"); const projects = window.PROJECTS.map((p, i) => ({ ...p, _idx: i + 1 })); const [active, setActive] = useState(() => { const hash = window.location.hash.slice(1); return hash ? (projects.find(p => p.id === hash) ?? null) : null; }); const [typeFilters, setTypeFilters] = useState(new Set()); const [techFilters, setTechFilters] = useState(new Set()); const DEFAULT_TITLE = "Function Store — Dan Molnar | TouchDesigner Artist & Developer"; const DEFAULT_DESC = "Dan Molnar is a TouchDesigner artist and developer based in Berlin, creating audiovisual installations, live performance systems, and tools for artists worldwide."; const DEFAULT_URL = "https://functionstore.xyz/"; const DEFAULT_IMG = "https://functionstore.xyz/og-image.jpg"; function setMeta(sel, attr, val) { const el = document.querySelector(sel); if (el) el.setAttribute(attr, val); } useEffect(() => { if (active) { const title = active.title + " — Function Store"; const desc = active.desc || DEFAULT_DESC; const img = active.posterUrl || DEFAULT_IMG; const url = window.location.origin + window.location.pathname + "#" + active.id; document.title = title; setMeta('meta[name="description"]', "content", desc); setMeta('meta[property="og:title"]', "content", title); setMeta('meta[property="og:description"]', "content", desc); setMeta('meta[property="og:image"]', "content", img); setMeta('meta[property="og:url"]', "content", url); setMeta('meta[name="twitter:title"]', "content", title); setMeta('meta[name="twitter:description"]', "content", desc); setMeta('meta[name="twitter:image"]', "content", img); history.pushState(null, "", "#" + active.id); } else { document.title = DEFAULT_TITLE; setMeta('meta[name="description"]', "content", DEFAULT_DESC); setMeta('meta[property="og:title"]', "content", DEFAULT_TITLE); setMeta('meta[property="og:description"]', "content", DEFAULT_DESC); setMeta('meta[property="og:image"]', "content", DEFAULT_IMG); setMeta('meta[property="og:url"]', "content", DEFAULT_URL); setMeta('meta[name="twitter:title"]', "content", "Function Store — Dan Molnar"); setMeta('meta[name="twitter:description"]', "content", "TouchDesigner artist and developer based in Berlin."); setMeta('meta[name="twitter:image"]', "content", DEFAULT_IMG); history.pushState(null, "", window.location.pathname); } }, [active]); function openProject(project) { setActive(project); } function closeProject() { setActive(null); } function toggleType(val) { if (val === "ALL") { setTypeFilters(new Set()); return; } setTypeFilters(prev => { const s = new Set(prev); s.has(val) ? s.delete(val) : s.add(val); return s; }); } function toggleTech(val) { if (val === "ALL") { setTechFilters(new Set()); return; } setTechFilters(prev => { const s = new Set(prev); s.has(val) ? s.delete(val) : s.add(val); return s; }); } const [search, setSearch] = useState(""); const [mobileMenu, setMobileMenu] = useState(false); const [filtersOpen, setFiltersOpen] = useState(false); const [listHover, setListHover] = useState(null); const [listPos, setListPos] = useState({ x: 0, y: 0 }); // Apply fixed theme/typography + reactive density to root useEffect(() => { document.documentElement.setAttribute("data-theme", "warm-dark"); document.documentElement.setAttribute("data-type", "mono-display"); document.documentElement.setAttribute("data-density", density); }, [density]); const types = useMemo(() => ["ALL", ...new Set(projects.flatMap(p => p.type))], [projects]); const techs = useMemo(() => ["ALL", ...new Set(projects.flatMap(p => p.tags))], [projects]); const filtered = projects.filter(p => { if (typeFilters.size > 0 && !p.type.some(t => typeFilters.has(t))) return false; if (techFilters.size > 0 && !p.tags.some(tag => techFilters.has(tag))) return false; if (search) { const q = search.toLowerCase(); const hay = (p.title + " " + (p.client || "") + " " + p.tags.join(" ")).toLowerCase(); if (!hay.includes(q)) return false; } return true; }); return ( <> {mobileMenu && (
Work About {FLAGS.tutorials && Tutorials} {FLAGS.workshops && Workshops} {FLAGS.tools && Tools} Contact DEREAL Studio ↗
)}
◎ WORK IN PROGRESS

This site is under active construction. Project archive is incomplete and some features are disabled.

{(function() { var activeCount = typeFilters.size + techFilters.size; var activeChips = [...typeFilters, ...techFilters]; return ( ); })()} {filtersOpen && ( <>
{types.map(t => ( ))}
{techs.map(t => ( ))}
)}
{[{ v: "grid", g: "⊞" }, { v: "list", g: "☰" }, { v: "scroll", g: "▤" }].map(function(opt) { return ( ); })}
{[{ v: "sparse", n: 2 }, { v: "regular", n: 3 }, { v: "dense", n: 4 }].map(function(opt) { return ( ); })}
› setSearch(e.target.value)} /> {filtered.length} / {projects.length}
{layout === "grid" && (
{filtered.map(p => ( ))}
)} {layout === "list" && (
setListPos({ x: e.clientX, y: e.clientY })} onMouseLeave={() => setListHover(null)} > {filtered.map(p => (
setListHover(p)} onMouseLeave={() => setListHover(null)}>
))} {listHover && }
)} {layout === "scroll" && (
{filtered.map(p => (
))}
)}
{FLAGS.tutorials && } {FLAGS.workshops && } {FLAGS.tools && } {FLAGS.clients && }
© 2026 DAN MOLNAR / FUNCTION STORE · BERLIN
BUILT IN TOUCHDESIGNER (NO IT WASN'T)
{FLAGS.caseStudy && active && } ); } ReactDOM.createRoot(document.getElementById("root")).render();