FreeMarketing

Idea Launch Timeline

Use this component in founder landing pages, proposal decks, agency pages, or onboarding flows where you need to make a product delivery process feel clear and credible.

ReactTailwind CSSMotion

Launch Path

Idea to MVP

21 days

Scope

Validate the idea

Shape the core workflows before design starts.

Design

Prototype the product

Turn user journeys into polished screens.

Build

Ship the MVP

Move from sprint board to production release.

Overview

A compact animated timeline card for showing how an idea moves from scope to shipped MVP.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<IdeaLaunchTimeline />

Idea Launch Timeline.tsx

tsx

"use client";

import { motion } from "framer-motion";

const launchSteps = [
  {
    label: "Scope",
    title: "Validate the idea",
    desc: "Shape the core workflows before design starts.",
    color: "bg-lime-400",
  },
  {
    label: "Design",
    title: "Prototype the product",
    desc: "Turn user journeys into polished screens.",
    color: "bg-sky-400",
  },
  {
    label: "Build",
    title: "Ship the MVP",
    desc: "Move from sprint board to production release.",
    color: "bg-rose-400",
  },
];

export function IdeaLaunchTimeline() {
  return (
    <div className="relative overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-5 text-white">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-lime-300/70 to-transparent" />
      <div className="absolute -right-16 -top-16 h-36 w-36 rounded-full bg-lime-300/10 blur-3xl" />

      <div className="mb-5 flex items-center justify-between">
        <div>
          <p className="text-xs font-medium uppercase tracking-[0.22em] text-lime-300">
            Launch Path
          </p>
          <h3 className="mt-1 text-xl font-bold">Idea to MVP</h3>
        </div>
        <div className="rounded-full border border-lime-300/25 bg-lime-300/10 px-3 py-1 text-xs font-semibold text-lime-200">
          21 days
        </div>
      </div>

      <div className="relative space-y-3">
        <div className="absolute bottom-5 left-[17px] top-5 w-px bg-white/10" />
        {launchSteps.map((step, index) => (
          <motion.div
            key={step.label}
            initial={{ opacity: 0, x: -12 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.08, duration: 0.35 }}
            className="relative flex gap-3 rounded-lg border border-white/10 bg-white/[0.04] p-3"
          >
            <div
              className={"relative z-10 mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-black text-zinc-950 shadow-lg shadow-black/20 " + step.color}
            >
              {index + 1}
            </div>
            <div className="min-w-0">
              <p className="text-xs font-semibold text-zinc-400">{step.label}</p>
              <p className="mt-0.5 text-sm font-semibold">{step.title}</p>
              <p className="mt-1 text-xs leading-relaxed text-zinc-400">
                {step.desc}
              </p>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
}