Find In Page Jump
In-document search with two tiers of highlight, so the match you are standing on never gets lost among the ones you are not.
The report opens with a summary.
Each summary is under a page.
Numbers are rounded to the nearest unit.
A summary sits above every chart.
Sources are listed at the end.
The summary is written last.
Nothing is published without review.
Build an in-document find bar that jumps between matches. Structure: a search bar holding the query, a "2 of 3" counter, and up/down arrow buttons; below it a fixed-height document window with overflow hidden. The highlight has TWO tiers, and this is the component: - Every match gets a soft tinted background (your accent at about 26% opacity). - The CURRENT match gets a solid accent fill with inverted text. Browsers get this right and most in-app search does not. With one tier you have to count your way back to where you were. Jumping: move the document with a y transform on a spring (stiffness ~260, damping ~30), not by setting scrollTop. A transform runs on the compositor and cannot fight the browser's own scroll anchoring. Compute the offset so the active line sits in the MIDDLE of the window rather than at the top - clamp it between 0 and (totalLines - visibleRows). Context above a match is half of what makes it findable. The arrows step through matches with modulo arithmetic so next wraps around to the first. A next button that dead-ends at the last match makes the user find the top themselves. The counter updates in the same state change as the jump, so the number and the position can never disagree. Accessibility: the counter is aria-live="polite"; each arrow has an aria-label ("Previous match" / "Next match"). Under prefers-reduced-motion, cut to the new position with no spring. Colors as tokens: paper surface, hairline border, one accent used at two strengths for the two highlight tiers. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.