Testimonial Stack

Social-post testimonial cards fly in one by one and pile up, with a highlighted line on each

Installation

$ pnpm dlx shadcn@latest add @remocn/testimonial-stack

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TestimonialStack } from "@/components/remocn/testimonial-stack";
 
const TestimonialStackScene = () => (
  <TestimonialStack
    quotes={[
      {
        text: "We shipped our launch video in an afternoon.",
        highlight: "in an afternoon",
        name: "Maya Chen",
        role: "Founder, Kitebase",
        handle: "@mayachen",
        source: "x",
      },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TestimonialStack"
    component={TestimonialStackScene}
    durationInFrames={236}
    fps={30}
    width={1280}
    height={720}
  />
);

Each quote card slides in from alternating sides and lands on a growing, slightly rotated pile; the highlighted phrase is marked inside the text. With ending="fan" the pile then spreads into a grid under a title (the fan adds about 60 frames). Pass quotes with name, role and optional handle, stars and highlight. 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.

Props9

Prop	Type	Default
quotes	TestimonialQuote[]DEFAULT_QUOTES Quote cards: text, name, role, plus optional highlight, handle, stars, date, source.
ending	"pile" \| "fan""pile" How the stack ends: stay as a pile, or fan out into a grid.
title	string"What builders said after launch week" Heading shown over the grid when `ending` is "fan".
theme	"light" \| "dark""light" Color scheme. Ships light and dark.
speed	number1 Playback speed multiplier for the whole timeline.
framesPerQuote	number50 Frames between each card landing.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.
accent	string— Accepted for API consistency; the color comes from the ground.

quotesTestimonialQuote[]
Quote cards: text, name, role, plus optional highlight, handle, stars, date, source.
DefaultDEFAULT_QUOTES
ending"pile" | "fan"
How the stack ends: stay as a pile, or fan out into a grid.
Default"pile"
titlestring
Heading shown over the grid when `ending` is "fan".
Default"What builders said after launch week"
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
speednumber
Playback speed multiplier for the whole timeline.
Default1
framesPerQuotenumber
Frames between each card landing.
Default50
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
accentstring
Accepted for API consistency; the color comes from the ground.