Rating Laurel

A laurel wreath frames a 4.96 rating above category scores and gliding review cards

Installation

$ pnpm dlx shadcn@latest add @remocn/rating-laurel

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RatingLaurel } from "@/components/remocn/rating-laurel";
 
const RatingLaurelScene = () => (
  <RatingLaurel
    rating={4.9}
    title="Loved by builders"
    subtitle="Rated in the **top 5%** of launch tools"
    reviewCount={298}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RatingLaurel"
    component={RatingLaurelScene}
    durationInFrames={270}
    fps={30}
    width={1280}
    height={720}
  />
);

A laurel draws around a rolling rating number with a title and a subtitle (wrap words in ** for emphasis). Category score chips appear, review cards fade up and glide sideways, and a "Show all reviews" button closes the beat. Pass reviews, categories and reviewCount; device picks a web card or a phone frame (portrait always uses phone). Ships light and dark via theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
rating	number4.96 The headline rating, shown to two decimals.
title	string"Loved by builders" Heading under the wreath.
subtitle	string"remocn is in the top 5% of launch tools, based on ratings, reviews, and reliability" Supporting line; wrap words in ** for bold.
reviews	RatingReview[]DEFAULT_REVIEWS Review cards: quote, name, city, optional date and hue.
reviewCount	number298 Review count shown in the "Show all reviews" button.
categories	RatingCategory[]DEFAULT_CATEGORIES Category scores, each with label, score and icon.
device	"web" \| "phone""web" Show the layout as a web card or a phone frame.
accent	string"#3B5BFD" Color of the call-to-action button.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"light" \| "dark""light" Color scheme. Ships light and dark.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.

ratingnumber
The headline rating, shown to two decimals.
Default4.96
titlestring
Heading under the wreath.
Default"Loved by builders"
subtitlestring
Supporting line; wrap words in ** for bold.
Default"remocn is in the **top 5%** of launch tools, based on ratings, reviews, and reliability"
reviewsRatingReview[]
Review cards: quote, name, city, optional date and hue.
DefaultDEFAULT_REVIEWS
reviewCountnumber
Review count shown in the "Show all reviews" button.
Default298
categoriesRatingCategory[]
Category scores, each with label, score and icon.
DefaultDEFAULT_CATEGORIES
device"web" | "phone"
Show the layout as a web card or a phone frame.
Default"web"
accentstring
Color of the call-to-action button.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.