Skip to main content
Pulp
  • Company
Access Demo
    • human interfaces
    • critical decisions
    • persona engine
    • machine health
    • data storytelling
    • persuasive intelligence
    • workforce optimization
    • custom ai/ml
    • policy & governance
    • marketing & media
    • consulting & management
    • finance & markets
    • public engagement
    • thinkwell™ workstation
    • thinkwell™ plugin
    • pulp™ api
  • Company
Access Demo

Overview

  • Introduction
  • Getting started

Guides

  • From draft to decision
  • Score a Reddit thread
  • Ground a claim in evidence
  • Simulate an audience
  • AI Debate Tournament

SDKs

  • Server-Side SDK
    • Radiance
      • RootWords
        • Docs
        • Sections
        • Paras
        • Sentences
        • Clauses
        • Claims
        • Phrases
        • Named Entities
        • Words
        • Characters
        • Special Characters
        • Special Patterns
      • RootCause
      • StemReferences
      • AdCanopy
    • Windfall
      • TrueAura
        • Demographics
        • Psychographics
        • Mindstate
        • Environment
        • Memory
        • Vision
      • NectarRewards
      • PoisonIvy
      • GrapeVine
    • Groundwater
      • WebSoil
      • DomainCrust
      • CodeMantle
      • ServerCore
  • Web SDK
    • loosethreads UI/UX
      • WarpDisplays
      • WeftConversations
      • DyeMedia
      • BightInteractions
      • Component Library
        • Sandbox
          • Cards & panels
            • Expandable card
            • Debug panel
          • Text effects
            • Morphing text
            • Video text
          • Device & browser frames
            • Safari frame
            • iPhone frame
            • Android frame
          • Canvas & 3D
            • Crowd canvas
            • Interactive robot
          • Data & visualization
            • Location map
            • Leaderboard
            • Structured Discussion Bracket
          • Controls & inputs
            • Region Selector
          • Scroll effects
            • Scroll-stack cards
            • Perspective scroll showcase
            • Scroll Scrubber
        • Production

Reference

  • References catalogSoon
  • Conventions
  • PricingSoon
  • Status and roadmapSoon
Introduction
Getting started
$pip install pulp-sdk
From draft to decision
Score a Reddit thread
Ground a claim in evidence
Simulate an audience
AI Debate Tournament
Server-Side SDK
Radiance
RootWords
Docs
📄sample.txt2 paras · 160 chars
Sections
§1 Introduction
Paras
¶1: first paragraph block
¶2: second paragraph block
Sentences
S1S2S3S4
Clauses
C1C2C3C4C5C6
Claims
Claim 1Claim 2Claim 3
Phrases
NPVPNPVPPPNP
Named Entities
Pulp [ORG]
Words
ifwewaitforcertaintywewillbe+20 more
Characters
0 → 159
Special Characters
spaces × 27punct × 8nbsp × 0
Special Patterns
0 patterns detected
RootCause
Ethos
—
Pathos
—
Logos
—
Kairos
—
Style
—
Clarity
—
Focus
—
Awareness
—
Persuasive Velocity—
StemReferences
CensusFECCongressFed. Reg.RegulationsLegiScanGovInfoGDELTCivicWikimediaData.govPodcast Idx
AdCanopy
rank
Windfall
TrueAura
Demographics
life_stageyoung_adult
education_levelbachelors
locationurban
occupationtech
Psychographics
Impelling
Compelling
Repelling
Mindstate
alpha 10 Hzcalm
Environment
vision onhearing onsmell offtouch offtaste off
Memory
purchases 12content 48brands 5
Vision
motivationdesirefear
NectarRewards
define
PoisonIvy
apply
GrapeVine
post
Groundwater
WebSoil
heatmap
DomainCrust
price
CodeMantle
trace
ServerCore
uptimeresize
Web SDK
loosethreads UI/UX
WarpDisplays
📄q3-report.pdf
🖼chart.png
▶keynote.mp4
WeftConversations
ThreadsChatInlineSide panels
DyeMedia
TextToday
ImageToday
SoundSoon
VideoSoon
BightInteractions
MouseKeyboardVoice · soonCombos · soon
Component Library
Sandbox
Cards & panels
Expandable card
Debug panel
Text effects
Morphing text
Video text
Device & browser frames
Safari frame
iPhone frame
Android frame
Canvas & 3D
Crowd canvas
Interactive robot
Data & visualization
Location map
Leaderboard
Structured Discussion Bracket
Controls & inputs
Region Selector
Scroll effects
Scroll-stack cards
Perspective scroll showcase
Scroll Scrubber
Production
Coming soon
Conventions
  1. Web SDK
  2. loosethreads UI/UX
  3. Component Library
  4. Sandbox
  5. Scroll effects
  6. Scroll Scrubber

Scroll Scrubber

A reading pane with a horizontal position ribbon that tracks where you are in the text. Scroll the pane, or drag the ribbon to scrub.

Overview

Scroll scrubber is a reading pane with a horizontal position ribbon pinned to its lower-right corner: a strip of tick marks, most faint, a few dark landmarks, with a warm marker that tracks reading position. It reads as position rather than progress, showing where you are between landmarks rather than how close you are to the end.

The ribbon works both ways. Scrolling the article moves the marker, and dragging the marker (or arrow-keying it) scrubs the article to match. The pane is a fixed-height box with its own internal scroll, so it lives inside the reading column instead of taking over the viewport. Scroll the pane, or drag the ribbon to scrub.

Installation

Import the pattern from loosethreads:

tsx
import { ScrollScrubber } from "@pulp/loosethreads/patterns"

Usage

Drop it in and scroll. The component renders its own article, ribbon, and scroll box, so it takes no props:

tsx
import { ScrollScrubber } from "@pulp/loosethreads/patterns"

function Reader() {
  return <ScrollScrubber />
}

Configuration

This is a self-contained pane with no props. The article copy, the tick count, and the landmark positions are fixed in the source (deterministic, so server and client render identically). To use your own text, replace those constants in the component.

Anatomy

A scrollable article holds the headings and paragraphs. Floating over its lower-right is the ribbon: a row of tick spans with a handful of taller dark landmarks, plus an iris-magenta marker positioned by the current percentage. Scrolling updates that percentage; pointer and keyboard input on the ribbon set the article's scrollTop to match.

Accessibility

  • Slider semantics. The ribbon is a role="slider" with aria-label, aria-valuemin / aria-valuemax / aria-valuenow and a percentage aria-valuetext, all kept in sync with reading position.
  • Keyboard. The ribbon is focusable and scrubs with the arrow keys, plus Home and End to jump to the start or finish.
  • Motion. Everything is driven by user scroll or drag; the marker only carries a short 60ms position transition. Nothing auto-plays, so there is no ambient animation to gate behind prefers-reduced-motion, and the source does not check it.

Back to Scroll effects.

The shape of attention

Scrolling is the quietest gesture in software. We do it without thinking, thumbs and trackpads nudging a column of text past a fixed window, and yet we rarely know where we are inside it.

A scrollbar answers the question crudely, a fat handle sliding down a gutter. It tells you how far, but never what kind of far. It cannot say that you have just passed a section break, or that the next idea is close.

A ribbon of small marks

So imagine instead a ruler laid flat beneath the words: a ribbon of small vertical marks, most of them faint, a few of them dark. The dark ones are landmarks. They are the places the writer wanted you to feel.

As the page moves, a single warm mark travels across the ribbon. It is not a measure of completion. It is a measure of position. You are here, between this landmark and the next, closer to one than the other.

Position, not progress

The difference matters. Progress flatters; position orients. A progress bar congratulates you for reaching the end. A position marker simply keeps you company, the way a finger kept in the margin keeps your place.

You can grab the ribbon, too. Drag the warm mark and the text obeys, flowing under your hand at whatever speed you choose. Reading becomes something you do with your hands as much as your eyes.

Reading with your hands

There is a particular pleasure in watching the dark marks approach. They give the ribbon rhythm: long stretches of pale ticks, then a firm dark one, a breath, and the pale ticks resume.

Density is the whole trick. Too few marks and the ribbon is a scale; too many and it is a smear. The right number sits between, legible as a texture and countable as a set, both at once.

Where the thumb rests

The thumb rests wherever you leave it. Close the page and reopen it, and it should be waiting in the same spot, the ribbon holding your place like a pressed flower between two pages.

None of this is necessary. You could scroll forever with a grey bar and never complain. But necessity was never the point of good tools. Fit was. A thing that fits the hand disappears into the using of it.

Coda

So this is a small argument for small marks: that orientation beats measurement, that texture beats abstraction, and that the best interface for moving through words is one that feels, faintly, like the words are moving through you.