# Echo Reel Pricing
> A pricing section where the plan picker is one giant word. Click the plan printed above or below, or press ↑ ↓, and the reel turns it into the middle and inks it in, while the card beside it rolls the price and the monthly photo count with an Odometer. A monthly or yearly switch rolls the price too.
A Pricing Section block from KeyframeUI: a whole landing-page section built around the Echo Reel and Odometer components, free to install as source with the shadcn CLI. Built with React, Tailwind CSS and Motion.
- Live preview: https://keyframeui.com/blocks/pricing-sections/echo-reel-pricing
- Category: Pricing Sections
- Built with: [Echo Reel](https://keyframeui.com/components/echo-reel.md), [Odometer](https://keyframeui.com/components/odometer.md)
- npm dependencies: clsx, tailwind-merge, motion
## Installation
Register the @keyframeui registry in `components.json` once per project:
```json
{
"registries": {
"@keyframeui": "https://keyframeui.com/r/{name}.json"
}
}
```
Then add the block. It lands in `components/echo-reel-pricing.tsx`, and the CLI also adds the components it's built with (`components/ui/echo-reel.tsx`, `components/ui/odometer.tsx`) and `lib/utils.ts`, and installs the npm dependencies:
```bash
npx shadcn@latest add @keyframeui/echo-reel-pricing
```
Or install by URL, without registering the namespace:
```bash
npx shadcn@latest add https://keyframeui.com/r/echo-reel-pricing.json
```
## Usage
Put it where the section goes. The copy, links and data sit in constants at the top of the file; edit them there.
```tsx
import { EchoReelPricing } from "@/components/echo-reel-pricing";
export default function Page() {
return ;
}
```
## Source
```tsx title="components/echo-reel-pricing.tsx"
"use client";
import * as React from "react";
import { EchoReel } from "@/components/ui/echo-reel";
import { Odometer } from "@/components/ui/odometer";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the section yours: the
* palette, the plans and the copy. The giant word is the plan
* picker: click the word above or below, or focus it and use
* the arrow keys, and the card beside it rolls to that plan.
* ─────────────────────────────────────────────────────────── */
const PALETTE = {
light: { paper: "#ffffff", ink: "#0b0b10", accent: "#5b2bff", card: "#f6f5fb" },
dark: { paper: "#07070c", ink: "#f5f5f7", accent: "#9b83ff", card: "#111018" },
};
const EYEBROW = "Pricing";
const HEADLINE = "Pay for photos, not seats.";
const HINT = "Pick a plan on the reel, or focus it and press ↑ ↓";
const YEARLY_SAVING = 0.2;
const PLANS = [
{
name: "Starter",
monthly: 19,
photos: 60,
blurb: "For a shop with a few new products a month.",
features: ["Cutouts and soft shadows", "Every marketplace crop", "Alt text in English", "Exports up to 2K", "Email support"],
cta: { label: "Start with Starter", href: "#starter" },
},
{
name: "Studio",
monthly: 79,
photos: 400,
blurb: "For brands shooting a full catalog every season.",
features: ["Everything in Starter", "Lifestyle scenes, lit to match", "12 colorways from one shot", "Alt text in 9 languages", "4K exports for print"],
cta: { label: "Try Studio free for 14 days", href: "#studio" },
},
{
name: "Brand",
monthly: 249,
photos: 2000,
blurb: "For teams feeding a store, ads and wholesale at once.",
features: ["Everything in Studio", "Your own trained look", "Bulk uploads from a folder", "Five seats, review links", "A shoot lead on Slack"],
cta: { label: "Talk to us about Brand", href: "#brand" },
},
];
/* ── Section ─────────────────────────────────────────────── */
const usd: Intl.NumberFormatOptions = { style: "currency", currency: "USD", maximumFractionDigits: 0 };
export function EchoReelPricing() {
const [plan, setPlan] = React.useState(1);
const [yearly, setYearly] = React.useState(true);
const current = PLANS[plan];
const price = Math.round(current.monthly * (yearly ? 1 - YEARLY_SAVING : 1));
return (