Art Direction Daily
NO. 026 / Tuesday, June 2, 2026 / ≈ 5 min
Feature status · agentic web design

What changes when Codex ships from inside AWS?

OpenAI just put its Codex coding agent on AWS, inside the cloud where many teams already run their stacks. The browser is quietly absorbing JavaScript too, and the agents keep eating the rest of the work. A link-forward briefing.

Baseline 2026 Newly available Platform coverage86%
Support matrix · this week SupportedPartialMissing
An abstract feature-support matrix: rows of green check cells, amber partial cells, and red missing cells under neutral browser column headers, with two usage-share bars beneath.

About this issue

Feature description
Feature Support Matrix
A Baseline status board: a caniuse-style matrix of features and browsers, status cells, usage-share bars, and filter chips.

A support matrix is the table web designers check before they ship: features run down the rows, browsers across the columns, and each cell says supported, partial, or missing. Sites like caniuse and the web.dev Baseline widget made it the standard way to answer one question fast: can I use this yet? Today the issue is that board. Each thing that shipped is a feature with a status pill, a support strip, and a usage bar, and the news is what just turned green.

01

Newly available

Tooling

What turned green this week, in the model layer and in the browser.

Newly available
infra

Codex moves onto AWS

OpenAI made its frontier models and the Codex coding agent available on AWS, putting the same build-and-ship agent inside the cloud where many teams already run their stacks and their data.

½½
openai.com
Newly available
since CSS scroll timelines

Parallax with no scroll listener

A widely shared write-up rebuilds the classic parallax as a few declarative lines of CSS using scroll-driven animation timelines, replacing the per-frame JavaScript scroll handler with a single utility class that runs off the main thread.

½
dan-webnotes.com
Baseline 2026
since this year

More CSS reaches baseline

The wider pattern behind that demo: anchor positioning, @scope, conditional if(), and a typed attr() are landing as baseline features this year, which means layout and state work that once needed a wrapper library is now plain stylesheet code.

½
blog.logrocket.com
Shipping
model layer

An agent that finds the bugs first

Anthropic expanded Project Glasswing to 150 more organizations after its frontier model surfaced more than ten thousand high or critical vulnerabilities across early partners, and says Mythos-class models are coming to all customers in the coming weeks.

½½
anthropic.com
02

How to use it

Technique

Reach for the platform before the dependency, and let the heavy work leave your JavaScript.

Off main thread
scroll-driven

Declare a timeline, attach an animation

The reusable move is to name a scroll or view timeline and bind an animation to it, so motion is tied to scroll position by the browser instead of recalculated every frame. MDN documents the timeline properties and the small set of keywords you need.

½
developer.mozilla.org
Baseline
check first

Audit support before you add a library

Before pulling in a package for layout, scoping, or positioning, check the matrix: several of 2026's core CSS features now cover the cases those libraries used to handle, so the platform answer is often smaller, faster, and one less thing to maintain.

½
nerdy.dev
03

Borrow this

Workflow

A short routine for a week where both the browser and the agents are doing more of the build: write the rules once, let each layer do its own work, and keep a human on the diff.

Write

One rules file

Commit a single agent-instructions file to the repo so every tool follows the same conventions. Stanford's CS336 now ships a CLAUDE.md to students, a sign the practice is becoming standard.

github.com
Prefer

The platform first

Let CSS handle scroll, scope, and positioning before you add JavaScript or a dependency. The smallest correct answer is usually a stylesheet, not a package, and it ages better.

w3.org
Gate

A human on the diff

When an agent writes the code, keep a person on the merge, especially where auth and data meet. The same models that find ten thousand flaws can introduce them too.

anthropic.com
04

Recreate this look

Prompt Lab

Hand this to an AI design or build tool to rebuild today's Baseline support-matrix idiom.

PromptSupport matrix · Baseline board
Design a browser feature-support board, in the spirit of caniuse and
the web.dev Baseline widget, not a marketing landing page.

Layout:
- A top toolbar: left wordmark, a faux search field reading
  "search features", and a small right nav.
- A row of filter chips under the toolbar, with one active chip.
- A full-width feature-header band: an eyebrow label, a large
  headline, a one or two sentence deck, and a status row of pills
  (Baseline, Newly available) plus a horizontal usage-share bar.
- A full-width support-matrix card as the hero: a grid of status
  cells (supported, partial, missing) under neutral browser column
  headers, with a legend. No big photo hero.
- Content sections as table rows, not stacked hero cards: each row is
  a left status column (a pill plus a "since" tag), a middle column
  with a short heading and one or two sentences, and a right support
  strip of five small status squares, a usage bar, and a source
  domain.

Palette: cool spec paper (#EEF2F0), deep green-slate ink (#16211C),
one green accent (#1F8A5B) for links and the supported state, amber
(#B7791A) for partial, red (#BE3A34) for missing. Status colors are
functional only; no gradients on type, no glow, no neon.

Type: a clean grotesk (Sora) for headings, a highly readable
humanist sans (Public Sans) for body and UI, a reading italic (Lora)
for one editorial line, and a monospace (IBM Plex Mono) for labels,
status pills, and the legend.

Readability: body at least 18px, line height 1.6 or more, no
justified text, WCAG AA contrast, text never on a border. In the
matrix image use colored cells, checks, and bars only; no fake
readable text.

Why it works: it names a real web archetype, fixes the toolbar, the header band, and the row grammar, then translates the matrix into concrete components, palette, type, and accessibility rules, so a tool returns this issue's status-board look rather than a vague "make it look like a dashboard."

05

Bottom line

Field note

The platform and the agents are both absorbing yesterday's hand-written code: the browser took the scroll listener, the model took the boilerplate. The durable skill is knowing what to hand to the browser, what to hand to the agent, and what still needs you.

Supported
Less code you own is the upgrade
Borrow this
Check the support matrix before you reach for a dependency.
06

References

8 sources
01
CSS-native parallax effect — a parallax built entirely in CSS with scroll-driven animations, no scroll listeners.
dan-webnotes.com
02
Scroll-driven animation timelines — MDN on naming scroll and view timelines and binding animations to them.
developer.mozilla.org
03
CSS in 2026 — the new features reshaping frontend: anchor positioning, @scope, if(), and typed attr().
blog.logrocket.com
04
CSS features every front-end developer should know in 2026 — what the platform now covers without a library.
nerdy.dev
05
CSS Snapshot 2026 — the W3C reference for the CSS specifications considered stable this year.
w3.org
06
Expanding Project Glasswing — the cyber program reaches 150 more organizations after finding 10,000+ critical flaws.
anthropic.com
07
OpenAI frontier models and Codex on AWS — the coding agent and models arrive in AWS.
openai.com
08
CS336 agent guidelines — a Stanford course ships a CLAUDE.md so student agents follow the same rules.
github.com

A field experiment from the team behind Beaver Builder.