# Features Big Numbered List — Tailwind Feature Section

> An editorial list with oversized serif numerals that rise through a mask on view; the hovered or focused row opens its note and a marker bar slides to it.

- Category: [Feature Sections](https://pixelpapa.com/components/features.md)
- Tags: features, editorial, serif, list, numbered
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/features/features-big-numbered-list

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/features-big-numbered-list.json"
```

The file is written to `components/pixelpapa/features-big-numbered-list.tsx`. To install manually, run `npm install lucide-react motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowUpRight } from "lucide-react";
import { motion } from "motion/react";
import { useState } from "react";
import { cn } from "@/lib/utils";

const ease = [0.22, 1, 0.36, 1] as const;

type Principle = { title: string; note: string; tag: string };

const defaultPrinciples: Principle[] = [
  {
    title: "Start with the argument",
    note: "Before any pixels, we write one page on why this brand deserves to exist. If the page is dull, the identity will be too.",
    tag: "Week 1",
  },
  {
    title: "Prototype in the real medium",
    note: "Packaging gets printed, sites get coded, signage gets taped to a wall. Decks hide the problems that matter.",
    tag: "Weeks 2–4",
  },
  {
    title: "One decision-maker in the room",
    note: "Committees average good ideas into safe ones. We ask for a single owner and we protect their time.",
    tag: "Always",
  },
  {
    title: "Ship in weeks, not seasons",
    note: "A typical engagement runs nine weeks. Momentum is a design tool and we use it deliberately.",
    tag: "9 weeks",
  },
  {
    title: "Leave the keys behind",
    note: "You get editable source files, a written system and a half-day handover, so your team never needs to call us to move a logo.",
    tag: "Handover",
  },
];

export default function FeaturesBigNumberedList({ principles = defaultPrinciples }: { principles?: Principle[] }) {
  const [active, setActive] = useState(0);

  return (
    <section className="w-full bg-background px-6 py-20 sm:py-28">
      <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[0.75fr_1.25fr] lg:gap-20">
        <div className="lg:sticky lg:top-24 lg:self-start">
          <p className="text-xs font-medium tracking-[0.2em] text-muted-foreground uppercase">Marlowe &amp; Finch · Method</p>
          <h2 className="mt-5 font-serif text-5xl leading-[1.05] text-balance text-foreground sm:text-6xl">
            Five habits behind every <em className="text-primary">identity</em> we ship
          </h2>
          <p className="mt-6 max-w-sm text-pretty text-muted-foreground">
            We are a studio of eleven. These are the rules that keep the work sharp and the invoices short.
          </p>
          <a
            href="#"
            className="mt-8 inline-flex items-center gap-1.5 border-b border-foreground pb-0.5 text-sm font-medium text-foreground transition-colors hover:border-primary hover:text-primary"
          >
            See the method in a case study <ArrowUpRight className="size-3.5" />
          </a>
        </div>

        <ol className="border-b border-border">
          {principles.map((p, i) => {
            const open = active === i;
            return (
              <li key={p.title} className="relative border-t border-border">
                {open && (
                  <motion.span
                    layoutId="features-big-numbered-list-marker"
                    aria-hidden
                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
                    className="absolute -top-px left-0 h-0.5 w-20 bg-primary sm:w-36"
                  />
                )}
                <button
                  aria-expanded={open}
                  onPointerEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  className="grid w-full grid-cols-[4.5rem_1fr] items-start gap-x-4 py-7 text-left outline-none focus-visible:bg-muted/50 sm:grid-cols-[9rem_1fr_auto] sm:gap-x-6"
                >
                  <motion.span initial="hidden" whileInView="shown" viewport={{ once: true, amount: 0.6 }} className="overflow-hidden">
                    <motion.span
                      variants={{ hidden: { y: "105%" }, shown: { y: 0 } }}
                      transition={{ duration: 0.8, delay: i * 0.07, ease }}
                      className={cn(
                        "block font-serif text-6xl leading-none tabular-nums transition-colors duration-500 sm:text-8xl",
                        open ? "text-primary italic" : "text-foreground/20",
                      )}
                    >
                      {String(i + 1).padStart(2, "0")}
                    </motion.span>
                  </motion.span>
                  <span className="pt-1 sm:pt-3">
                    <span
                      className={cn(
                        "block text-2xl font-medium tracking-tight transition-colors duration-300 sm:text-3xl",
                        open ? "text-foreground" : "text-muted-foreground",
                      )}
                    >
                      {p.title}
                    </span>
                    {/* grid-rows 0fr → 1fr gives a height transition without measuring. */}
                    <span className={cn("grid transition-[grid-template-rows,opacity] duration-500 ease-out", open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0")}>
                      <span className="overflow-hidden">
                        <span className="block max-w-md pt-3 leading-relaxed text-pretty text-muted-foreground">{p.note}</span>
                      </span>
                    </span>
                  </span>
                  <span
                    className={cn(
                      "col-start-2 mt-3 w-fit rounded-full border px-3 py-1 font-mono text-xs transition-colors duration-300 sm:col-start-3 sm:mt-4",
                      open ? "border-primary/40 bg-primary/10 text-primary" : "border-border text-muted-foreground",
                    )}
                  >
                    {p.tag}
                  </span>
                </button>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}
```

## AI prompt

```text
Add the "Features Big Numbered List" component from PixelPapa UI to this project.

What it is: An editorial list with oversized serif numerals that rise through a mask on view; the hovered or focused row opens its note and a marker bar slides to it.
Category: Feature Sections. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/features-big-numbered-list.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/features-big-numbered-list.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/features-big-numbered-list" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More feature sections

- [Features Accordion Visual](https://pixelpapa.com/components/features/features-accordion-visual.md) (Pro): An accordion on the left steers a product mock on the right: a spring-driven focus frame glides to the matching region while the rest dims.
- [Features Alternating Rows](https://pixelpapa.com/components/features/features-alternating-rows.md) (Pro): Three text-and-illustration rows that swap sides; each drawing animates in on view and its floating layer drifts with scroll.
- [Features Animated Workflow](https://pixelpapa.com/components/features/features-animated-workflow.md) (Pro): A four-stage pipeline where an order token hops card to card with a shared-layout spring, leaving a completed result behind at every stage.
- [Features Code And Result](https://pixelpapa.com/components/features/features-code-and-result.md) (Pro): A code snippet with clickable values beside a live preview: cycle a prop in the code and the toast on the right springs in with the new tone and position.
- [Features Comparison Table](https://pixelpapa.com/components/features/features-comparison-table.md): An us-versus-them table with a lifted highlight column; checks pop and draw their stroke row by row as the table scrolls in.
- [Features Icon Grid Hover](https://pixelpapa.com/components/features/features-icon-grid-hover.md): A hairline grid of six features: grid lines glow under the cursor, a beam laps the hovered cell's border and a detail row slides up.