Scroll-Driven Sticky Text Reveal

✅ Link to component page: [marketplace URL — fill in after publish]

Introduction

A scroll-driven typographic effect: the line “you can …” stays pinned to a fixed band on the screen while a vertical list of action words (design., prototype., solve., …) scrolls through it. Whichever word currently sits at the band lights up in an accent color; the others stay dimmed.

The component renders as a tall section that the user scrolls through naturally in the page — there is no internal scroll container, no JavaScript scroll listeners, and no useScroll. Everything is driven by:

position: sticky on the header (pins it to the viewport while the list moves through),

background-attachment: fixed + background-clip: text on each <li> (places an accent gradient at the band in viewport coordinates so each word is illuminated as it passes through),

fluid CSS typography (pow() + clamp()) so the text scales smoothly across viewport widths.

Inspired by jh3yy’s craftofui demo.

How to setup

Add to Framer Project — paste the component into a new Code Component, or import via shared URL from the assets panel.

Place on a Page — drop it directly on a Framer Page (not inside a clipped/transformed Frame — position: sticky requires that no ancestor uses transform, filter, perspective, or overflow: hidden).

Configure properties — set the words list, accent hue, band position, theme. See Component Properties.

Preview — open Preview (⌘P). On Canvas the component renders a static snapshot of the initial scroll state; the real effect requires actual scrolling, which only happens in Preview or on the published site.

Component Properties

Title	Description	Type
Prefix	The static prefix text shown next to the scrolling words (e.g. `"you can"`).	String
SR Text	Full sentence read by screen readers as a single phrase, since the animated list is meaningless when read sequentially. Example: `"you can ship things."`.	String
Words	The list of words that scroll through the highlight band. Each word is one `<li>`. Up to 20 entries.	Array of String
Hue	Hue value (0–359°) used for the accent color (`hsl(<hue> 85% 65%)`).	Number (0–359, step 1)
Start	Vertical position of the highlight band, in `vh` from the top of the viewport. The first word starts here; subsequent words pass through it as you scroll.	Number (10–50, unit `vh`)
Theme	Color scheme. `System` follows the user’s OS preference via `prefers-color-scheme`; `Light` / `Dark` force one mode regardless.	Enum: `system` / `light` / `dark`

Responsive Behavior

Width: any-prefer-fixed — fills the parent container by default; user can lock to a fixed width if needed.

Height: auto — the component sets its own min-height based on the number of words so the scroll length always fits the effect. Formula: (count - 1) × 1.2em × 3 + 60vh.

Typography scales fluidly between two breakpoints (375px → 1500px) using pow() and clamp(). No media queries needed.

Accessibility

The animated word list is wrapped in aria-hidden="true" so assistive tech ignores the visually-spinning list.

A visually-hidden <span class="sdr-sr"> inside the <h1> carries the full sentence (the SR Text property) so screen readers announce a coherent phrase like “you can ship things.” instead of seven disconnected verbs.

Color contrast: accent color is fixed at 85% saturation, 65% lightness — acceptable contrast against both light and dark backgrounds across all hues. Adjust the hue if WCAG audits flag a specific color.

Known Limitations

Will not work inside transformed parents. position: sticky and background-attachment: fixed both lose their viewport anchoring when any ancestor uses transform, filter, perspective, will-change: transform, or contain: paint/layout/strict. In Framer this most often manifests as a clipped Frame around the component — drop it on a Page, not inside a Frame with Clip Content enabled.

Canvas preview is static. Framer’s canvas doesn’t simulate scroll, so the canvas render is a non-interactive snapshot of the initial state (first word highlighted, others dimmed). The real effect only shows in Preview / on the published site.

background-attachment: fixed repaints on every scroll frame — fine on desktop, mildly heavier on low-end mobile devices. Modern mobile browsers handle it acceptably; if you see jank, reduce the number of words.

Modern CSS only. Requires pow(), color-mix(), lh unit, and background-clip: text. Supported in Chromium 110+, Safari 16.4+, Firefox 128+. Older browsers will fall back to dimmed/transparent text without the highlight effect.

Changelogs

1.0.0

Initial release: prefix + sticky scrolling word list with viewport-fixed accent gradient.

Property controls: Prefix, SR Text, Words, Hue, Start, Theme.

Light / Dark / System themes via JS-resolved explicit colors (no light-dark() keyword runtime quirks).

Fluid typography via CSS pow() and clamp().

Accessibility: aria-hidden on the animation, sr-only fallback sentence for screen readers.