function App() {
const [tweaks, setTweaksState] = useState(window.__TWEAKS);
const [tweaksVisible, setTweaksVisible] = useState(false);
const [booting, setBooting] = useState(true);
const scrollY = useScrollY();
const mouse = useMouse();
// Apply tweaks to body data-attrs
useEffect(() => {
document.body.dataset.mood = tweaks.mood;
document.body.dataset.accent = tweaks.accent;
document.body.dataset.grain = String(tweaks.grain);
document.body.dataset.cursor = String(tweaks.cursor);
if (tweaks.cursor) document.body.classList.add("cursor-custom");
else document.body.classList.remove("cursor-custom");
}, [tweaks]);
const setTweaks = (next) => {
setTweaksState(next);
window.parent?.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
};
// Edit-mode wiring
useEffect(() => {
const onMsg = (e) => {
if (e.data?.type === "__activate_edit_mode") setTweaksVisible(true);
if (e.data?.type === "__deactivate_edit_mode") setTweaksVisible(false);
};
window.addEventListener("message", onMsg);
window.parent?.postMessage({ type: "__edit_mode_available" }, "*");
return () => window.removeEventListener("message", onMsg);
}, []);
// Boot curtain (page transition in)
useEffect(() => {
const t = setTimeout(() => setBooting(false), 1400);
return () => clearTimeout(t);
}, []);
return (
<>
{tweaks.cursor && }
);
}
function BootCurtain({ visible }) {
return (
atelier—noir*
Loading — 2026
);
}
ReactDOM.createRoot(document.getElementById("root")).render();