Separating the play zone from the read zone
What was tried
Took apart OpenAI's GPT-6 Astra launch page and found its star field is one layer spanning all 32,783px while only 1,908px is actually draggable — the rest looks identical but cannot be touched, and drifts over the numbers in the benchmark tables. So I built a dot field that declares where it is playable, with a toggle to compare both treatments side by side.
| Property | Value |
|---|---|
| Dots in the field | 140 |
| Play zone · pointer-events | auto |
| Read zone · pointer-events | none |
| Original page: actually draggable area | 1,908 / 32,783 px |
| Share of the page | 5.8% |
What was learned
Layering worked better than expected — remove the opaque plate and values like 5.8% and 1,908 / 32,783 px immediately become harder to parse. The problem was never 'there is decoration', it is that the playable and unplayable thing share one appearance.
What fell short
Judged by an audience of one, with no outside test of whether the zone label actually helps; on warm paper the contrast is lower than white-on-black, so the cursor-repel effect reads more faintly than the original; and the play zone sets touch-action to none so it can be dragged, which costs page scrolling for a finger that lands inside it — still unresolved.
Line of experiments
- LAB.02 Separating the play zone from the read zone (this entry)
- LAB.03 The chapter globe — ten forms before the final one
- LAB.04 The chapter globe, built — round one on the real surfaces
- LAB.05 The chapter viewport — a Blender-style 3D window around a cloud of real chapters