Scroll Vignette
Reading-mode edge darkening that mounts as you leave the top and grows as the end approaches — a peripheral cue driven entirely by scroll position.
long-form pages deserve the same care as landing pages: the scrim tells you how much story is left.
The top shade mounts as you scroll away from the start; the bottom shade grows as the end approaches.
Your peripheral vision reads the frame before your eyes read the text — a soft cue that costs nothing to compute.
Keep the darkening under 12% and the band under 60px; anything louder reads as a broken gradient, not a cue.
Darker at the bottom, softer at the top — reading gravity pulls your eye down the page, not up.
Ambience is a live light wash over the preview. Full palette re-theming of every demo arrives with Theme Studio (Pro).
// React — two opacity values derived from scrollTop
const onScroll = () => {
const el = scroller.current;
const max = el.scrollHeight - el.clientHeight;
const top = Math.min(1, el.scrollTop / 90);
const bottom = Math.max(0, Math.min(1, (el.scrollTop - (max - 90)) / 90));
setShades({ top, bottom });
};
<div className="scroller" ref={scroller} onScroll={onScroll}>
…article…
<div style={{ opacity: shades.top }} className="vignette-top" />
<div style={{ opacity: shades.bottom }} className="vignette-bottom" />
</div>Snippet provenance
lines 1–13 · v1.0.0No changelog entry mentions “Scroll Vignette”, so the catalog records a single version for it.
Every line above is attributed to the single version this catalog records — we keep no per-line history, so no per-line attribution is invented. See the provenance page for the rule and the gaps.
Review notes · anchored to code lines
Threads attach to a line number in this asset's snippet, so a remark about the focus trap stays next to it.
Loading notes…
The snippet on this page is 13 lines long, so anchors run 1–13. Notes are per-asset and per-browser; a shared review thread is a server feature, and this panel is the local stand-in that proves the anchoring works.
Why it works — Long-form readers lose their place; a scrim that strengthens at both ends restores the sense of a page with edges.
The idea — Two derived opacities — distance from top and distance from bottom — are enough; no thresholds, no scroll-trigger libraries.
When to skip it — Keep the band under 60px and under ~12% opacity; a vignette you can see as a gradient is a design flaw, not a cue.
Course rail — understand it before you ship it
Live variants
Variant gallery
The same Scroll Vignette demo re-lit in three tones — no code change, three personalities.
long-form pages deserve the same care as landing pages: the scrim tells you how much story is left.
The top shade mounts as you scroll away from the start; the bottom shade grows as the end approaches.
Your peripheral vision reads the frame before your eyes read the text — a soft cue that costs nothing to compute.
Keep the darkening under 12% and the band under 60px; anything louder reads as a broken gradient, not a cue.
Darker at the bottom, softer at the top — reading gravity pulls your eye down the page, not up.
long-form pages deserve the same care as landing pages: the scrim tells you how much story is left.
The top shade mounts as you scroll away from the start; the bottom shade grows as the end approaches.
Your peripheral vision reads the frame before your eyes read the text — a soft cue that costs nothing to compute.
Keep the darkening under 12% and the band under 60px; anything louder reads as a broken gradient, not a cue.
Darker at the bottom, softer at the top — reading gravity pulls your eye down the page, not up.
long-form pages deserve the same care as landing pages: the scrim tells you how much story is left.
The top shade mounts as you scroll away from the start; the bottom shade grows as the end approaches.
Your peripheral vision reads the frame before your eyes read the text — a soft cue that costs nothing to compute.
Keep the darkening under 12% and the band under 60px; anything louder reads as a broken gradient, not a cue.
Darker at the bottom, softer at the top — reading gravity pulls your eye down the page, not up.
Theme Studio preview
Theming example — two token themes
Assets are token-driven (100% design-token driven). Here the same scene runs under two theme presets from the token sheet.
long-form pages deserve the same care as landing pages: the scrim tells you how much story is left.
The top shade mounts as you scroll away from the start; the bottom shade grows as the end approaches.
Your peripheral vision reads the frame before your eyes read the text — a soft cue that costs nothing to compute.
Keep the darkening under 12% and the band under 60px; anything louder reads as a broken gradient, not a cue.
Darker at the bottom, softer at the top — reading gravity pulls your eye down the page, not up.
--accent 262 · dark surfaces
long-form pages deserve the same care as landing pages: the scrim tells you how much story is left.
The top shade mounts as you scroll away from the start; the bottom shade grows as the end approaches.
Your peripheral vision reads the frame before your eyes read the text — a soft cue that costs nothing to compute.
Keep the darkening under 12% and the band under 60px; anything louder reads as a broken gradient, not a cue.
Darker at the bottom, softer at the top — reading gravity pulls your eye down the page, not up.
--accent 40 · paper surfaces
90-second read
Usage recipe — where this fits
Put it where a micro-decision happens: a toggle, a loader, a hover state — the small moments that make an interface feel considered.
Drop it into the exact spot it belongs, keep the default props until the copy is final, then tune the one knob that matters for your context.
Cost honesty
Performance note
Cheaper alternative — if you need even lighter, the plain HTML version skips React entirely — same result, ~0 KB.
What it needs
Browser support strip
No polyfills ship with the asset — if a listed feature is missing in a target browser, the graceful fallback is the static layout.
prefers-reduced-motion
Reduced-motion fallback
With prefers-reduced-motion: reduce, the animation loop and travel are removed; state changes keep working through opacity and colour (≤ 300ms). The demo you see above honours the switch — try it in your OS settings and the loop will quiet down.
Design rule: the reduced branch is a second design, not a stripped page — every state change stays visible.
Pressable step-through
Keyboard walk demo
Step through what a keyboard user experiences with this asset.
Tab to the element — the focus ring is visible before interaction
Auto-suggested
Composition map — what pairs well
Same-family assets that compose cleanly with this one:
Prism Switch
A theme-aware toggle that sweeps a six-stop prism gradient across the track on every flip. Pure CSS states, keyboard reachable, announces state to screen readers.
ElementsHalo Button
Primary button with a mouse-tracking halo, press ripple and a springy scale. Ships as React + Tailwind or dependency-free HTML/CSS.
ElementsPulse Loader
Three-note loader with staggered radial pulse and optional progress text. Reduced-motion safe and tiny — 0.8 KB gzipped.
Learn essays that teach the technique
One original micro-case
Inspiration context
The settings row that got fewer support tickets
A settings screen had seventeen identical switches with no press state. Users could not tell whether a tap had registered, so they tapped twice — and support logs filled with 'it toggles back'. The fix was one press-state scale plus a 250ms state fade per row. Ticket volume on that screen dropped by half in a month.
Written in-house — no screenshots, no borrowed imagery. The pattern, not the pixels.
Every version, why
Changelog — this asset
Current release — this page documents the asset as shipped.
Token pass: colours and radii moved to the design-token sheet; a11y score raised to the current bar.
Initial release to the library — original markup, MIT licensed.
30-day sparkline
Copy history
Sample series from this asset's usage fingerprint · last 12 days shown.
Future queue
Community remixes
Queue opens after launch. Remixes arrive as alternate versions of this asset — same job, different voice — submitted by users and audited by the studio before they appear beside the original.
Star / favourite
Save this asset
Your collection is stored in this browser (localStorage) — no account needed.
Build a page around it
Pairs well with a prompt
This asset belongs inside a bigger build — here is the prompt that would generate a page containing it:
A11y-strict page — WCAG AA as a hard requirement
AA requirements · Contrast audit · Keyboard map
Exact tree
Bundled dependencies — disclosed
Full snippet ≈ 0.8 KB raw, ~1 KB gzip — before any framework you already load.
Download
Export as single file
Grab the asset as one file, ready to paste into your project.
Files are generated in your browser from the snippets on this page — nothing leaves the tab.
Scale, not clutter
Sizing system — three densities
Density is a token decision, not a per-page override — pick one density per product surface and hold it. Active: Default.
Runnable copy
Open in a sandbox
Opens this asset in a new tab with its stylesheet injected — a real, editable HTML document in your browser. No account, no upload.
If the tab is blocked, use the single-file export instead — same content, saved locally.
Written version first
Tutorial transcript
This asset does not have a video yet — so the written version stands in: the code line walk below narrates the snippet line by line, and the design rationale on this page explains the default decisions. When a video ships, this exact panel hosts its full transcript.
Annotated snippet
Code line walk
The lines that matter, with the reason they matter. Click one:
Trade-off, visible
Size vs. quality slider
Standard · CSS + hover states
~6 KBadds transitions, focus-visible and reduced-motion rules
The slider is honest: the slim tier has no JS, the pro tier pays for behaviour. Start slim, upgrade only the surfaces that need it.
HTML → React, priced
Stack-switch cost note
Taking the HTML/CSS version into a React component costs real work — and the cost is predictable:
Event wiring
Hover, focus and click become handlers — the CSS stays, the state appears.
Props for the knobs
Every inline value that should vary becomes a prop with a default — the defaults must match the CSS exactly.
The estimate
A clean port of this asset is 20–45 minutes for a React developer — the 323-character stylesheet is the easy half.
Find it the way you say it
Tag synonyms
Search on this site resolves synonyms globally — "dropdown", "select" and "picker" land on the same asset, so you never need to know the catalog's internal vocabulary.
When to pick which
Sibling comparison
| Compare | Scroll Vignette | Prism Switch | Halo Button |
|---|---|---|---|
| Kind | Elements | Elements | Elements |
| Bundle | 0.8 KB gzip | 1.2 KB gzip | 2.1 KB gzip |
| a11y | 96/100 | 98/100 | 96/100 |
| Dependencies | none | none | none |
| Copies / mo | 320 | 4,820 | 3,910 |
| Interactions | scroll | click, hover | hover, click, drag |
The honest verdict — Scroll Vignette is the lighter default here; reach for Prism Switch when its extra weight buys an interaction this one lacks.
Similar to this — scored on shared tags, not hand-picked
Related assets
Read next — two guides and a prompt
picked by tag overlap, not by handGuide
Scroll speed is a type choice
9 min · Intermediate · updated 2026-09-10
Guide
Scroll choreography that respects the reader
5 min · Advanced · updated 2026-09-09
Prompt
3D portfolio with neon orbit showcase
Portfolio · 87% fidelity
How these three were chosen: essays scored on shared tags (2 and 1 matches), then prompt scored on block/vibe overlap (0 matches). The rule lives in src/lib/spine.ts, so the same asset always links to the same three pages and a second reader can reproduce the choice.