Maya Chen

@mayabuildsMar 4

Swapped our hand-rolled modals for @tweenly in an afternoon. The springs just feel right, and the reduced-motion handling is already done. #react

Tom Becker

@tbeckerFeb 25

Our landing page conversion went up after we added the testimonial wall. Correlation, causation, whatever. It looks sick. #buildinpublic

Controls

columns

scroll

speedx

alternatepauseOnHoverfade

heightpx

gappx

variant

Tweet Card

X-style post cards rendered from data, no API calls. Highlighted mentions, media grid, compact stats and a like pop, plus a scrolling testimonial wall.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/tweet-card

import { TweetGrid } from "@/components/tweet-card"

const tweets = [
  {
    author: { name: "Maya Chen", handle: "mayabuilds", verified: true },
    content: "Swapped our hand-rolled modals for @tweenly in an afternoon. The springs just feel right. #react",
    date: "Mar 4",
    stats: { replies: 24, reposts: 61, likes: 1240, views: 48200 },
    href: "https://x.com/mayabuilds/status/1",
  },
  // ...
]

// A single card works on its own too:
// import { TweetCard } from "@/components/tweet-card"
// <TweetCard {...tweets[0]} variant="compact" />

export function Demo() {
  return (
    <TweetGrid scroll tweets={tweets} />
  )
}

Updates live as you change the controls. Only non-default props are included.