Repository navigation
Conversation
…nd at a scroll rate An Outline marker card on the live previews page: today's marker animates top and height, the proposal transform only, with a pace switch (1.7 s reading pace, 0.25 s scroll rate) that shows why a scroll-linked marker must stay off layout. The card notes that keeping the marker's velocity through an interrupted move (animator retargeting) lands with the public useAnimator. OutlineMarkerRig takes the interval; the preview plan's Outline row says so. Sandbox only, public APIs only. Co-authored-by: Ernest <5867373+ernestt@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
AI review status for this pull request.
|
PR Analysis Report📚 Storybook Preview🧪 Sandbox PreviewNo new or modified components detected. Bundle Size SummaryNo component packages changed. Accessibility AuditStatus: No accessibility violations detected. Visual Regression55 of 502 shot(s) changed. A change here is a question, not a failure: check whether the after is the
and 35 more. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
…so it shows The marker read --color-brand, which the sandbox never defines, so both markers were transparent. It now reads Astryx's --color-accent. Co-authored-by: Ernest <5867373+ernestt@users.noreply.github.com>
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
This sandbox preview needs an engineering-owner decision and two fixes before it can be approved. The card and the preview-plan row say animator retargeting "lands with the public useAnimator", but no spec on main provides a public useAnimator (the runtime architecture keeps the animator internal, and spec:AST-107 is still a proposal in #8600), so approval needs an engineering owner to identify the governing spec for that announcement or to accept it now by commenting /approve-spec <full head SHA> on this pull request (the author may do so if they are an engineering owner); otherwise the sentence should wait until that spec lands.
- Scroll rate asks for 250 ms, but
useLoopfloors every period at 700 ms (LabPrimitives.tsx:606), so the marker steps every 0.7 s and its automatic moves never interrupt one another at 1×. - The outline items are inline buttons that share rows, so the marker stays still between items on the same row (2 of every 6 steps in the card); stacking them (
display: 'block') lets it follow each item.
[Automated review]
| */ | ||
| function OutlinePreview() { | ||
| const [pace, setPace] = useState<'reading' | 'scroll'>('reading'); | ||
| const intervalMs = pace === 'reading' ? 1700 : 250; |
There was a problem hiding this comment.
250 never reaches the browser: useLoop schedules Math.max(700, periodMs) (LabPrimitives.tsx:606), so Scroll rate steps every 0.7 s (690–700 ms between moves in Chromium). With a 0.31 s move, the automatic steps then never interrupt one another at 1×. An optional floor on useLoop (default 700) that this card lowers, or a label giving the rate it actually runs at, would fix it.
| { | ||
| tone: 'before', | ||
| label: 'Today — top and height', | ||
| content: <OutlineMarkerRig mode="before" intervalMs={intervalMs} />, |
There was a problem hiding this comment.
The rig's items are inline buttons (sx.outlineItem in LabDemos.tsx sets no display), so in these panes "Semantic tokens" shares a row with "The rubric" and "Library compatibility" with "Risks". The marker stays put between them, 2 of every 6 steps. Stacking the items (display: 'block', width: '100%', textAlign: 'start') lets it follow each item.
| starts mid-slide begins from where the marker is. Keeping its velocity | ||
| through an interrupted move (animator retargeting) lands with the | ||
| public useAnimator. |
There was a problem hiding this comment.
No spec on main provides a public useAnimator: architecture:react-component-runtime INV13 keeps the animator an internal module, and the public hook is only proposed as spec:AST-107 FR3 in #8600. An engineering owner decides whether the sandbox may announce it before that spec lands; otherwise this sentence, and the matching text in previewPlan.ts, should drop the reference.
…ne items stack, and the card claims no public animator - useLoop takes an optional floor (default 700 ms); the Outline card lowers it, so the scroll rate steps every 250 ms instead of 700. - The outline rig's items are one per row, so the marker moves on every step. - The card and the plan say velocity through an interrupted move waits for a public animator API, instead of naming an unlanded hook. Co-authored-by: Ernest <5867373+ernestt@users.noreply.github.com>
meta-cla
Bot
added
the
CLA Signed
There was a problem hiding this comment.
Looks good: in the sandbox motion lab, the Outline marker card now steps every 250 ms at Scroll rate, the stacked items keep the marker on every step, and the marker paints in the accent colour on both pages that use it. The reworded animator note matches the current runtime architecture, which keeps the animator internal with no public entry, so no spec decision is needed. No changes are needed from you.
[Automated review]
User impact
The motion lab now shows Outline's reading-position marker the way it should move, beside how it moves today, at reading pace and at the rate a fast scroll drives it. Sandbox only: Outline itself is unchanged.
topandheight, so every frame re-lays-out the whole list. On a scroll-linked page that's every scroll frame.transformonly (a 1 px marker ontranslateYandscaleY), so the list never re-lays-out. The new pace switch (1.7 s or 0.25 s) shows the difference at scroll rate.Change
previews/page.tsx: an "Outline marker" card with the pace switch.LabDemos.tsx:OutlineMarkerRigtakesintervalMs(default 1700), and its items stack one per row, so the marker moves on every step.LabPrimitives.tsx:useLooptakes an optional floor (default 700 ms); the scroll rate lowers it, so it really steps every 250 ms.previewPlan.ts: the Outline row describes the pace switch and the useAnimator note.MotionLab.module.css: the marker reads--color-accent. It read--color-brand, which the sandbox never defines, so on main both markers were transparent.No Core or Lab code changes, and there's no changeset (sandbox only).
Evidence
Real Chrome 156 (headless, FaaS), from the built sandbox (
vite buildplus prerender) at this head, 320d671.Desktop, 1280 px. Today's marker transitions
top, height(0.31 s); the proposed one transitionstransformonly (0.31 s). At the scroll rate the marker moves every 250 ms (10 moves in 2.6 s, gaps 247–253 ms), once per item.Reduce Motion, rail on Delete. Both markers move at once (0 s), and the proposed one still moves on transform.
Phone, 390 px. The same card and the marker on transform. At 390 px the lab's own section rail (on main) still takes the left of the page and squeezes every card; that's not this change.
Raw measurements: notes.json, rate.json.