LightUp system

The surface as a set. Motion only — case study.

Selection follows

On the page

LightUp reads the selection you make on a page — then a small button has to appear near it without stealing the highlight.

Continuity is the whole job: one surface that changes shape, instead of closing one thing and opening another.

A cursor is the only user here — watch where it has to go.

Auto vs icon

Auto

Select a phrase here. In auto mode the popup arrives on mouseup. In icon mode it waits — you have to invite it.

The highlight is yours until you spend it. That’s the whole difference.

Same highlight. The cursor is the only user.

Selection travels

Teleport

“Selection should feel continuous — not like a restyle.”

The active mode is one visual object. When it changes, it should move — not blink into a new style.

GPT-4o

Ask anything...

Travel

“Selection should feel continuous — not like a restyle.”

The active mode is one visual object. When it changes, it should move — not blink into a new style.

GPT-4o

Ask anything...

Left jumps. Right slides — same popup, one object.

Compact on hover

“Selection should feel continuous — not like a restyle.”

The active mode is one visual object. When it changes, it should move — not blink into a new style.

GPT-4o

Ask anything...

Hover grows the bar you’re already looking at.

Waiting

Explain

Forming

swap every 1800ms · blur 4px

Forming ↔ Generating every 1800ms. Blur, not a crossfade.

Word stream

Explain

tokens arrived 0/0words shown 0/0backlog 0

reveal every 125ms · network bursts into queue

8 wps · 125ms between words — slow enough to read, fast enough to feel live.

Entrance

page surface

from scale 0.1

Explain

Entrance is a product setting. Layout picks the axis; preference can veto the verb.

scale · floating · scale 0.1 → 1

Scale from 0.1: “I’m appearing here.” Replay to feel the grow.

Seating

6 candidates · first fit · else clamp to margin 8

a single surface

Explain

One surface that changes shape with intent.

Flip + clamp: try six seats, then keep it on stage.

Persist highlight

When you ask about a single surface that never leaves, the answer should still know which words started it.

Click “Open answer” — watch whether the yellow stays.

Persist on: #fff8bc stays — the answer still points at what you asked.

Honest progress

Explain

Reading page context…0%

Never crosses 85% until the network proves it.

linear 1% / 120ms · cap 85% · 100% on first token

Honest: approaches 85% and waits — never pretends to know the end.

Follow-up

Explain

The mode strip keeps one surface and grows it on intent — same idea as the Island, smaller.

Q: x 60 → 0 · A: x −60 → 0, +150ms

Ask anything...

Spring Q→A. If the new answer starts below the 40% line, the list pulls it to 16px from the top.

Focus

Article

a single surface that never leaves

Explain

The page steps back so the answer doesn’t have to shout over it.

Focus on: blur(5px) + 70% overlay — the page steps back for the answer.