# Reels Feed
URL: https://remocn.dev/docs/social/reels-feed

A vertical phone feed opens a story, answers a poll, swipes to a reel and a double-tap heart bursts

- Install: `npx shadcn@latest add @remocn/reels-feed`
- Vibe: social
- Natural length: 280f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/reels-feed
```

## Usage

```tsx
// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { ReelsFeed } from "@/components/remocn/reels-feed";

const ReelsFeedScene = () => (
  <ReelsFeed
    account="yourbrand"
    stories={[{ src: staticFile("story-1.png") }, { src: staticFile("story-2.png") }]}
    reelSrc={staticFile("reel.png")}
    pollQuestion="Shipping this week?"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ReelsFeed"
    component={ReelsFeedScene}
    durationInFrames={300}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A phone frame rises in beside three chapter headlines (Story, Poll, Reel). A tap on a story ring opens up to three stories with progress bars, a poll vote is cast, then a swipe moves to a reel where a double-tap bursts a heart and the like count ticks from `likes[0]` to `likes[1]`. Pass your own `stories` and `reelSrc` image URLs (up to three stories) plus `pollQuestion`, `pollOptions` and `account`. Without images it draws built-in art. 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 |
|---|---|---|---|
| `account` | `string` | `"remocn"` | Account name shown in the story row and reel. |
| `stories` | `ReelsStory[]` | `[]` | Story frames, each with an optional image `src`. |
| `reelSrc` | `string` | — | Image URL shown as the reel. Omit for built-in art. |
| `pollQuestion` | `string` | `"Shipping a launch video this week?"` | Question shown on the poll sticker. |
| `pollOptions` | `[string, string]` | `["Yes, this week", "Not yet"]` | The two poll answers. |
| `likes` | `[string, string]` | `["12.4K", "12.5K"]` | Like count before and after the double-tap. |
| `accent` | `string` | `"#3B5BFD"` | Accent color. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"light" \| "dark"` | `"light"` | Color scheme. Ships light and dark. |
| `lines` | `[string, string, string]` | — | Three headlines, one per chapter: Story, Poll, Reel. |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the animated ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground shader parameters. |

## Use when
- A social-media launch beat showing your content in a stories-and-reels style phone feed.
- Demonstrating engagement: a poll answer, a swipe to a reel, then a double-tap like with the count ticking up.
- A vertical clip that wants chapter captions (Story, Poll, Reel) over a phone mockup.

## Don't use when
- You want several phone screens side by side — use `phone-trio`.
- The video is a single scrolling app screen — use `phone-scroll`.
- You want a swipeable card deck instead of a feed — use `swipe-deck`.