Dots to Solid Text
Dots to Solid Text is a scroll animation in the UI HUB scroll animations collection. A pinned, scroll-scrubbed signature section built on one deterministic 170-unit GSAP timeline (defaults ease 'none', timeline.to({}, {duration:170}) fixes the length).
The component is driven by 8 documented props (compact, showDemoButton, headline, quote, sub, yardNumbers and 2 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: ScrollTrigger scrub on a pinned runway; deterministic fromTo tweens with immediateRender:false; offscreen-canvas pixel sampling for the dot matrix.
Preview the scroll animation in the browser above, copy the source, and paste it into your project. Scroll Animations components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Dots to Solid Text?
A scroll-stopping signature moment: specialty cards fan and drift past, the quote materializes as a dot matrix, shrinks, then wipes to solid Anton lines as the stage tints to plum.
Dots to Solid Text at a glance
- Category
- Scroll Animations
- Pricing
- Pro component
- Libraries
- React, GSAP, gsap/ScrollTrigger, canvas and offscreen canvas
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 8
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Dots to Solid Text works
A pinned, scroll-scrubbed signature section built on one deterministic 170-unit GSAP timeline (defaults ease 'none', timeline.to({}, {duration:170}) fixes the length). Scene 1 (0-40): golden-framed brand cards labelled UI / HUB / scroll / Build by / jainil are placed with gsap.set at a fanned baseline and parallax-drift left at per-card speeds while the headline and ghost numbers scroll off. Scene 2 (33-92): the quote is first rendered into a low-resolution offscreen canvas (S = max(3, round(W/380)) cells) and sampled into a dot matrix; an alpha tween fades the dots in, the matrix centers, a dissolve edge e sweeps 1.7 to -0.3, and each line slides home on its own eased x offset (o0-34, o1-34, o2-34). 92-112 the matrix shrinks from 3.4x to the solid font size while the stage background mixes from #07050f to #1d1340. Scene 3 (112-142): bright spans are clipped by a per-line diagonal polygon(0 -5%,X% -5%,X-22% 105%,0 105%) that wipes 0% to 122% on staggered windows (112/119/126) while rowEdge hides the dots behind the revealed text. 140-163: quote icon and caption fade in. In library previews the timeline is driven by an invisible self-contained scroll column inside the card (trigger on a spacer, scroller on that column), playing only when the visitor scrolls within the preview.
Technical information for Dots to Solid Text
| Category | Scroll Animations |
|---|---|
| Libraries | React, GSAP, gsap/ScrollTrigger, canvas and offscreen canvas |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | HTML canvas |
| State change | scene one: fanned brand cards (UI · HUB · scroll · Build by · jainil), headline and yard numbers on the near-black stage to scene three: solid Anton lines wiped in with caption, stage drifted to plum |
| Props | 8 configurable |
| Usage example | Included on this page |
What Dots to Solid Text requires
- ScrollTrigger scrub on a pinned runway
- deterministic fromTo tweens with immediateRender:false
- offscreen-canvas pixel sampling for the dot matrix
- document.fonts.load gate for Anton
- debounced rebuild on resize
How to use Dots to Solid Text
- Install the dependencies: npm install gsap and npm install gsap/ScrollTrigger and npm install canvas and npm install offscreen canvas.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <DotsToSolidText /> in your page using that import path.
- Pass any of the 8 documented props to change colours, density, speed or behaviour.
Dots to Solid Text questions
What is Dots to Solid Text?
A scroll-stopping signature moment: specialty cards fan and drift past, the quote materializes as a dot matrix, shrinks, then wipes to solid Anton lines as the stage tints to plum.
How does Dots to Solid Text work?
A pinned, scroll-scrubbed signature section built on one deterministic 170-unit GSAP timeline (defaults ease 'none', timeline.to({}, {duration:170}) fixes the length). Scene 1 (0-40): golden-framed brand cards labelled UI / HUB / scroll / Build by / jainil are placed with gsap.set at a fanned baseline and parallax-drift left at per-card speeds while the headline and ghost numbers scroll off. Scene 2 (33-92): the quote is first rendered into a low-resolution offscreen canvas (S = max(3, round(W/380)) cells) and sampled into a dot matrix; an alpha tween fades the dots in, the matrix centers, a dissolve edge e sweeps 1.7 to -0.3, and each line slides home on its own eased x offset (o0-34, o1-34, o2-34). 92-112 the matrix shrinks from 3.4x to the solid font size while the stage background mixes from #07050f to #1d1340. Scene 3 (112-142): bright spans are clipped by a per-line diagonal polygon(0 -5%,X% -5%,X-22% 105%,0 105%) that wipes 0% to 122% on staggered windows (112/119/126) while rowEdge hides the dots behind the revealed text. 140-163: quote icon and caption fade in. In library previews the timeline is driven by an invisible self-contained scroll column inside the card (trigger on a spacer, scroller on that column), playing only when the visitor scrolls within the preview.
Which category does Dots to Solid Text belong to?
Dots to Solid Text is listed under Scroll Animations in the UI HUB catalog. Scroll-linked animation components: parallax layers, pinned and sticky sections, scroll-triggered reveals, expanding scroll panels and 3D scroll transitions. Each one documents whether it uses native scroll timelines or a motion library, which matters for performance on long pages. Load them per section rather than across a whole route.
What does the compact prop do in Dots to Solid Text?
Preview mode: the stage fills its container and scrubs against the nearest scrolling pane instead of the window. It defaults to false.
What does the showDemoButton prop do in Dots to Solid Text?
In compact mode, overlay a Live Demo pill that links to the full-screen demo. It defaults to false.
Is Dots to Solid Text free to use?
Dots to Solid Text is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Dots to Solid Text use?
Dots to Solid Text uses React, GSAP, gsap/ScrollTrigger, canvas and offscreen canvas and is styled with Tailwind CSS.
What does Dots to Solid Text need to run?
Dots to Solid Text needs ScrollTrigger scrub on a pinned runway, deterministic fromTo tweens with immediateRender:false, offscreen-canvas pixel sampling for the dot matrix and document.fonts.load gate for Anton.