# X Follow Card
URL: https://remocn.dev/docs/social/x-follow-card

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

- Install: `npx shadcn@latest add @remocn/x-follow-card`
- Vibe: social
- Natural length: 165f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/x-follow-card
```

> **Note**
>
> 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:

```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>
```

## 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.

## Use when
- Showcasing a single X profile with the recognizable click-to-Follow payoff as the action beat.
- A social-proof or creator-intro scene needs one branded profile card with the cursor interaction.
- You want an offline-safe card (gradient avatar fallback) without wiring real image URLs.

## Don't use when
- You're aggregating follower growth or notifications rather than one profile — use `x-followers-overview`.
- The brand is GitHub, not X — use `github-stars`.
- You need a generic testimonial/quote card, not an X profile — compose a plain card.