Scroll Progress Lab
0%
The Bench
theme
01Telemetry BarsA
nav telemetryWireframe Boot
scan head rides the progress · re-tints per theme
Nav FX

The default: shimmering telemetry bars light left→right with a white scan head riding the read position.

armory · NavScrollFx · Wireframe Boot

02Neon EQA
nav telemetrySynthwave
scan head rides the progress · re-tints per theme
Nav FX

Mirrored neon equalizer with chromatic pink/cyan ghosts — the strip as a synth-pop spectrum analyzer.

armory · NavScrollFx · Synthwave

03Frost ShardsA-
nav telemetryGlacier
scan head rides the progress · re-tints per theme
Nav FX

Crystalline shards freeze upward as you read, each capped with an icy glint.

armory · NavScrollFx · Glacier

04Forge CoalsA-
nav telemetryForge
scan head rides the progress · re-tints per theme
Nav FX

Flickering coals with embers spitting off the lit columns — heat builds as you descend.

armory · NavScrollFx · Forge

05UV Pulse-DashesB+
nav telemetryUltraviolet
scan head rides the progress · re-tints per theme
Nav FX

Fluorescing dashes that pulse under blacklight — a steady mid-band glow strip.

armory · NavScrollFx · Ultraviolet

06Phosphor BlocksA-
nav telemetryAmber CRT
scan head rides the progress · re-tints per theme
Nav FX

Phosphor blocks behind hard scanlines with a vintage flicker — the CRT readout.

armory · NavScrollFx · Amber CRT

07Code RainA
nav telemetryMatrix
scan head rides the progress · re-tints per theme
Nav FX

Falling code-rain columns that quicken on the lit (read) side — digital descent.

armory · NavScrollFx · Matrix

08Hazard ChevronsB+
nav telemetryRed Alert
scan head rides the progress · re-tints per theme
Nav FX

Pulsing hazard chevrons with a radar sweep — battle-stations reading progress.

armory · NavScrollFx · Red Alert

09Gold TicksB+
nav telemetryGold Lux
scan head rides the progress · re-tints per theme
Nav FX

Thin gold ticks under a travelling shimmer sweep — the luxe, minimal readout.

armory · NavScrollFx · Gold Lux

10Bubbling VatsB
nav telemetryHazmat
scan head rides the progress · re-tints per theme
Nav FX

Bubbling vats with rising bubbles off the lit columns — radioactive containment.

armory · NavScrollFx · Hazmat

11Draftsman TicksB+
nav telemetryWireframe
scan head rides the progress · re-tints per theme
Nav FX

Stroke-only blueprint ticks with a white plumb-line head — pure monochrome draft.

armory · NavScrollFx · Wireframe

12Candle TapeA
nav telemetryTrading Floor
scan head rides the progress · re-tints per theme
Nav FX

Mini green/red candlesticks brighten as read, with a white last-price head — a tape readout.

armory · NavScrollFx · Trading Floor

13Order-Book LadderA
nav telemetryBlack Box
scan head rides the progress · re-tints per theme
Nav FX

Mirrored bid/ask depth ladder around a mid axis — the institutional terminal strip.

armory · NavScrollFx · Black Box

14Equity CurveA
Equity CurveP&L
Trading

A live realized-P&L equity line drawing left→right — green in profit, red if it ends underwater.

new · trading

15Depth LadderA
Depth LadderDOM
Trading

A vertical bid/ask depth ladder; the last-price line climbs the book as you scroll (sibling of the winning ladder).

new · trading

16Time & SalesA
Time & SalesPRINTS
Trading

A time-&-sales print tape — buy/sell prints accumulate newest-at-bottom as progress fills.

new · trading

17Volume ProfileA-
Volume ProfileVBP
Trading

A volume-by-price profile building out to progress, with the point-of-control row lit.

new · trading

18VWAP BandA-
VWAP BandVWAP
Trading

Price drawing in against a VWAP centerline + deviation band — colours by which side it closes.

new · trading

19P&L GaugeA
P&L GaugeR
Trading

A needle gauge sweeping −1R → +3R with progress, red below breakeven and green above.

new · trading

20R:R LadderA
R:R LadderRISK
Trading

Entry / SL / TP zones with a price marker climbing the ladder and a live R-multiple.

new · trading

21Ticker CrawlB+
Ticker CrawlTAPE
Trading

A scrolling symbol ticker whose read (lit) portion shows live green/red moves.

new · trading

22Forming CandleA-
Forming CandleOHLC
Trading

A single live candle whose body + wicks build with progress and settle green/red.

new · trading

23Spread TightenB+
Spread TightenBID/ASK
Trading

Bid rises, ask falls — the spread tightens toward mid as progress fills, with a bps readout.

new · trading

24Book ImbalanceB+
Book ImbalanceΔ
Trading

A center-pivot order-book imbalance meter tilting bid/ask, magnitude building with progress.

new · trading

25Renko BricksB+
Renko BricksRENKO
Trading

Renko bricks laying left→right to progress — a clean stepped trend with reversals.

new · trading

26Footprint DeltaA-
Footprint DeltaDELTA
Trading

Per-column bid×ask footprint with a cumulative-delta line tracing over the top.

new · trading

27UnderwaterA-
UnderwaterDD
Trading

The equity drawdown basin below the high-water baseline, deepening and recovering to progress.

new · trading

28Liquidation LadderB+
Liquidation LadderLEV
Trading

Leverage liq levels that flash red as the rising price marker approaches them — risk-of-ruin readout.

new · trading

29Session ArcA-
Session ArcSESSION
Trading

A market-session arc (pre · open · midday · close) with a sweep hand at the session's progress.

new · trading

30Top BarA
fixed top reading bar
Bars & lines

The classic page-top reading bar — a single accent fill scaling left→right with scroll.

armory · scroll-progress-bar

31Underline BarA-
0%
Bars & lines

A centered hairline fill with a live percent under it — minimal, drop-anywhere.

armory · scroll-progress-bar-top

32Gradient BarA-
Bars & lines

A width-fill bar with an accent gradient ramp — soft start, solid head.

armory · scroll-progress-gradient

33Glow BarB+
Bars & lines

A glowing fill with a bright travelling head dot — the neon reading rail.

armory · scroll-progress-glow-bar

34Dot RowB+
Bars & lines

A row of dots lighting up one by one as you read — discrete, playful.

armory · scroll-progress-dots

35Segment BarA-
Bars & lines

Ten segments fill in sequence with a partial leading cell — a battery-of-blocks read.

armory · scroll-progress-segments

36Tick RulerB+
Bars & lines

A ruler of minor/major ticks lighting up to a plumb-line head — precise + technical.

armory · scroll-progress-ticks

37Step MarkersA-
Intro
Setup
Body
Proof
End
Bars & lines

Labeled milestones along a connector line that fill as each section is reached.

armory · scroll-progress-step-markers

38Edge RailB+
left edge rail
Bars & lines

A glowing vertical rail down the left edge filling top→bottom — unobtrusive margin read.

armory · scroll-progress-side-line

39Vertical FillB
Bars & lines

A vertical capsule filling bottom→top with a gradient — a thermometer-style read.

armory · scroll-progress-vertical

40StaircaseB
Bars & lines

A rising staircase of bars filling step by step — progress as an ascent.

armory · scroll-progress-stairs

41Color ShiftB+
0%
Bars & lines

A fill that shifts red→amber→accent as it grows — heat building toward the end.

armory · scroll-progress-color-shift

42Progress ArcA-
0%
Rings & arcs

A speedometer semicircle whose accent arc fills and needle sweeps left→right with progress.

armory · scroll-progress-arc

43Fill RingA
0%read
Rings & arcs

A large centered ring filling clockwise with the live percent in the middle — the classic radial read.

armory · scroll-progress-circle

44Corner RingB+
corner badge ring
Rings & arcs

A small ring badge pinned to the corner, filling clockwise — an unobtrusive ambient read.

armory · scroll-progress-circle-corner

45Radial DialA-
0%
Rings & arcs

A conic-gradient pie that sweeps 0→360° as you read, with the percent in the hub.

armory · scroll-progress-radial

46Dual RingB+
0%
Rings & arcs

Two concentric arcs counter-rotating as they fill — a layered, kinetic radial read.

new

47Dashed RingB
0%0/30
Rings & arcs

A segmented ring lighting up dash by dash with a live N/N count — progress as discrete ticks.

new

48Big PercentA
0%
Numeric

One huge live percentage, dead center — the loudest, simplest read-depth signal.

armory · scroll-progress-percentage

49Count UpB+
00%
Numeric

A zero-padded 00→100 counter with a suffix and a thin meter beneath it.

armory · scroll-progress-counter

50Reading TimeB+
8 min left
Numeric

A pulse-dot pill counting minutes left as you read, over a fill bar.

armory · scroll-reading-time

51Odometer RollA-
012345678900123456789001234567890
Numeric

Vertical digit reels that roll continuously from 00 to 100 with progress.

new

52Ring + PercentA
0%
Numeric

A small SVG progress ring with the live percentage sitting dead center.

new

53Section X / NB
section00/ 12
Numeric

A 'section ⌈p·N⌉ of N' stepper with a dot strip — discrete chapter read.

new

54Depth ReadoutB
depth0%
0000px/ 2960px
Numeric

A HUD telemetry block: live depth percent, direction caret, and pixels scrolled.

new

55BatteryA-
0%
Creative

A battery icon whose charge level and colour (red→amber→accent) rise with progress, plus a live percent.

armory · scroll-progress-battery

56Comet TrailB+
comet rides the top edge
Creative

A glowing comet head rides the top edge trailing a fading accent tail behind it.

armory · scroll-progress-comet

57Liquid FillA
Creative

A tall vial fills with gradient liquid whose wavy surface rises as you progress.

armory · scroll-progress-liquid

58Wave FillA
Creative

A circle fills with a living wavy liquid surface that climbs with progress.

armory · scroll-progress-wave-fill

59TornadoB
Creative

Concentric rings spin two full turns and scale up as progress builds — a vortex read.

armory · scroll-progress-tornado

60Mini MapB+
Creative

An editor-style minimap of the page with a viewport box travelling down to track progress.

armory · scroll-progress-mini-map

61SVG Path DrawA-
Creative

A winding SVG path draws itself in via pathLength as you progress — an inked route.

armory · scroll-progress-path-svg

62Chapter IndicatorB+
Intro
Story
Climax
Resolution
Creative

A vertical chapter list where the reached chapter lights up and swells — narrative wayfinding.

armory · scroll-progress-chapter-indicator

63Section NavA-
Creative

A right-aligned section nav whose active entry grows its tick and brightens its label.

armory · scroll-progress-section-nav

64DNA HelixA
New

A double-helix whose rungs light accent left→right and twist into focus as you read.

new

65EKG TraceA
New

A heartbeat line that draws itself across the monitor with a glowing leading pulse.

new

66Fuel GaugeA-
EF
New

A needle gauge sweeping Empty→Full — instant analog read of how far you've gone.

new

67Metro LineA
KOSTMDPKTRFN
New

A subway line whose stations light as reached, a little train riding the lit track.

new

68ThermometerB+
New

Mercury rising from a glowing bulb up a ticked glass tube — temperature as progress.

new

69Rocket AltitudeA-
100806040200
New

A rocket climbing an altitude track with a flickering exhaust — liftoff to 100%.

new

70VinylA-
New

A spinning record whose grooves fill while the tonearm tracks inward to the label.

new

71ZipperB+
New

A zipper closing bottom→top, teeth meshing accent behind a rising slider.

new

72Tide TankA
New

A tank filling with a live wave surface and rising bubbles — Nilla's tide as a fill.

new

73ConstellationA-
New

Stars connecting one segment at a time into a glowing line drawn across the sky.

new

74Film StripB+
123456
New

Numbered film frames advancing through a fixed gate, the framed one lighting accent.

new

75Clock SweepA-
New

A clock hand sweeping 12→12 with a filling wedge — progress as elapsed time.

new

play/pause + speed drive the shared 0→1 sweep · drag the slider to scrub · swatches re-tint every indicator (theme-token proof) · ported from the armory + new