Split Intro & Animated Timeline

About27: Split Intro & Animated Timeline

Left column carries an intro (badge, heading, description, and photo); right column is a vertical numbered timeline where each milestone animates into view independently as it scrolls into the viewport. Built for startup "our journey" narratives with a handful of dated milestones.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/about27?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/about27?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/about27.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

The installed file exports about27Demo alongside the block: the exact props behind the preview above. Spread it to get a working about section in one line.

import { About27, about27Demo } from "@/components/beste/block/about27";

export default function AboutPage() {
  return <About27 {...about27Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { About27 } from "@/components/beste/block/about27";

export default function AboutPage() {
  return (
    <About27
      badge={{ label: "Our Journey", variant: "outline" }}
      heading="From a garage to the global stage"
      description="What started as two people and a laptop has grown into a global platform."
      image={{
        src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=900&h=500&fit=crop",
        alt: "Team working together in an office",
      }}
      milestones={[
        { year: "2016", title: "The spark", description: "Founded in a shared apartment." },
        { year: "2017", title: "First 1,000 users", description: "Launched on Product Hunt." },
        { year: "2019", title: "Series A", description: "Raised $12M to expand the team." },
      ]}
      buttons={[{ label: "Read Our Story", href: "https://beste.co" }]}
    />
  );
}

Props

type MilestoneItem = { year: string; title: string; description: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• Each timeline row is its own TimelineItem component with its own IntersectionObserver (threshold 0.2); every milestone reveals independently as it individually scrolls into view, rather than one observer staggering the whole list on a single trigger.
• Once a milestone becomes visible the observer disconnects immediately, so the reveal animation (numbered circle scaling from scale-50 opacity-0 to full size, content sliding up from translate-y-4 opacity-0) plays exactly once per row and never re-triggers.
• The content block's transition carries a fixed 100ms inline transitionDelay, so the text always finishes its fade-and-rise slightly after the circle has scaled in.
• Milestone numbers are 1-indexed display labels inside the circle (index + 1), independent of the year field, which is shown separately as a small primary-colored label above the title.
• Each row connects to the next with a w-px vertical line (bg-border) that grows with flex-1; the wrapping row loses its bottom padding on the final item (last:pb-0), shortening the trailing line since there is no further row for it to reach.