Review Section

A high-converting Review / Testimonial website section featuring a 3D WebGL rotating background globe marquee or an interactive 3D stacked portrait carousel with smooth rolling motion and arrow navigation.

Designed to showcase client feedback, agency trust signals, and social proof with maximum visual impact and dynamic theme color integration.

Testimonial Loom Pro (Envelope Carousel)

4-Stage Envelope Choreographyvariant"testimonial-loom": opens the 3D top envelope flap, extracts the ruled testimonial letter card upward out of the pocket, and settles it onto the front of the envelope with a rubber postmark and mini-envelope thumbnail selector.

Active Color

Marquee Duration (Seconds)100

UpDown Vertical Marquee

Featuresup-down-vertical-marqueeUpDown Vertical Marquee: renders 4 infinite vertical marquee columns scrolling up and down with hover pause.

3D Stacked Cards Carousel with Rolling Motion & Arrows

Featuresstacked-carousel3D Stacked Carousel: renders 3 stacked portrait cards with smooth rolling rotation motion and arrow navigation.

Interactive Brand Logo Carousel

Featureslogo-carouselLogo Carousel: renders interactive company logo tabs with split testimonial quote card and author portrait.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Reviews

npx shadcn@latest add @algorize-ui/reviews

components/custom/blocks/ReviewsBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Reviews to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

half-stars is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/half-stars

Features

Discover the key capabilities of the ReviewsBlock component:

UpDown Vertical Marquee: 4 infinite scrolling columns moving continuously (Column 1 Up, Column 2 Down, Column 3 Up, Column 4 Down) with hover-to-pause interaction.
3D Stacked Portrait Carousel: Interactive 3-card stacked portrait layout with spring-eased CSS transitions, rolling 3D card rotation, and circular arrow buttons.
Interactive Brand Logo Carousel: Split card layout with company logo tabs, quote transition animations, author portrait, indicator dots, and round navigation controls.
Modern Review Cards: Avatar image, name, role, 5-star rating, and clean typography in a modern card container.
Dynamic Site Theme Accent: Automatically binds to site CSS variables (var(--primary)) with live color preset support.
Full Customizability: Pass custom variant, title, subtitle, reviews data array, and glowColor accents.

Props Reference

Prop	Type	Default	Description
`variant`	`"testimonial-loom" \| "up-down-vertical-marquee" \| "stacked-carousel" \| "logo-carousel"`	`"up-down-vertical-marquee"`	Determines the visual review layout style (4-stage interactive envelope loom, infinite up/down vertical marquee, 3D stacked cards, or brand logo carousel).
`title`	`string`	`"Loved by Teams Worldwide"`	Main headline text rendered at the top of the reviews section.
`subtitle`	`string`	`"See what founders, designers, and engineers are saying..."`	Supporting paragraph description displayed below the title.
`reviews`	`ReviewItem[]`	`DEFAULT_REVIEWS`	Array of review objects with `id`, `name`, `role`, `avatar`, `rating`, and `content`.
`autoSlide`	`boolean`	`true`	Enables automatic card sliding for stacked carousel variants.
`autoSlideInterval`	`number`	`5000`	Interval duration in milliseconds for auto-sliding stacked cards.
`className`	`string`	`undefined`	Additional custom Tailwind CSS class names applied to the container.