zLLM
PlaygroundThe Style Engine Behind Dreamer
Play with it.
This is the agentic style system that powers Dreamer and this entire portfolio. Describe a vibe in the chat — the agent rewrites this page in real-time, right down to authoring the background shader from scratch.
How It Works
One tool call reshapes everything.
Each card below is styled by the same tokens the chat rewrites — watch the radius, shadow, blur, and typography shift as you swap presets or describe a new vibe. The text explains the pipeline the tokens just traveled through.
Schema is the API
One file (STYLE_SCHEMA) defines every token. generateToolProperties() turns it into the update_style schema the LLM calls — add a key, the agent gets access automatically. Zero manual sync.
Natural language → tokens
gpt-4o-mini reads your message, picks a preset or emits a patch + directives (mood, intensity, risk) that expand server-side. Streams narration and tokens in parallel.
Validation + clamping
Every LLM output passes validateStylePatch: hex check for colors, clamp for numbers, whitelist for enums, GLSL allowlist for shaders. Invalid tokens drop silently — no hallucination reaches the DOM.
Dual render pipeline
CSS tokens write to :root custom properties — the whole page restyles with zero React re-renders. Structural tokens flow through React state so hero layout, header, and cards can swap components.
Contrast guard
Every patch runs an HSL binary search across six text/bg pairs. Adjusts only lightness until contrast hits WCAG 4.5:1. Your hue stays exactly where you picked it — just shifts brighter or darker.
Custom shaders
When the 7 built-in shaders can't express the vibe, the agent writes raw GLSL. Server allowlist bans unsafe constructs; the client dry-compiles against the live WebGL context before swapping material.
Design Decisions
Why scene blueprints?
Individual tokens produce incoherent combos. Blueprints bundle structure + visuals that are designed to work together.
Why dual rendering?
CSS vars for visual (instant, no React). React state for structural (component tree swap). Fast + dramatic.
Why auto-generate the tool schema?
Add a token → LLM gets access. Zero manual sync between schema and API.
Why hue-preserving contrast?
HSL binary search adjusts only lightness. Your blue stays blue, just lighter or darker.