Scroll Reward
Reward attention instead of interrupting it: finish the article and a coupon ticket slides in.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
A slim reading-progress line, then a ticket in the corner when the visitor reaches the depth you choose; tap to reveal and copy the code. Once per reader per article. No modal, nothing blocked.
Installation
$ npm i @guetix/scroll-reward
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { scrollReward } from "@guetix/scroll-reward";
scrollReward({ at: 0.9, code: "READER10", note: "10% off — just for finishing." });Usage
example.tsx
import { scrollReward } from "@/components/guetix/scroll-reward";
import { useEffect } from "react";
export function ArticleReward() {
useEffect(() => scrollReward({ code: "READER10" }).destroy, []);
return null;
}Blogs that sellContent marketingDocs with paid tiers
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| at | number | 0.9 | Depth 0–1. |
| title / note / code | string | — | Ticket content. |
| progressBar | boolean | true | Show reading progress. |
| color | string | — | Accent. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Progress bar has role=progressbar; the ticket is a status; code copy is a button.