Reels Feed

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

Installation

$ pnpm dlx 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.

Props12

Prop	Type	Default
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	number1 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.

accountstring
Account name shown in the story row and reel.
Default"remocn"
storiesReelsStory[]
Story frames, each with an optional image `src`.
Default[]
reelSrcstring
Image URL shown as the reel. Omit for built-in art.
pollQuestionstring
Question shown on the poll sticker.
Default"Shipping a launch video this week?"
pollOptions[string, string]
The two poll answers.
Default["Yes, this week", "Not yet"]
likes[string, string]
Like count before and after the double-tap.
Default["12.4K", "12.5K"]
accentstring
Accent color.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
lines[string, string, string]
Three headlines, one per chapter: Story, Poll, Reel.
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.