Projects › BibleWeb › Bible Reading › Verse jump + highlight from navigation
Planned

Verse jump + highlight from navigation

Area: Bible Reading Milestone: v1

Context

Problem: When a user clicks a search result, cross-reference, or theme verse, they're taken to the right chapter — but have to visually scan to find the specific verse. On a long chapter, this wastes time and causes frustration.

Solution: When navigating to a specific verse (from search, cross-refs, or themes), automatically scroll to that verse and briefly highlight it with a fade-out animation so the user's eye is immediately drawn to it.

Not included: Persistent highlighting or permanent verse markers. The highlight fades out after 2.5 seconds.

Functional

When the user navigates to a specific verse (e.g., from a search result linking to Genesis 1:3), the page scrolls directly to that verse and applies a brief amber glow that fades out over 2.5 seconds.

User flow:

  1. User clicks a search result / cross-reference / theme verse
  2. The reader page opens at the correct chapter
  3. The page auto-scrolls to the target verse
  4. The target verse briefly glows amber, then fades to transparent over 2.5s
  5. User can immediately see and read the target verse

Edge cases:

  • If the verse is already in view, still apply the highlight (confirmation)
  • Multiple rapid navigations: cancel previous highlight, apply new one
  • If the verse doesn't exist in the chapter, no scroll or highlight

UX & Design

Scroll behavior: Smooth scroll to bring the verse into the center of the viewport.

Highlight animation:

  • Start: amber background glow (matching Jesus words gold)
  • End: fully transparent
  • Duration: 2.5 seconds
  • Easing: ease-out (fast fade at start, slow at end)

TODO: Choose exact amber color — consider #fbbf24 at 20% opacity as starting point.

Technical

Trigger: URL hash #v{verseNumber} or query param — parsed on page load.

Implementation approach:

  • After verses render, find the target verse element
  • element.scrollIntoView({ behavior: 'smooth', block: 'center' })
  • Apply CSS animation class, remove after 2500ms

Reference: BibleGame ReaderView.cs had a HighlightVerse() method with 2.5s fade-out.

Files:

  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.svelte (modify)
  • apps/web/src/lib/components/bible/VerseText.svelte (modify — add highlight class support)

Status

Current: PLANNED Milestone: v1 Priority: High — significantly improves navigation from search/cross-refs

History:

  • BibleGame had this feature in ReaderView.cs with amber→transparent fade
  • Not yet implemented in web version

Dependencies:

  • Requires: chapter reader (DONE), search results linking (DONE)
  • Blocks: nothing, but greatly improves search and cross-ref usability
← Back to Bible Reading features