FOMO Toast

FOMO Toast rotates through a list of “just purchased” notifications—automatically, on a schedule.

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.

Lightweight, corner-pinned toasts