AI Summary Carousel: Add RevuKit's Most Animated Widget to Framer

Review widgets tend to look the same: a row of stars, a handful of cards, maybe a carousel. They do the job but they don't make an impression. The new AI Summary Carousel is a different category entirely — it reads your Google reviews, understands them, and presents them with the kind of animated detail you'd expect from a premium product demo, not a social proof section.

It's RevuKit's newest and most advanced widget, and it's available in Framer right now through the RevuKit plugin. This article covers what it does, how the animations work, and exactly how to add it to your Framer site.

What Makes This Widget Different

Most review widgets present data. The AI Summary Carousel presents an argument. Here's what it combines in a single widget:

• Live Google rating — your current star score and review count, synced automatically.
• AI-generated summary — a short paragraph that synthesises the recurring themes from your reviews: what customers love, what they consistently praise, what makes you stand out. Written by AI, grounded in real reviews.
• Scrolling review carousel — individual review cards cycling automatically through your best reviews, with reviewer names, ratings, and text.
• Cinematic animations — word-by-word text reveal, 3D spring tilt on hover, cursor glow trace, aurora background blobs, and a spinning gradient border.

The practical effect: a visitor who scrolls past this widget gets your social proof summary in under five seconds — without needing to read a single review card. That's the conversion value of a great AI summary.

The Animations, Explained

There are five distinct animation systems in the AI Summary Carousel. Each one was designed intentionally. Here's what's happening in plain language:

Word-by-Word Reveal

When the AI summary panel enters the viewport, the text doesn't appear all at once. Each word fades in and sharpens individually — starting slightly blurred and transparent, arriving at full opacity and clarity — with a staggered delay of roughly 42ms per word.

The result looks like the text is being typed in real time, but feels softer and more premium than a standard typewriter effect. The blur-to-sharp transition gives each word a sense of emerging from nothing. By the time the last word lands, visitors have already read the first sentence — which is where you want their eyes.

The animation is triggered by an Intersection Observer, so it only runs when the widget is actually in view. Visitors who scroll quickly and come back still see the full reveal.

3D Tilt & Cursor Glow

Hover your cursor over the AI summary panel and the card tilts in three dimensions to follow your pointer. This isn't a simple CSS transform — it uses a spring-physics simulation running on requestAnimationFrame. The card has momentum and damping, so it settles naturally rather than snapping to position. Move quickly and the card swings; move slowly and it drifts. It feels physical.

At the same time, a radial glow gradient traces your cursor position inside the card — a soft highlight that makes the surface feel lit from within. The glow fades out over 400ms when you leave the card.

Both effects are handled entirely on the GPU compositor. There are no layout reads, no forced reflows — the rest of your Framer page is completely unaffected.

Aurora Background & Spinning Border

Behind the summary text, two softly blurred colour blobs drift slowly in opposite rhythms — one on an 8-second loop, one on a 10-second loop offset by 3 seconds. They scale gently as they move, creating a Northern Lights effect that adds depth without competing with the text.

The panel's border uses a conic gradient that rotates continuously on a 6-second loop, giving the edge a subtle shimmer. It's the kind of detail that most visitors won't consciously notice — but that makes the widget feel premium compared to a standard card with a static border.

The AI Summary

The AI summary is the centrepiece of the widget. RevuKit processes your Google reviews server-side and generates a short paragraph capturing the themes your customers mention most — quality, speed, service, atmosphere, value, whatever your specific business is known for.

Why does this matter for Framer sites? Because most visitors don't read individual review cards. They scan. A two-sentence summary that says “Customers consistently praise the responsive support and clean interface — several note it's the only tool they've kept after trying alternatives” does more conversion work than five full review cards with “Great product, highly recommend!”

The summary is pre-generated and cached on RevuKit's CDN, so it loads instantly with the widget — there's no visible delay or skeleton shimmer waiting for an AI response. As new reviews come in and your Pro plan syncs daily, the summary is regenerated automatically. You never touch it.

Adding It to Your Framer Site

The AI Summary Carousel is available through the RevuKit Framer plugin. Here's the full process:

1. Open the RevuKit plugin in your Framer project (Plugins panel → RevuKit). If you haven't installed it yet, search for "RevuKit" in the Framer marketplace or visit the plugin page and click "Add to Framer".
2. Connect your business — search for your Google Business Profile and select it. RevuKit pulls in your reviews, rating, and business data.
3. Select AI Summary Carousel from the widget gallery. You'll see a live preview with your actual review data and AI summary.
4. Customise the colours — primary (stars, accents), secondary (text, card surfaces), and tertiary (borders, subtle details). The aurora colours adapt to your primary colour automatically.
5. Adjust border radius and shadow to match your site's card style.
6. Click "Add to canvas" — the widget is inserted as a Code Component. Resize it from the canvas handles and position it within your layout.
7. Publish — the widget renders identically on your live site. No extra configuration needed after publish.

Placement & Design Tips for Framer

The AI Summary Carousel is more substantial than a compact badge — it's designed to anchor a section. These placements consistently perform well:

1. Directly below the hero. The classic pattern: hero → social proof → features. The AI summary gives visitors an immediate answer to “but is it actually good?” before they invest time reading features.
2. Before the pricing section. Trust at the point of decision. A visitor who's considering your pricing tier is exactly the right person to see your AI summary and best reviews.
3. On service pages. If you use Framer CMS for individual service pages, adding the carousel to the template means every page carries social proof that's relevant to the whole business.
4. On dark sections. The aurora effect and spinning border look especially good on dark backgrounds. Use secondary colour #ffffff and tertiary colour #cccccc for a dark-mode variant that feels intentional.

Avoid placing the widget in a narrow column — it needs room to breathe. If your layout is two-column, give the widget its own full-width row.

Framer-Specific Behaviour

A few things worth knowing about how the widget behaves inside Framer specifically:

• Editor vs published. In the Framer editor, the widget renders in a sandboxed preview. The tilt and cursor glow animations are active in the editor — you can interact with them before publishing to confirm they look right.
• Container queries. The widget uses container queries for responsive layout. These are automatically enabled when you insert via the RevuKit plugin — you don't need to configure anything.
• Responsive breakpoints. The widget responds to its container width, not the viewport. This means it adapts correctly when you set responsive overrides on the containing Frame in Framer — no manual breakpoint code needed.
• No conflict with Framer interactions. The tilt animation uses pointer events directly on the widget's internal DOM nodes. It doesn't interfere with Framer's own interaction layer or scroll-triggered animations.
• Works on published sites. Unlike some Code Components that require editor-only configuration, the AI Summary Carousel renders identically on your live, published Framer site. The AI summary, animations, and review data all work post-publish.

Free vs Pro

The AI Summary Carousel is a premium widget. Here's what each plan gives you:

• Free ($0/month) — Widget preview available, watermark shown. The AI summary requires a Pro account as it uses server-side AI processing.
• Pro ($9/month) — Full AI summary, no watermark, daily review sync, all widget types, priority support. The right plan for professional Framer projects and client sites.
• Enterprise ($30/month) — Unlimited views, dedicated support, advanced analytics. For agencies and high-traffic Framer sites.

For Framer freelancers and agencies: Pro at $9/month is the clear choice. The watermark removal alone makes it non-negotiable for client work, and the AI summary is the entire point of this widget.

Common Questions

Does the AI summary work straight away?

Yes, as long as you have an active Pro account and your business has Google reviews. RevuKit generates the summary during onboarding and caches it immediately. It's available the first time you preview the widget.

Will the animations slow down my Framer site?

No. All animations run on the GPU compositor — CSS transforms and custom properties only. There are no JavaScript layout reads during animation frames. The widget bundle is loaded asynchronously from RevuKit's CDN and doesn't block initial page rendering.

Can I use this alongside other RevuKit widgets on the same Framer page?

Yes. Each widget instance is independent. A common pattern is the AI Summary Carousel as a hero-section anchor widget, with a Compact Badge in the navigation bar for persistent credibility across the whole page.

Does the 3D tilt work on mobile?

The tilt uses pointer events, so on touch devices it activates on touch rather than hover. It's intentionally more subtle on touch — the card tilts briefly on tap. The word-reveal and aurora animations are fully active on mobile.

What if my reviews haven't synced yet?

The widget handles this gracefully — it shows a skeleton loading state while review data is fetched, then transitions smoothly to the full widget. Pro accounts sync every 24 hours automatically. You can also trigger a manual sync from your RevuKit account dashboard.

Start Using It Today

The AI Summary Carousel is the most ambitious widget RevuKit has shipped. For Framer sites that already invest in high-quality design, it's the review widget that matches that standard — not a bolt-on, but a deliberate section with genuine visual craft.

To add it to your site today:

1. Install the RevuKit plugin from the Framer marketplace
2. Connect your Google Business Profile
3. Select AI Summary Carousel
4. Customise and add to canvas
5. Publish

Your AI summary is waiting.

Get the RevuKit plugin for Framer →

Questions about the AI Summary Carousel or the RevuKit Framer plugin? Email support@revukit.com and we'll help you get it set up.