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

1. Drop FOMO Toast onto your page.

2. Populate Notifications (name, product, location; add avatar and link as needed).

3. Choose Position, Interval, and Duration (keep duration slightly shorter than interval).

4. (Optional) Enable Play Sound and set File/URL + volume.

5. 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.