| name | active-row-darken |
| description | motion-graphic primitive — focus mechanic for scrolling lists. as a row's y-position approaches the focal center, opacity and font-weight ramp up; as it leaves, they ramp back down. directs attention without position alone. pairs with scrolling-index-dual-rail. |
active-row-darken
Purpose
Provide a visual focus mechanism for vertically-scrolling lists. Rows near the focal center (typically canvas vertical center) appear in full opacity and bold weight; rows further away fade to a lighter, thinner state.
This is the "typographic dimmer" mechanic that gives SP-D editorial-magazine its hypnotic feel.
Params
{
"focal_y_px": 960,
"distance_for_full_opacity_px": 0,
"distance_for_50_opacity_px": 96,
"distance_for_min_opacity_px": 240,
"min_opacity": 0.18,
"weight_active": 600,
"weight_inactive": 400,
"weight_transition_distance_px": 96,
"easing": "linear"
}
Behaviour
For each row, compute d = abs(row.y_in_viewport - focal_y_px).
opacity = lerp(1.0, min_opacity, clamp(d / distance_for_min_opacity_px, 0, 1))font_weight = lerp(weight_active, weight_inactive, clamp(d / weight_transition_distance_px, 0, 1))
Apply both ramps simultaneously. The combination of opacity + weight is what gives the dimmer its sophistication — position alone wouldn't be enough.
Style pack overrides
- SP-D (editorial-magazine) — default partner of
scrolling-index-dual-rail.
Quality Checks
- Active row is solid ink color at full weight.
- Inactive rows ramp down smoothly (no stepping).
- Min opacity ≥ 0.15 (less and rows disappear entirely).
- Weight transition synchronizes with opacity transition.
Failure Modes
- Rows step rather than ramp. Easing isn't linear or weight values are integers without smooth interpolation. Use floating-point weight interpolation.
- All rows look the same. Distance thresholds too large. Reduce so the active row stands out.
- Active row stays dim. Focal_y_px wrong. Verify it's canvas vertical center, not viewport vertical center.
