About FOMO Toast

Turn quiet product pages into living proof. FOMO Toast rotates through a list of “just purchased” notifications—automatically, on a schedule. Each toast slides in with name, product, location, time-ago, an avatar (or autogenerated initials), and a subtle progress bar. Choose any screen corner, randomize or sequence the feed, add a close button, and even play a short sound on show.

Engineered for Framer with thoughtful details: duration is auto-capped to avoid overlap, audio gracefully fails if blocked, an ARIA live region announces updates for screen readers, and thumbnails/static renderers show a single, tidy preview.

Key Features

Auto-cycling toasts: Interval-based rotation with per-toast auto-dismiss.
Randomize or sequence: Shuffle entries or play them in order.
Four positions: Top/Bottom + Left/Right, fixed with safe spacing.
Avatar or initials: Show uploaded avatars—or auto-generate initials.
Inline progress bar: Visual countdown synced to the toast’s lifetime.
Click-through links: Entire toast can open a URL in a new tab.
Close button (optional): Let users dismiss instantly.
Sound on show (optional): Upload a file or provide a URL; set volume.
Lightweight & encapsulated: Inline styles only—no global CSS bleed.
Static/thumbnail-aware: Shows a single example toast in previews.

Perfect For

Social proof on landing/checkout pages
“Recent signups/purchases” nudges
Launch pages, promos, and seasonal campaigns
Templates that need drop-in FOMO without external libraries

How It Works (under the hood)

Data source: notifications[] (name, product, location, optional avatar/link).
Scheduler: A repeating interval (interval) creates a new toast and a dismiss timeout (duration).
Overlap guard: validatedDuration = min(duration, interval − 500ms) ensures toasts don’t collide.
Time-ago: Randomly sampled from ["Just now","1m ago","2m ago","3m ago","5m ago"].
Sound: Plays on each show if enabled (file or URL), with volume and error handling.
A11y: ARIA live region announces “New purchase notification…” text.
Static mode: In Framer’s static renderer/thumbnail, it renders the first item only.

Props & Controls

Content

Notifications (Array)Each item: name, product, location, optional avatar (ResponsiveImage), optional link.

Behavior

Randomize (true/false) — shuffle vs. sequential order.
Position ("top-left" | "top-right" | "bottom-left" | "bottom-right")
Interval (ms, default 5000) — time between toasts.
Duration (ms, default 4000) — time each toast stays visible; auto-capped below interval.

Appearance

Background (toast card)
Text Color (body + meta)
Accent Color (progress bar + location icon)
Show Avatar (toggle)
Avatar Color (fallback circle for initials)
Body Font / Name Font
Radius (card corner radius)
Shadow (elevation on/off)
Close Button (toggle + color)

Sound (optional)

Play Sound (toggle)
Sound Source (Upload File / Enter URL)
Sound File (mp3/wav/ogg) or Sound URL
Volume (0–1)

Quick Start

Drop FOMO Toast onto your page.
Populate Notifications (name, product, location; add avatar and link as needed).
Choose Position, Interval, and Duration (keep duration slightly shorter than interval).
(Optional) Enable Play Sound and set File/URL + volume.
Match brand with Background, Text, Accent, Fonts, and Radius.

Tip: Use Randomize for social proof; use Sequential for curated stories (e.g., case-study flow).

Implementation Notes

Initials logic: If no avatar, initials are derived from the name.
Click behavior: If a link exists, the toast is clickable (noopener,noreferrer).
Mobile sizing: Includes a small-screen tweak for comfortable min/max width and padding.
Audio caveat: Some browsers require prior user interaction; playback is gracefully caught/logged if blocked.