About the Rating Breakdown animation

The review overlay for a product page or an unboxing, where the spread matters as much as the average. The bars are a distribution rather than a meter for the score, so set them to the real breakdown. An unbroken five-star wall reads as invented. Put the sample size in the count line: 4.9 from 2,318 is an argument, 4.9 on its own is a number.

Where it fits

  • As the review overlay on a product page or an unboxing.
  • In an ad, where the spread matters as much as the average.
  • On a comparison, one breakdown per product.

Filling it in

The bars are a distribution rather than a meter for the score, so set them in the source to the real breakdown. An unbroken five-star wall reads as invented. Put the sample size in the count line: 4.9 from 2,318 reviews is an argument, 4.9 on its own is a number. The score counter climbs.

Format and timing

Rating Breakdown is built at 640 × 360, a 16:9 landscape frame, the shape of a YouTube video, a stream layout and most editing timelines, and runs 3.2 seconds at 30 frames per second. It arrives in 1.1 seconds, holds for 0.9 and clears in 1.1, so cue it a beat before the moment it labels. Export it as an MP4 for a timeline or a feed, a GIF where video will not embed, or a MOV with an alpha channel to lay it over footage with nothing behind it. Renders go up to 4K, and the free plan exports at 720p with a watermark.

Who reaches for this

What it gets used for

What you can edit

  • Scorecounter
  • Review counttext
  • Barscolor

Questions about Rating Breakdown

Can I set the five bar lengths?

They are authored in the source rather than exposed as fields, so edit the Lottie to match your distribution. The score and the count are fields.

Why show the low-star bars at all?

Because a spread with a few two- and three-star reviews reads as real, and a wall of fives reads as bought. The small bars are what make the big one believable.

More commerce animations