# Feature Section v6

> Centered headline with a uniform 2×2 grid of four feature cards—title and body on each tile over a full-bleed black-and-white Paper Warp (checks) shader background.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/feature-section-v6).

- Page, with a live preview: https://shadcn.exchange/r/uiception/feature-section-v6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/feature-section-v6-light-d63b1e3bb02b00ad.png
- Registry item: https://uiception.com/r/feature-section-v6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/feature-section-v6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@paper-design/shaders-react`, `geist`

## Files

### `registry/new-york/blocks/feature-section-v6/page.tsx`

```tsx
import FeatureSectionV6 from "./components/feature-section-v6"

export default function Page() {
  return <FeatureSectionV6 />
}
```

### `registry/new-york/blocks/feature-section-v6/components/feature-section-v6.tsx`

```tsx
import { GeistSans } from "geist/font/sans"

import FeatureGrid from "./feature-grid"

export default function FeatureSectionV6() {
  return (
    <section className={`${GeistSans.className} py-4 md:py-6 lg:py-8`}>
      <div className="mx-auto max-w-6xl px-4">
        <div className="flex flex-col items-center gap-6 text-center">
          <h2 className="max-w-2xl text-3xl tracking-tighter sm:text-4xl lg:text-5xl lg:leading-[1.15]">
            Stay ahead as things get more{" "}
            <span className="text-muted-foreground">complex</span>
          </h2>
     
          <p className="max-w-xl text-base leading-7 tracking-tight text-muted-foreground sm:text-lg sm:leading-8">
            As demands grow, the platform remains quick, intuitive, and seamlessly integrated.
          </p>
     
        </div>
      </div>

      <div className="mx-auto max-w-6xl px-4 pt-8 md:pt-10 lg:pt-12">
        <FeatureGrid />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/feature-section-v6/components/feature-grid.tsx`

```tsx
import { featureSectionItems } from "../lib/features"

import { FeatureSectionV6MeshBg } from "./feature-section-v6-mesh-bg"

import "../styles/feature-grid.css"

export default function FeatureGrid() {
  return (
    <ul className="m-0 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2">
      {featureSectionItems.map(({ id, title, description, shader }) => (
        <li key={id} className="flex min-w-0">
          <div className="fsv6-card relative flex w-full flex-1 flex-col overflow-hidden rounded-lg border border-border bg-[#0a0a0a] text-foreground motion-reduce:bg-[color-mix(in_oklab,var(--muted)_78%,var(--background)_22%)] lg:min-h-54">
            <FeatureSectionV6MeshBg {...shader} />
            <div
              className="fsv6-card-scrim pointer-events-none absolute inset-0 z-1 motion-reduce:hidden"
              aria-hidden
            />
            <div className="relative z-10 flex flex-col gap-3 p-[1.35rem] md:gap-3.5 md:p-6 lg:min-h-0 lg:flex-1">
              <h3 className="m-0 text-xl leading-[1.1] font-semibold tracking-[-0.03em] text-white motion-reduce:text-foreground/90 sm:text-[1.375rem]">
                {title}
              </h3>
              <p className="m-0 max-w-[32ch] text-pretty text-[0.9375rem] leading-[1.65] tracking-[-0.012em] text-white/68 motion-reduce:text-muted-foreground md:text-base md:leading-[1.6] lg:mt-auto">
                {description}
              </p>
            </div>
          </div>
        </li>
      ))}
    </ul>
  )
}
```

### `registry/new-york/blocks/feature-section-v6/components/feature-section-v6-mesh-bg.tsx`

```tsx
"use client"

import { Warp } from "@paper-design/shaders-react"

import {
  FSV6_WARP,
  FSV6_WARP_COLORS,
  type FeatureShaderTheme,
} from "../lib/features"

type FeatureSectionV6MeshBgProps = FeatureShaderTheme

export function FeatureSectionV6MeshBg({
  offsetX,
  offsetY,
  frame,
}: FeatureSectionV6MeshBgProps) {
  return (
    <div className="fsv6-mesh-frame" aria-hidden>
      <Warp
        className="fsv6-mesh-canvas"
        colors={[...FSV6_WARP_COLORS]}
        distortion={FSV6_WARP.distortion}
        fit="cover"
        frame={frame}
        offsetX={offsetX}
        offsetY={offsetY}
        proportion={FSV6_WARP.proportion}
        rotation={FSV6_WARP.rotation}
        scale={FSV6_WARP.scale}
        shape={FSV6_WARP.shape}
        shapeScale={FSV6_WARP.shapeScale}
        softness={FSV6_WARP.softness}
        speed={FSV6_WARP.speed}
        swirl={FSV6_WARP.swirl}
        swirlIterations={FSV6_WARP.swirlIterations}
      />
    </div>
  )
}
```

### `registry/new-york/blocks/feature-section-v6/styles/feature-grid.css`

```css
.fsv6-mesh-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.27;
}

.fsv6-mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

.fsv6-mesh-frame canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.fsv6-card-scrim {
  background: linear-gradient(
    165deg,
    color-mix(in oklab, #000000 16%, transparent) 0%,
    color-mix(in oklab, #000000 32%, transparent) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .fsv6-mesh-frame {
    display: none;
  }

  .fsv6-card-scrim {
    display: none;
  }
}
```

### `registry/new-york/blocks/feature-section-v6/lib/features.ts`

```ts

export const FSV6_WARP_COLORS = [
  "#0a0a0a",
  "#3d3d3d",
  "#141414",
  "#707070",
] as const

export const FSV6_WARP = {
  proportion: 0.42,
  softness: 1,
  distortion: 0.2,
  swirl: 0.22,
  swirlIterations: 4,
  shape: "stripes" as const,
  shapeScale: 0.65,
  speed: 0.28,
  scale: 2.5,
  rotation: 1.35,
}

export type FeatureShaderTheme = {
  offsetX: number
  offsetY: number

  frame: number
}

export type FeatureDefinition = {
  id: string
  title: string
  description: string
  shader: FeatureShaderTheme
}

export const featureSectionItems: FeatureDefinition[] = [
  {
    id: "smart-automation",
    title: "Automate the repeatable",
    description:
      "Hand off routine work so your team can focus on decisions that shape outcomes.",
    shader: {
      offsetX: 0.35,
      offsetY: -0.2,
      frame: 0,
    },
  },
  {
    id: "deep-analytics",
    title: "See what matters",
    description:
      "Know what's working, what's slipping, and where to act next without digging through noise.",
    shader: {
      offsetX: -0.4,
      offsetY: 0.35,
      frame: 18_500,
    },
  },
  {
    id: "team-collaboration",
    title: "Keep everyone aligned",
    description:
      "Live updates put the same context in front of everyone, so decisions land fast instead of in scattered threads.",
    shader: {
      offsetX: 0.15,
      offsetY: 0.45,
      frame: 41_000,
    },
  },
  {
    id: "instant-performance",
    title: "Stay fast at scale",
    description:
      "Ship responsive from day one and retain room to grow as traffic and product scope increase.",
    shader: {
      offsetX: -0.25,
      offsetY: -0.42,
      frame: 67_500,
    },
  },
]
```