A promotional popup component with toast and top bar modes, auto-open delay, minimize and dismiss controls. Perfect for announcing launches, discounts, or marketplace links without interrupting the user experience.
Two Layout Modes Toast mode renders a floating card aligned bottom-right inside the frame. Top Bar mode stretches full-width for site-wide announcements. Automatically switches to bar mode when component width is set to 100%.
Key Features
Auto-open after configurable delay or manual control from properties panel
Minimize to header row — expand again by clicking the card
Dismiss with optional session memory — stays dismissed until browser session ends
CTA button opens any URL in a new tab
Breathing accent animations — icon pulse, gradient sweep, top line sweep
Animations pause when component is out of viewport
Static renderer safe — shows popup on canvas without delay
Fade, scale and y-axis enter and exit animations via Framer Motion
Property Controls
Behavior — mode (toast/bar), control (auto/manual), auto open toggle, delay, default minimized state, dismiss toggle, session memory
Content — headline, subheadline, CTA label, CTA link
Style — surface color, warm background accent, text, muted text, border, accent color, accent animation toggle and speed, heading font, body font, button font, radius, padding, shadow strength
Use Cases Product launches · Marketplace announcements · Discount and promo banners · Newsletter signups · Cookie notices · Feature announcements · Limited time offers · New component alerts
SEO Keywords framer popup component · framer toast notification · framer promo popup · framer announcement bar · framer top bar · framer promotional component · framer modal component · framer notification component · framer CTA popup · framer code component
A promotional popup component with toast and top bar modes, auto-open delay, minimize and dismiss controls. Perfect for announcing launches, discounts, or marketplace links without interrupting the user experience.
Two Layout Modes Toast mode renders a floating card aligned bottom-right inside the frame. Top Bar mode stretches full-width for site-wide announcements. Automatically switches to bar mode when component width is set to 100%.
Key Features
Auto-open after configurable delay or manual control from properties panel
Minimize to header row — expand again by clicking the card
Dismiss with optional session memory — stays dismissed until browser session ends
CTA button opens any URL in a new tab
Breathing accent animations — icon pulse, gradient sweep, top line sweep
Animations pause when component is out of viewport
Static renderer safe — shows popup on canvas without delay
Fade, scale and y-axis enter and exit animations via Framer Motion
Property Controls
Behavior — mode (toast/bar), control (auto/manual), auto open toggle, delay, default minimized state, dismiss toggle, session memory
Content — headline, subheadline, CTA label, CTA link
Style — surface color, warm background accent, text, muted text, border, accent color, accent animation toggle and speed, heading font, body font, button font, radius, padding, shadow strength
Use Cases Product launches · Marketplace announcements · Discount and promo banners · Newsletter signups · Cookie notices · Feature announcements · Limited time offers · New component alerts
SEO Keywords framer popup component · framer toast notification · framer promo popup · framer announcement bar · framer top bar · framer promotional component · framer modal component · framer notification component · framer CTA popup · framer code component
Hamim Reza
