ActivityFeed

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.

Features

• 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

Property Controls

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

Technical Details

• 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

Default Settings

• 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

Use Cases

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