# Rating Laurel
URL: https://remocn.dev/docs/social/rating-laurel

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

- Install: `npx shadcn@latest add @remocn/rating-laurel`
- Vibe: premium
- Natural length: 250f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rating` | `number` | `4.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` | `number` | `298` | 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` | `number` | `1` | 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. |

## Use when
- Social proof beat for an app or tool: one headline rating with a wreath and short review quotes.
- Showing category scores (docs, motion, setup, support, value) next to written reviews.
- Closing a launch video with an award-style trust moment before the call to action.

## Don't use when
- You want pile-up social post cards rather than a rating — use `testimonial-stack`.
- The proof is several stats counting up, not reviews — use `stat-sequence`.
- The proof is a repository star count — use `github-stars`.