X Follow Card

Animated X profile follow card with spring bounce-in, staggered blur-in, and cursor-driven Follow transition

Installation

$ pnpm dlx shadcn@latest add @remocn/x-follow-card

Usage

Standalone in a Remotion <Composition> — uses sample profile data so the video renders immediately after install:

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { XFollowCard } from "@/components/remocn/x-follow-card";
 
const XFollowCardScene = () => (
  <XFollowCard
    name="Co-Lab"
    handle="co-lab"
    accentColor="#1d9bf0"
    orientation="horizontal"
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="XFollowCard"
    component={XFollowCardScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

Timeline: card bounces in (0–25), layers blur in staggered (20–70), cursor travels to the Follow button (75–110), clicks and transitions to "Following" (110), then holds (130–165).

With Backdrop

Renders transparent and single-theme — supply the background via Backdrop; edit the copied file to re-theme:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { XFollowCard } from "@/components/remocn/x-follow-card";
 
<Backdrop fill={{ type: "color", value: "#f5f7f9" }}>
  <XFollowCard name="Co-Lab" handle="co-lab" accentColor="#1d9bf0" orientation="horizontal" />
</Backdrop>

Props12

Prop	Type	Default
name	string"Dmitri K" Display name shown above the handle
handle	string"kapishdima" X username (without the @)
bio	string"Building video tools with Remotion" Multi-line profile description
location	string"Earth" Location shown in meta row (optional)
website	string"remocn.dev" Website URL shown in meta row (optional)
joined	string"Joined January 2023" Account creation date shown in meta row
avatarUrl	string"" Profile picture URL — defaults to gradient fallback if empty
coverUrl	string"" Header image URL — defaults to accent-color gradient if empty
verified	booleantrue Whether to show X verification badge next to name
accentColor	string"#1d9bf0" X brand blue — used for button fill, badge, and cursor ripple
orientation	"horizontal" \| "vertical""horizontal" Layout orientation — horizontal is 1280×720 (16:9), vertical is 720×1280 (9:16) letterboxed
speed	number1 Animation speed multiplier — minimum 1 (prevents click frame loss)

namestring
Display name shown above the handle
Default"Dmitri K"
handlestring
X username (without the @)
Default"kapishdima"
biostring
Multi-line profile description
Default"Building video tools with Remotion"
locationstring
Location shown in meta row (optional)
Default"Earth"
websitestring
Website URL shown in meta row (optional)
Default"remocn.dev"
joinedstring
Account creation date shown in meta row
Default"Joined January 2023"
avatarUrlstring
Profile picture URL — defaults to gradient fallback if empty
Default""
coverUrlstring
Header image URL — defaults to accent-color gradient if empty
Default""
verifiedboolean
Whether to show X verification badge next to name
Defaulttrue
accentColorstring
X brand blue — used for button fill, badge, and cursor ripple
Default"#1d9bf0"
orientation"horizontal" | "vertical"
Layout orientation — horizontal is 1280×720 (16:9), vertical is 720×1280 (9:16) letterboxed
Default"horizontal"
speednumber
Animation speed multiplier — minimum 1 (prevents click frame loss)
Default1

Notes

Offline rendering: avatarUrl and coverUrl default to empty strings, which render gradient fallbacks. No network requests are made, so the preview works offline and MP4 export requires no CORS setup.
Sample post: The hardcoded post at the bottom shows a representative engagement example. In v1, post content is not customizable.
Button state: The Follow button transitions from solid accent-color to "Following" (white bg, gray border, black text) when the cursor clicks at frame ~110.