Split About with Gradient Strips

import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { Grain } from "@/components/texture/grain"

// The copy: change text here, not in the markup.
const COPY = {
  title: "How the registry grows",
} as const

const PARAGRAPHS = [
  "The registry deploys on a schedule, not in bursts. New blocks land weekly, each reviewed against the same tokens and the same rules, so the collection compounds instead of sprawling.",
  "Growth is apportioned to support the people already building on it: every addition has to make the existing installs better, not just bigger.",
] as const

type Strip = {
  top: number
  black: string
  deep: string
  mid: string
  ledge: string
}

const STRIPS: Strip[] = [
  {
    top: 62,
    black: "oklch(0.07 0.02 260)",
    deep: "oklch(0.18 0.09 270)",
    mid: "oklch(0.32 0.10 250)",
    ledge: "oklch(0.96 0.02 250)",
  },
  {
    top: 55,
    black: "oklch(0.06 0.02 258)",
    deep: "oklch(0.35 0.15 260)",
    mid: "oklch(0.62 0.16 250)",
    ledge: "oklch(0.96 0.02 250)",
  },
  {
    top: 48,
    black: "oklch(0.06 0.02 278)",
    deep: "oklch(0.25 0.09 278)",
    mid: "oklch(0.50 0.14 276)",
    ledge: "oklch(0.96 0.02 276)",
  },
  {
    top: 41,
    black: "oklch(0.06 0.02 290)",
    deep: "oklch(0.33 0.12 290)",
    mid: "oklch(0.55 0.20 300)",
    ledge: "oklch(0.96 0.02 300)",
  },
  {
    top: 34,
    black: "oklch(0.06 0.02 320)",
    deep: "oklch(0.28 0.11 335)",
    mid: "oklch(0.50 0.22 320)",
    ledge: "oklch(0.96 0.02 320)",
  },
  {
    top: 27,
    black: "oklch(0.06 0.02 335)",
    deep: "oklch(0.24 0.10 338)",
    mid: "oklch(0.65 0.25 330)",
    ledge: "oklch(0.96 0.02 330)",
  },
  {
    top: 21,
    black: "oklch(0.06 0.02 350)",
    deep: "oklch(0.26 0.10 345)",
    mid: "oklch(0.70 0.22 350)",
    ledge: "oklch(0.96 0.02 350)",
  },
  {
    top: 15,
    black: "oklch(0.06 0.02 10)",
    deep: "oklch(0.30 0.12 15)",
    mid: "oklch(0.72 0.20 10)",
    ledge: "oklch(0.96 0.02 10)",
  },
  {
    top: 10,
    black: "oklch(0.06 0.02 30)",
    deep: "oklch(0.32 0.13 20)",
    mid: "oklch(0.74 0.135 38)",
    ledge: "oklch(0.96 0.02 38)",
  },
]

function stripPaint({ top, black, deep, mid, ledge }: Strip): string {
  const z = top - 3.6
  const fall = 100 - top
  const at = (n: number) => `${n.toFixed(2)}%`
  const stops = [
    `${black} 0%`,
    `${black} ${at(z * 0.32)}`,
    `${deep} ${at(z)}`,
    `${ledge} ${at(z)}`,
    `${ledge} ${at(z + 0.5)}`,
    `${deep} ${at(z + 0.5)}`,
    `${deep} ${at(z + 1.1)}`,
    `${ledge} ${at(z + 1.1)}`,
    `${ledge} ${at(z + 1.6)}`,
    `${deep} ${at(z + 1.6)}`,
    `${deep} ${at(z + 2.25)}`,
    `${ledge} ${at(z + 2.25)}`,
    `${ledge} ${at(z + 2.8)}`,
    `${deep} ${at(z + 2.8)}`,
    `${deep} ${at(top)}`,
    `${ledge} ${at(top)}`,
    `${ledge} ${at(top + 2.4)}`,
    `${mid} ${at(top + 2.4 + fall * 0.14)}`,
    `${deep} ${at(top + 2.4 + fall * 0.55)}`,
    `${black} 100%`,
  ]
  return `linear-gradient(180deg in oklab, ${stops.join(", ")})`
}

// The art column bleeds, so the section padding lives on the text column.
export default function About04() {
  return (
    <section className="dark grid bg-background text-foreground lg:grid-cols-2">
      <Section className="flex flex-col justify-center">
        <SectionHeader size="sm">
          <SectionTitleGroup>
            <Heading size="lg">{COPY.title}</Heading>
          </SectionTitleGroup>
          <SectionDescription render={<div />} className="grid gap-6">
            {PARAGRAPHS.map((text) => (
              <p key={text}>{text}</p>
            ))}
          </SectionDescription>
        </SectionHeader>
      </Section>

      <figure
        aria-hidden="true"
        className="relative isolate h-110 overflow-hidden lg:h-auto lg:min-h-160"
      >
        <span className="absolute inset-0 flex">
          {STRIPS.map((strip, i) => (
            <span
              key={i}
              className="block flex-1"
              style={{ background: stripPaint(strip) }}
            />
          ))}
        </span>
        <Grain variant="sandpaper" opacity={0.85} isolated={false} />
      </figure>
    </section>
  )
}

pnpm dlx shadcn add @01orbital/about-04

npx shadcn add @01orbital/about-04

yarn shadcn add @01orbital/about-04

bunx --bun shadcn add @01orbital/about-04