# Echo Reel: Audiences

> A video tool's hero that cycles who it's made for. It holds while you point at it and stops once you pick a word.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/echo-reel-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/echo-reel-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/echo-reel-demo/light.png
- Registry item: https://keyframeui.com/r/echo-reel-demo.json
- Categories: text, hero, motion
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/echo-reel-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/echo-reel.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/echo-reel#echo-reel-demo

## Files

### `registry/demos/echo-reel-demo.tsx`

```tsx
import { EchoReel } from "@/components/ui/echo-reel";

const AUDIENCES = ["Creators", "Podcasters", "Studios", "Brands"];

export function EchoReelDemo() {
  return (
    <section className="w-full max-w-4xl overflow-hidden rounded-3xl border border-[#0b0b0d]/10 bg-white px-5 pt-10 pb-12 text-[#0b0b0d] sm:px-10 sm:pt-12 dark:border-white/10 dark:bg-[#05060d] dark:text-[#f4f4f6]">
      <h2 className="sr-only">Cutline is made for creators, podcasters, studios and brands</h2>
      <p aria-hidden className="text-center text-sm font-semibold tracking-tight sm:text-base">
        Cutline is made for
      </p>
      <EchoReel words={AUDIENCES} className="mt-2 text-[#2f3cff] dark:text-[#7b86ff]" />
      <p className="mx-auto mt-5 max-w-[22rem] text-center text-[15px] leading-relaxed text-[#0b0b0d]/65 dark:text-[#f4f4f6]/65">
        One long recording in. Clips, captions and dubs for every channel out, cut while you sleep.
      </p>
      <div className="mt-6 flex justify-center">
        <a
          href="#start"
          className="rounded-full bg-[#2f3cff] px-5 py-2.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-[#1f2be6] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2f3cff] dark:bg-[#5b68ff] dark:hover:bg-[#6d79ff] dark:focus-visible:outline-[#7b86ff]"
        >
          Start cutting free
        </a>
      </div>
    </section>
  );
}
```