# CTA Section v3

> Single-panel CTA with a full-bleed Paper Dithering (warp) shader behind the headline, supporting line, and primary / outline buttons.

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

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

## Install

```bash
npx shadcn@latest add https://uiception.com/r/cta-section-v3.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`
- Registry items: `button`

## Files

### `registry/new-york/blocks/cta-section-v3/page.tsx`

```tsx
import CtaSectionV3 from "./components/cta-section-v3"

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

### `registry/new-york/blocks/cta-section-v3/components/cta-section-v3.tsx`

```tsx
import { Button } from "@/components/ui/button"

import { CtaSectionV3DitherBg } from "./cta-section-v3-dither-bg"

import "../styles/cta-section-v3.css"

export default function CtaSectionV3() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="relative overflow-hidden rounded-none border border-border bg-black motion-reduce:bg-[color-mix(in_oklab,var(--muted)_78%,var(--background)_22%)]">
          <CtaSectionV3DitherBg />
          <div className="relative z-10 flex max-w-2xl flex-col items-start gap-5 px-6 py-8 text-left sm:gap-6 md:px-10 md:py-10 lg:px-12 lg:py-12">
            <h2 className="text-3xl font-normal tracking-tighter text-white motion-reduce:text-foreground sm:text-4xl">
              Ship agents from real code, not prototypes.
            </h2>
            <p className="max-w-md text-lg leading-relaxed font-normal text-zinc-300 motion-reduce:text-muted-foreground">
              Install in one sitting. Keep the same APIs when you push to
              production.
            </p>
            <div className="flex flex-row flex-wrap gap-3">
              <Button size="lg">Start Free</Button>
              <Button size="lg" variant="secondary">
                Read The Docs
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/cta-section-v3/components/cta-section-v3-dither-bg.tsx`

```tsx
"use client"

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

export function CtaSectionV3DitherBg() {
  return (
    <div className="cta-v3-dither-frame" aria-hidden>
      <Dithering
        className="absolute inset-0 size-full min-h-full"
        colorBack="#000000"
        colorFront="#ffffff"
        fit="cover"
        height={720}
        offsetX={-0.08}
        offsetY={-0.6}
        shape="warp"
        size={2}
        speed={0.1}
        type="2x2"
        width={1280}
      />
    </div>
  )
}
```

### `registry/new-york/blocks/cta-section-v3/styles/cta-section-v3.css`

```css
.cta-v3-dither-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  opacity: 0.35;
}

.cta-v3-dither-frame canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  .cta-v3-dither-frame {
    display: none;
  }

}
```