Isometric Reviews

Isometric Reviews — a review summary section: your average score, rating bars that filter the reviews, and review cards standing up on a tilted floor.

A Framer code component. Isometric Reviews is a review summary section: the average score, a star row, the total count and a five-to-one rating breakdown are worked out from your review list. Each rating bar is also a filter, so clicking 5 stars sinks every other review into the tilted floor while the matching cards slide into line and the middle card stands up to be read. Previous and next buttons, drag or swipe, and arrow keys move along the floor; the motion is CSS transitions only, and nothing runs while the section sits still. One file, no plugins, no external libraries.

What you get

• Reviews (up to 24): name, role, rating 1 to 5, text, optional photo (initials when empty), source label

• Content: heading, subheading, total line wording, All button text, which rating the section starts on

• Floor: card width, gap, tilt, turn, floor height

• Motion: transition length, autoplay on or off and its interval

• Look: background, floor, card, text, muted, accent and line colours, corner radius; font and text size

• Labels: every screen-reader string and button name

How it behaves

• Bars are buttons with a pressed state and a spoken name such as Show 5-star reviews, 63%, and one polite message says how many reviews are showing.

• Swipes are locked to the horizontal axis, so a vertical swipe on a phone still scrolls the page; the two columns stack on narrow frames.

• Reduced motion switches every move to an instant change, and optional autoplay stops on hover, focus, off screen, a hidden tab or a visitor's first choice.

Limits

The summary is computed from the reviews you enter in the panel (up to 24), not from a CMS collection or a review service; cards lying flat clamp their text to four lines, the standing card shows all of it in a scroll area; tested in Chromium only so far.

Requirements

Any Framer project. No plugins, no external libraries. Free updates through this page.