An animated notification list where items appear one by one with smooth spring physics. Auto-play cycles through up to 24 notifications with configurable delay and max visible count. Built for SaaS dashboards, social apps, and landing pages that need an engaging live activity feed effect.
Spring-based animations for natural fluid item entry
Auto-play cycles through notifications with configurable delay
Up to 24 notification items supported
Configurable max visible items at once (1–12)
Circular avatar image per notification
Hover scale animation on each card
Optional bottom gradient overlay for visual polish
Animations pause when component leaves viewport
Full color controls — container, card, border, title, subtitle
Full typography controls — title and subtitle fonts
Card radius, padding, gap and border width controls
Accessible — ARIA labels, semantic HTML, alt text on avatars
No dependencies
Content
Items — avatar, title, subtitle per notification (up to 24)
Delay — time between each item appearing (100–5000ms)
Max Visible — maximum items shown at once (1–12)
Colors — container background, card background, border, title, subtitle
Typography — title font · subtitle font · size, weight, spacing, line height
Layout — card radius (0–40px), padding (6–32px), gap (0–24px), border width (0–6px)
Hover — hover scale factor (1.0–1.15)
Avatar — avatar image size (24–72px)
Gradient — enable/disable toggle · gradient height (0–60%) · gradient start color
Framer Motion spring physics — stiffness 350, damping 40
useInView pauses animations when out of viewport
startTransition for React 18 performance
Semantic HTML with role attributes and ARIA labels
Keyboard navigation support
Alt text on all avatar images
5 pre-configured notification items with avatar images
420px × 384px default size
1000ms delay · 5 max visible items
Gradient overlay enabled
Hover scale 1.05
SaaS dashboards · Social app feeds · Activity trackers · Landing page social proof · App UI mockups · Onboarding flows · Real-time notification previews · Product demos
SEO Keywords
framer notification feed · framer activity feed · framer animated list · framer notification component · framer live feed · framer notification list · framer social feed · framer dashboard component · framer animated notifications · framer spring animation · framer feed component · framer saas component · framer activity list · framer code component · framer notification ui
Hamim Reza
