PromoPopup

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