X Follow Card · remocn

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

Installing x-follow-card automatically pulls the cursor primitive as a dependency via registryDependencies. No additional install needed.

Usage

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

// 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:

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>

Props

Prop	Type	Default	Description
`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`	`boolean`	`true`	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`	`number`	`1`	Animation speed multiplier — minimum 1 (prevents click frame loss)

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.