# Noise Gate: Focus Section

> A whole landing section: heading, subhead, and a calmer, slower gate with a call to action pinned under the counter. The calm panel is ink in light mode and turns white in dark mode.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/noise-gate-focus-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/noise-gate-focus-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/noise-gate-focus-demo/light.png
- Registry item: https://keyframeui.com/r/noise-gate-focus-demo.json
- Categories: section, comparison, counter, marketing
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/noise-gate-focus-demo.json
```

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

## Dependencies

- Registry items: `https://keyframeui.com/r/noise-gate.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/noise-gate#noise-gate-focus-demo

## Files

### `registry/demos/noise-gate-focus-demo.tsx`

```tsx
import { NoiseGate, type NoiseGateItem } from "@/components/ui/noise-gate";

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );
}

function Avatar({ initials, className }: { initials: string; className: string }) {
  return (
    <span className={`grid size-5 place-items-center rounded-full text-[9px] font-semibold text-white ${className}`}>
      {initials}
    </span>
  );
}

const hash = "M6 2.5 4.5 13.5M11.5 2.5 10 13.5M2.5 6h11M2 10h11";
const calendar = "M2.5 4.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-8ZM2.5 7h11M5.5 2v2.5M10.5 2v2.5";
const bell = "M4 11V7a4 4 0 0 1 8 0v4l1 1.5H3L4 11ZM6.5 14h3";
const mail = "M2.5 4.5h11v7a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-7ZM2.5 4.5 8 9l5.5-4.5";

const pings: NoiseGateItem[] = [
  { icon: <Icon d={hash} />, title: "@here standup moved to 9:15 (again)", detail: "#general · 214 people" },
  {
    tag: "DM",
    tone: "warning",
    icon: <Avatar initials="PS" className="bg-fuchsia-500" />,
    title: "quick q, got 5 min?",
    detail: "Priya · just now",
  },
  {
    tag: "Conflict",
    tone: "critical",
    icon: <Icon d={calendar} />,
    title: "3 meetings at 2:00 PM",
    detail: "Thursday · you accepted all three",
  },
  {
    icon: <Avatar initials="SR" className="bg-orange-500" />,
    title: "“Can you hop on a call real quick?”",
    detail: "Sam R. · huddle",
  },
  { icon: <Icon d={bell} />, title: "48 unread in #design-feedback", detail: "Since you looked away" },
  {
    tag: "Mention",
    tone: "warning",
    repeat: 3,
    title: "You were mentioned in #launch",
    detail: "Three threads, same question",
  },
  { icon: <Icon d={mail} />, title: "Re: Re: Fwd: Re: Q4 offsite", detail: "17 replies" },
  { tag: "Reminder", tone: "critical", title: "Reply to Dana's thread", detail: "Snoozed 4 times" },
  { icon: <Icon d={calendar} />, title: "This week is 86% meetings", detail: "Up from 71%" },
];

export function NoiseGateFocusDemo() {
  return (
    <section className="w-full max-w-5xl">
      <div className="mx-auto max-w-xl text-center">
        <h2 className="text-[clamp(2rem,5vw,3rem)] leading-[1.02] font-semibold tracking-[-0.04em] text-balance text-zinc-950 dark:text-zinc-50">
          Your attention, back.
        </h2>
        <p className="mx-auto mt-4 max-w-md text-base leading-relaxed text-pretty text-zinc-600 dark:text-zinc-400">
          Quietly holds pings, threads and invites until they matter, then hands you one calm digest.
        </p>
      </div>

      <NoiseGate
        className="mt-10"
        items={pings}
        density={6}
        duration={18}
        noiseTitle={
          <>
            Getting work done with <span className="text-zinc-500 dark:text-zinc-400">“do not disturb”</span>
          </>
        }
        calmTitle="Focusing with Quietly"
        count={312}
        countPrefix="Held back"
        countSuffix="pings today"
        calmClassName="bg-zinc-950 text-white dark:bg-zinc-50 dark:text-zinc-950"
        calmFooter={
          <a
            href="#early-access"
            className="inline-flex h-10 items-center gap-1.5 rounded-full bg-white px-5 text-sm font-medium text-zinc-950 transition-[transform,background-color] duration-150 ease-out hover:bg-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white active:scale-[0.97] dark:bg-zinc-950 dark:text-white dark:hover:bg-zinc-800 dark:focus-visible:outline-zinc-950"
          >
            Get early access
            <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" className="size-4">
              <path d="M3.5 8h9M8.5 4l4 4-4 4" />
            </svg>
          </a>
        }
      />
    </section>
  );
}
```