Add instant credibility to any landing page with a live-style notification ticker that cycles through real-time signups, purchases, and visitor counts. Fully animated with a spring bounce entrance, smooth slide-out transitions, and a gradient accent bar — designed to build trust and drive conversions without getting in the way. Drop it on any page in seconds, no code required.
3 notification types — new signups, purchases, and live visitor counts
Custom notifications array — add your own names, locations, products, messages, and viewer text directly from the property panel
Named visitor mode — set a name on a visitor entry to show "Ari is viewing this page" instead of a random count
Gradient or solid accent — one toggle switches the icon bubble, name text, top bar, and pulse dot all at once
Sequential cycling — custom entries play in exact order, no random filler or repeats
Fully dynamic colors — accent gradient, card background, border, and text color all controlled from the panel
Two overlay modes — Fixed (full-page overlay) or Relative (scoped to component bounds, sandbox-safe)
Show in Preview toggle — hide or show the ticker when running in Framer Preview mode
Spring bounce entrance with smooth slide-out between notifications
4 corner positions with custom X/Y offset controls
Adjustable display duration (2–12 seconds), card width, and border radius
Static renderer safe — animations and timers are fully disabled during export and editor rendering
Zero dependencies — pure React with native Framer property controls
SaaS founders and indie hackers who want social proof without a third-party tool like Fomo or Proof
Framer designers and agencies who need a polished, drop-in trust signal for client sites
eCommerce brands running Framer storefronts who want to surface purchase activity
Course creators and digital product sellers looking to show signup momentum on launch pages
Anyone running a waitlist who wants to make the page feel alive and active
1. Add to your page Drag the component onto any page or frame. In Fixed mode it renders as a full-page overlay — position doesn't matter in the layout. In Relative mode it renders inside the component's own bounds, which is useful for in-canvas previewing.
2. Set your overlay mode At the top of the panel, choose Fixed (Overlay) for a real production overlay that sits over your page content, or Relative (In Layout) if you want it scoped to the component frame — useful for previewing on canvas without it bleeding across the page.
3. Choose your notification types Toggle Signups, Purchases, and Visitor Count on or off. These control which types appear when running in random mode with no custom entries added.
4. Add custom notifications Open the Notifications array and hit + to add entries. Each entry has:
Type — Signup, Purchase, Visitors, or Any (random). Locks what kind of notification this entry shows.
Name — shown in accent color. On Visitor type, a filled Name shows "Ari is viewing this page" instead of a count.
Location — city shown in the subline, e.g. Austin, TX
Product — appended after the message on Purchase type, e.g. "just purchased Pro Plan"
Message — overrides the action verb, e.g. "just joined" or "is now a member". Leave blank for a random default.
Viewer Min / Max — range for the random visitor count when no Name is set
Viewer Text — overrides "viewing this page" with your own copy
Every field is optional. Blank fields fall back to built-in random defaults. If the array is empty, the component runs fully random using your enabled types.
5. Position it Use the Position dropdown to place the ticker in any corner. Use Offset X and Offset Y to fine-tune spacing from the edge. These controls are only active in Fixed mode.
6. Style it Toggle between Gradient and Solid accent style. In Gradient mode set Accent Color and Accent To. In Solid mode only Accent Color is used. Customize Card BG, Card Border, and Text Color to match your brand. Adjust Card Width, Radius, and Duration to taste.
7. Preview behavior Use the Show in Preview toggle to control whether the ticker appears when running your site in Framer's Preview mode. Set to Hidden to keep your preview clean while designing.
Gabe Amaya
