State 3 · Plastic

This is the state most easily misunderstood. State 3 is not “pretty web with AI”. It is not random layout generation. It is not silent personalisation in the Spotify Daylist style. It is something more modest and, at the same time, more demanding: a system that can regenerate at runtime within strict and published policies, and that declares when it does so.

The thesis

A plastic component, like a plastic material, keeps its matter (tokens, contracts, semantic structure) and adopts distinct shapes according to context. In an agentic system with State 3 active, the context may be reader’s local time, colour scheme preference, reduced motion, device type, reading speed, language, geographic region of the case study, available bandwidth, posture of the foldable device.

With all that information, and only that (no PII, no profiling, no cross-site tracking), an agent regenerates a variant of the component that improves the experience for that specific reader. And declares it.

Component life cycle

Diagrama axonométrico del ciclo de vida del componente (cinco estados, 01 a 05). Visible en pantalla ancha.

Five states. The first four are in production today (in mature systems; not on this site yet). The fifth, the plastic one, is what this page partially demonstrates with deterministic rules.

Five executed demos

What follows does not describe State 3. It executes it with published rules. No demo uses model, agent, or external telemetry. They are pure functions of local time, scroll, time zone and browser history.

Demo one · Temporal chromatism

The red accent you are seeing right now on this page depends on the reader’s local time. From six to eleven, it drops 10% saturation (sunrise). From eleven to seventeen, it is the canonical red. From seventeen to twenty-one, it drops 12% (dusk). From twenty-one to six, reduced saturation 18% (night).

Demo two · Editorial density

This page detects reading speed. If after twenty seconds you have not scrolled, expanded marginalia appear. If you have scrolled fast (more than 2000px in ten seconds), TL;DRs appear every two paragraphs.

The marginalia and the TL;DRs are written by hand in the MDX. The mutation is what is shown, not what is generated. This distinction is critical: there is no invented text; there is selected text.

Demo three · Geographic example

The cases cited below change according to your time zone. You can read a qualitative list of public design systems such as Polaris (Shopify), Carbon (IBM), Lightning (Salesforce) whose public repositories contain elements compatible with what we call here State 2 (tokens in JSON, contract tests, exposure via documented API). The list is inevitably partial; the exercise is illustrative.

Detection uses Intl.DateTimeFormat().resolvedOptions().timeZone, which the browser provides without cookies. If the time zone does not fit a known region, it falls back to the global listing.

Demo four · Reading path

At the bottom of this page, if you have visited others before, the suggested next step will appear. The suggestion comes from a published order (manifesto → state 1 → state 2 → state 3 → colophon) and from what is already registered in your localStorage.

Demo five · Mutation counter

The sticky counter at the top of this page counts in real time how many of the four previous deterministic rules have been applied for you. Clicking expands it: shows each mutation with its current state, the button to deactivate it individually, and the button to deactivate them all at once. Deactivations persist in localStorage.

Why declaring the mutation is essential

There is a central philosophical argument. Silent regeneration is a form of manipulation even when it is well-intended. The reader deserves to know when the text they are reading was generated, rewritten or adjusted by an agent. When an online shop changes prices dynamically without saying so, we are outraged. When a news site changes headlines via A/B without labelling it, we are uncomfortable. The principle is the same: the capacity to mutate carries the duty to declare.

That is why every regenerated section of State 3 carries visibly an <aside> with the rule name, the current state, and the button to deactivate it. Nothing is hidden. Regeneration becomes part of the work: the mutant form and the canonical form coexist in the same document, and the reader knows which they are seeing and why.

State 3 deontology

Seven non-negotiable rules. The first six are also in /en/colophon#deontologia, as part of the editorial method. The seventh is specific to this state.

1. Never modifies the central thesis of the site. The three states are fixed. The agent may vary tone, density, examples. Not doctrine.
2. Never invents quotes, sources, URLs, advisory names. Only the audited corpus.
3. Never personalises reader identity beyond non-PII signals. Time, device, preferences, scroll. Never email, never profiling.
4. Never hides that it is the agent who regenerates. Each variant carries a visible marker and timestamp.
5. Respects Do-Not-Track by deactivating all non-essential telemetry.
6. Automatic rollback if the composition fails OPA policies, contract tests or accessibility. Never publishes anything broken.
7. All mutation in Phase 1 is deterministic and declared. No plasticity rule on this page uses LLM, agent or telemetry. They are pure functions of local time, scroll speed, time zone and browser history. Their source code is auditable in the repo. When agents arrive in Phase 3, this page will publish an explicit notice with version bump.

The seventh rule is the one that separates a serious State 3 from a techno-solutionist copy. It distinguishes plasticity by policy from magic by model.

Technical architecture

What exists today

• Semantic HTML and progressive enhancement.
• CSS with oklch() (Baseline cross-browser since May 2023).
• Intl.DateTimeFormat (ECMAScript 2012).
• localStorage (Web Storage API, 2009).
• IntersectionObserver (Chrome 51 in 2016, cross-browser stable since Safari 12.1 in March 2019).
• No heavy client dependency. No framework. No AI build step.

What will come in Phase 3

• Astro endpoint /api/chat with Claude Sonnet (or successor). Strong restriction prompts.
• Own MCP server at mcp.tresestados.design. Exposes list_tokens, get_component_contract, search_corpus, validate_composition, render_preview.
• pgvector in Supabase for RAG on the MDX corpus. See technique at Nº 007 (in Spanish).
• OPA in WASM at the edge evaluating every proposed composition.
• Preview in <iframe sandbox> with strict CSP and Shadow DOM.

None of this is active today. The full State 3 is the declared ambition, not the present realisation. Phase 1 already demonstrates that part of State 3 (plasticity by policy, without agent) is possible with deterministic tools published in 1995 (CSS), 2012 (Intl) and 2023 (oklch()).

Matter and form

A plastic component keeps the matter (tokens, contracts, schema, semantic aria) and adopts distinct shapes according to reading context. What changes is the size, the density, the animation, the geographic example, the tone of the microcopy. What does not change is the contract. The reader sees the form; the system protects the matter. When mutation breaks contract, the system falls back to the canonical and declares it. That is State 3.

What State 3 does not justify

It does not justify generation without corpus. It does not justify agents with unlimited access. It does not justify aggressive personalisation. It does not justify hiding what is human and what is generated. Above all, it does not justify claiming State 3 when what you have is State 1 with an LLM wrapper on top.

Honest State 3 is earned. It comes after a solid State 1 and a governable State 2. Skipping them is a shortcut that the reader pays.

What is coming

This site will grow through phases toward its full State 3. In 2027, when the Compendium has thirty or forty fiches and the MCP is public, the first real regeneration on /en/states/state-3 and /en/manifesto will be activated. It will be visible, labelled, reversible. The five demos on this page will become six or seven when the agent enters the system. But the principle of declaration will not change.