---
title: "FOMO Toast — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Syauqizaidan Khairan Khalaf · Interactive. FOMO Toast rotates through a list of “just purchased” notifications—automatically, on a schedule."
canonical: "https://framer.elliotli.dev/component/fomo-toast"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/FOMO Toast

# FOMO Toast

Recent sale pop-ups in a corner

[View on Framer](https://framer.com/marketplace/components/fomo-toast/?via=elliot-li)

![FOMO Toast preview image 1](https://framer.elliotli.dev/og/component/fomo-toast/1365c32cc1f8f0ab/1600x1200.jpg)

## Summary

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

## Description

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.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-4r603hqk-ltnLBXAlRX9g1btLIdBMNYACM5yDoB)

## Rank history [How rankings work →](/terms#rankings)

-   All · #9150

## Details

- **Author**: Syauqizaidan Khairan Khalaf
- **Price**: $5.00
- **Published**: 2025-10-09
- **Updated**: 2026-11-05
- **Added**: 2025-10-03
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase