Roadmap card

A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.

Cards, press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/roadmap-card.tsx https://motion-brew.com/r/roadmap-card.tsx

One self contained file for React and Tailwind CSS: roadmap-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { RoadmapCard } from "@/components/roadmap-card";

export default function Page() {
  return (
    <RoadmapCard
      phases={[
        {
          title: "Discovery",
          body: "Talk to customers.",
          focus: ["Twelve customer calls"],
        },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"Product roadmap"	Small label at the top
phases	{ title; body; focus? }[]	Discovery to General availability	The phases; focus is a short list of milestones
defaultPhase	number	2	Phase shown first
autoplay	number	5	Seconds per phase on its own; 0 turns it off
onChange	(index) => void		Called when the phase changes
className	string		Placement

More cards

Contour feature card: A browser window in front of a live topographic map.
Live gradient card: A metric on a drifting mesh gradient, with a dot matrix number that morphs dot by dot.
Integration hub: App tiles wired into one hub, with packets of dots flowing in along every wire.
Pixel feature card: A phone in front of dithered pixel clouds that drift, shimmer and light up under the cursor.

All animated react card components