▶ YT Player
MOCKUP 07 · SERVICE MODE LYRICS REDESIGN
Service Mode · Full-Screen Lyrics Spacing & Type Floor

Legible Stage & Sanctuary Lyrics: Hard Floor Font Size & Generous Spacing

Real implementation: frontend/styles.css (.sl-line, .sl-list) and frontend/index.html (#serviceMode). Eliminates unreadable 10–12px micro-text when songs have long lines. Rather than shrinking the font until the whole sentence fits on one row, this redesign enforces a hard minimum floor (min 22px on mobile) and gracefully wraps to 2 lines with balanced typography. Combined with generous breathing room (clamp(14px, 3.2vh, 40px)) and an accent-tinted glowing pill on the active sung line, musicians and vocalists can lead with effortless visual confidence.

✕ BEFORE · UNFLOORED FIT CALCULATION Cramped single-row force
Amazing grace, how sweet the sound
That saved a wretch like me
The Lord has promised good to me, His word my hope secures, He will my shield and portion be
As long as life endures
Long Line Font ~11.2px
Line Spacing Gap 4px (cramped)
Stage Stand Read Unreadable (>1m)
✓ AFTER · HARD ≥ 22PX FLOOR + 2-LINE WRAP + SPACED Legible stage typography
Amazing grace, how sweet the sound
The Lord has promised good to me,
His word my hope secures
As long as life endures
Long Line Font 28px (wrapped)
Line Spacing Gap clamp(14px, 3.2vh, 40px)
Stage Stand Read Clear at 2.5m
💡 Interactive Mockup: Tap any lyric line on the phone or projector to change the active sung line in real-time.
📱 Mobile Viewport · 390 × 844 px (iPhone Stand)
9:41
5G 􀙇 100%

Amazing Grace

Key of G · 3/4 · John Newton
Set 2 / 5
Amazing grace, how sweet the sound
↕ clamp(14px, 3.2vh, 40px) [~26px]
That saved a wretch like me
↕ clamp(14px, 3.2vh, 40px) [~26px]
I once was lost, but now I'm found
↕ clamp(14px, 3.2vh, 40px) [~26px]
The Lord has promised good to me, His word my hope secures
↳ Wraps to 2 lines · 25px (Never shrinks to 11px)
↕ clamp(14px, 3.2vh, 40px) [~26px]
'Twas grace that taught my heart to fear
02:14 AMAZING GRACE 04:30
📽 Wide 16:9 Projector Frame · Sanctuary Broadcast Output
Amazing Grace VERSE 1 / 4
1080p 60Hz
LIVE ON PROJECTOR
Amazing grace, how sweet the sound
That saved a wretch like me
I once was lost, but now I'm found
The Lord has promised good to me, His word my hope secures
'Twas grace that taught my heart to fear
Projector Target: 1920 × 1080 (16:9 Aspect) Spacing: clamp(18px, 4.2vh, 46px)
03 · Architectural Design Specifications
01

Hard Type Floor (max(22px, ...))

Replaces pure dynamic downscaling with an enforced floor. On mobile screens, lyric lines never scale below 22px (or 26px for near, 30px for active sung lines), guaranteeing stage visibility from 1.5–3 meters.

.service-lyrics .sl-line { font-size: max(22px, calc(var(--fit, 40px) * 0.48)); }
02

Two-Line Wrap Instead of Shrinking

When a hymn line contains long theological poetry, text-wrap: balance and overflow-wrap: break-word wrap it gracefully across 2 lines with tight line-height: 1.25 rather than crushing the font into micro-text.

overflow-wrap: break-word; text-wrap: balance; line-height: 1.25;
03

Generous Breathing Gap (clamp(14px, 3.2vh, 40px))

Replaces tight margins with a responsive CSS clamp. On smaller iPhone screens it ensures at least 14–26px between verse lines; on tall iPads and sanctuary projectors it expands cleanly up to 40px without crowding.

.service-lyrics .sl-list { gap: clamp(14px, 3.2vh, 40px); }
04

Accent Pill & Radiant Glow Elevation

The active sung line commands immediate focal attention through an 18% accent tint (color-mix) and a 34px radial glow box-shadow, distinguishing it unmistakably from adjacent lines.

background-color: color-mix(in srgb, var(--accent) 18%, transparent);