projects/studiolo

studiolo.svetim.fm

Learn about the studiolo

This site is the proof of its own thesis. A GPU-accelerated physarum simulation as the living background. A desktop windowing system with draggable panels and persistent state. An AI chatbot powered by Cloudflare Workers. Interactive blog visualizations. All built in a single 23-hour session by one developer and an AI pair — 35 commits, 80 files, 11,139 lines of code.

Coming soon

What is a studiolo?

A studiolo was a small private room in Renaissance Italian homes — a personal study where scholars, artists, and thinkers kept their instruments, manuscripts, and curiosities. It wasn't a showroom. It was a workspace for synthesis: a place where ideas from different domains could collide. This site is that room, digitized. A space where projects, writing, and thinking coexist — not as a portfolio to be consumed, but as a working environment to be explored.

What is physarum?

The living background you see is a simulation of Physarum polycephalum — a slime mold that solves mazes, optimizes transport networks, and finds shortest paths without a brain. It works through emergence: millions of simple agents following local chemical trails, collectively producing global intelligence. Each project node on the homepage is a food source. The trails you see are the organism reaching toward them. It's not decoration — it's a metaphor for how simple rules and clear constraints produce complex, adaptive behavior.

Why this exists

Most portfolios are templates. This one is an argument — that systems-first thinking and AI augmentation let a single person ship production-quality interactive software at a pace that used to require a team. Every component follows the same architectural patterns: Astro files, scoped styles, CSS custom properties, IntersectionObserver triggers. The consistency is what made the velocity possible.

The sprint

35 commits across 23 hours. Six work blocks, one developer, ~78 story points.

3am 4am 5am 3pm 5pm 11pm 1am 18 foundation 12 content 26 ui + physics 4 ··· 6 safari fix ··· 12 feed + chatbot ~78 pts 23 hrs
35 commits across 23 hours. each dot is a commit. each block is a sprint.

What's in it

  • GPU-accelerated physarum simulation — WebGL2 compute shaders with automatic CPU fallback, 12 real-time parameters, 4 respawn patterns
  • Desktop windowing system — draggable, z-ordered panels with persistent state across sessions
  • AI chatbot (aleks.ai) — Cloudflare Workers AI streaming SSE with structured context injection from .well-known/ai-context.json
  • Interactive blog visualizations — scroll-triggered SVG animations built as Astro components, imported into MDX posts
  • Glass lens distortion — post-processing shader that warps the physarum trail behind UI panels
  • Cross-browser WebGL recovery — Safari 18 context loss detection and restoration during View Transitions
  • Responsive across desktop, tablet (iPad), and mobile — single-screen mode on tablet, stacked on mobile

What shipped

11,139 lines across 80 files. Distribution by feature:

35 commits · 23 hrs · 11,139 loc desktop shell 5,553 ai chatbot 2,088 physarum gpu 1,824 media + lightbox 563 interactive mode 517 safari webgl fix 125 seo + perf 70
23 hours. one developer. 11,139 insertions.

Pattern compression

Every component follows the same shape. When patterns are consistent, decisions compress — and compressed decisions are what AI executes best.

layout? animation? style? state? error? perf? a11y? compress component css vars observer
patterns compress decisions. decisions compress time.

Architecture

No framework runtime — no React, no Vue, no hydration cost. Astro compiles pages to static HTML. Interactive features (physarum simulation, desktop shell, chat client) ship as scoped vanilla JS islands.

authored: Pages (.astro), Blog (MDX + components), Project pages (one template, JSON data). Static HTML (no framework runtime, no hydration). client islands, vanilla TS: Physarum (WebGL2 GPU sim + glass lens), Desktop shell (drag · z-order · focus), Chat client (SSE to Workers AI, Llama 3.2 3B). GitHub Pages (studiolo.svetim.fm)

No framework runtime. Astro compiles to static HTML. Simulation, desktop shell, and chat ship as vanilla JS islands.

Key decisions

  1. Astro SSG over Next.js/SvelteKit

    no framework runtime, no hydration cost. Interactive parts are scoped vanilla JS islands, not a framework

  2. WebGL2 compute-via-texture for physarum

    no WebGPU requirement, runs on Safari and older GPUs with automatic CPU fallback

  3. Desktop metaphor over scroll page

    the windowing system makes content feel explorable rather than consumable

  4. Cloudflare Workers AI over browser-local LLM

    cross-platform, no 16GB RAM requirement, free tier fits a personal site

  5. MDX blog posts with Astro component imports

    visualizations are code, not images. They animate, respond to scroll, and match the site's design system

  6. CSS custom properties as the design system

    one set of color/font tokens powers everything from physarum trails to blog captions