feat(noise-texture): introduce NoiseTexture component

apps/www/config/docs.ts

@@ -544,6 +544,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "New",
         },
+        {
+          title: "Noise Texture",
+          href: `/docs/components/noise-texture`,
+          items: [],
+          label: "New",
+        },
       ],
     },
     {

apps/www/content/docs/components/glare-hover.mdx

@@ -138,3 +138,7 @@ Optional **`width`** and **`height`** are merged onto the root `style` (string v
 | `height`     | `string`          | —           | Optional `height` on the root `style`.                                |
 
 The root forwards standard **`div`** props (`onClick`, `data-*`, etc.). The glare is drawn on **`::before`** with `z-10` above the content.
+
+## Credits
+
+- Credit to [@chishiyac](https://github.com/chishiyac)

apps/www/content/docs/components/hexagon-pattern.mdx

@@ -82,3 +82,7 @@ import { HexagonPattern } from "@/components/ui/hexagon-pattern"
 | `className`       | `string`                     | —              | Additional classes on the root SVG (for example Tailwind color utilities) |
 
 Also accepts standard SVG attributes on the root `<svg>` (for example `aria-hidden`, `role`) where applicable.
+
+## Credits
+
+- Credit to [@chishiyac](https://github.com/chishiyac)

apps/www/content/docs/components/noise-texture.mdx

@@ -0,0 +1,87 @@
+---
+title: Noise Texture
+date: 2026-04-07
+description: An SVG fractal noise layer using feTurbulence for subtle texture overlays.
+author: magicui
+published: true
+---
+
+<ComponentPreview name="noise-texture-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add @magicui/noise-texture
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="noise-texture" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### Newsletter digest
+
+<ComponentPreview name="noise-texture-demo-2" />
+
+### Button
+
+<ComponentPreview name="noise-texture-demo-3" />
+
+### Input field
+
+<ComponentPreview name="noise-texture-demo-4" />
+
+## Usage
+
+`NoiseTexture` renders a full-size `svg` (absolute, inset 0). Put it inside a `relative` container and layer content above with `z-10` when needed.
+
+```tsx showLineNumbers
+import { NoiseTexture } from "@/components/ui/noise-texture"
+```
+
+```tsx showLineNumbers
+<div className="relative h-64 overflow-hidden rounded-lg border">
+  <NoiseTexture />
+</div>
+```
+
+## Props
+
+`NoiseTextureProps` extends React’s `ComponentProps<"svg">`. Besides standard SVG attributes, these props are supported:
+
+### NoiseTexture
+
+| Prop           | Type     | Default | Description                                 |
+| -------------- | -------- | ------- | ------------------------------------------- |
+| `className`    | `string` | —       | Merged onto the root `svg` (via `cn`)       |
+| `frequency`    | `number` | `0.4`   | `baseFrequency` for `feTurbulence`          |
+| `octaves`      | `number` | `6`     | `numOctaves` for `feTurbulence`             |
+| `slope`        | `number` | `0.15`  | Linear slope per channel after desaturation |
+| `noiseOpacity` | `number` | `0.6`   | Opacity of the noise `rect`                 |
+
+## Credits
+
+- Credit to [@chishiyac](https://github.com/chishiyac)

apps/www/content/docs/components/striped-pattern.mdx

@@ -73,3 +73,7 @@ import { StripedPattern } from "@/components/ui/striped-pattern"
 | `x`         | `number`              | `-1`     | X offset of the pattern |
 | `y`         | `number`              | `-1`     | Y offset of the pattern |
 | `direction` | `"left"` \| `"right"` | `"left"` | Line direction          |
+
+## Credits
+
+- Credit to [@chishiyac](https://github.com/chishiyac)

apps/www/public/llms-full.txt

@@ -12350,6 +12350,212 @@ export default function NeonGradientCardDemo() {
 
 
 
+===== COMPONENT: noise-texture =====
+Title: Noise Texture
+Description: An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.
+
+--- file: magicui/noise-texture.tsx ---
+"use client"
+
+import { useId, type ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface NoiseTextureProps extends ComponentProps<"svg"> {
+  /** Extra classes merged onto the root `svg` element. */
+  className?: string
+  /**
+   * `baseFrequency` for `feTurbulence`; higher values yield finer-grained noise.
+   * @default 0.4
+   */
+  frequency?: number
+  /**
+   * `numOctaves` for `feTurbulence`; more octaves add detail at smaller scales.
+   * @default 6
+   */
+  octaves?: number
+  /**
+   * Linear slope on each channel after desaturation; adjusts contrast of the noise.
+   * @default 0.15
+   */
+  slope?: number
+  /**
+   * Opacity of the filled noise layer (`rect`).
+   * @default 0.6
+   */
+  noiseOpacity?: number
+}
+
+export const NoiseTexture = ({
+  className,
+  frequency = 0.4,
+  octaves = 6,
+  slope = 0.15,
+  noiseOpacity = 0.6,
+  ...props
+}: NoiseTextureProps) => {
+  const filterId = useId()
+
+  return (
+    <svg
+      className={cn(
+        "pointer-events-none absolute inset-0 z-0 size-full opacity-50 select-none dark:opacity-[0.75]",
+        className
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <filter id={filterId}>
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency={frequency}
+          numOctaves={octaves}
+          stitchTiles="stitch"
+        />
+        <feColorMatrix type="saturate" values="0" />
+        <feComponentTransfer>
+          <feFuncR type="linear" slope={slope} />
+          <feFuncG type="linear" slope={slope} />
+          <feFuncB type="linear" slope={slope} />
+        </feComponentTransfer>
+      </filter>
+      <rect
+        width="100%"
+        height="100%"
+        filter={`url(#${filterId})`}
+        opacity={noiseOpacity}
+      />
+    </svg>
+  )
+}
+
+
+===== EXAMPLE: noise-texture-demo =====
+Title: Noise Texture Demo
+
+--- file: example/noise-texture-demo.tsx ---
+"use client"
+
+import { cn } from "@/lib/utils"
+import { NoiseTexture } from "@/registry/magicui/noise-texture"
+
+export default function NoiseTextureDemo() {
+  return (
+    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-neutral-100/80 dark:bg-neutral-950">
+      <NoiseTexture
+        className={cn(
+          "absolute inset-0",
+          "mask-[radial-gradient(420px_circle_at_center,white,transparent)]"
+        )}
+      />
+    </div>
+  )
+}
+
+
+===== EXAMPLE: noise-texture-demo-2 =====
+Title: Noise Texture Demo (newsletter card)
+
+--- file: example/noise-texture-demo-2.tsx ---
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { NoiseTexture } from "@/registry/magicui/noise-texture"
+
+export default function NoiseTextureDemo2() {
+  return (
+    <div className="flex justify-center p-4">
+      <Card className="bg-card/80 relative w-full max-w-md overflow-hidden border">
+        <NoiseTexture noiseOpacity={0.45} />
+        <CardHeader className="relative z-10 space-y-1 pb-4">
+          <CardTitle className="text-xl">The weekly digest</CardTitle>
+          <CardDescription>
+            One email on Sundays—new components, tips, and changelog highlights.
+            No spam, unsubscribe anytime.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="relative z-10 space-y-4 pt-0">
+          <div className="space-y-2">
+            <Label htmlFor="newsletter-email">Email</Label>
+            <Input
+              id="newsletter-email"
+              autoComplete="email"
+              placeholder="you@company.com"
+              type="email"
+            />
+          </div>
+          <Button className="w-full" type="button">
+            Subscribe
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+
+===== EXAMPLE: noise-texture-demo-3 =====
+Title: Noise Texture Demo (button)
+
+--- file: example/noise-texture-demo-3.tsx ---
+import { Button } from "@/components/ui/button"
+import { NoiseTexture } from "@/registry/magicui/noise-texture"
+
+export default function NoiseTextureDemo3() {
+  return (
+    <div className="flex justify-center p-8">
+      <Button
+        className="group/button relative cursor-pointer overflow-hidden px-8 active:scale-98"
+        type="button"
+        variant="secondary"
+      >
+        <span className="relative z-10 font-medium">Subscribe</span>
+        <NoiseTexture
+          noiseOpacity={0.45}
+          className="transition-all group-hover/button:opacity-100"
+        />
+      </Button>
+    </div>
+  )
+}
+
+
+===== EXAMPLE: noise-texture-demo-4 =====
+Title: Noise Texture Demo (input)
+
+--- file: example/noise-texture-demo-4.tsx ---
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { NoiseTexture } from "@/registry/magicui/noise-texture"
+
+export default function NoiseTextureDemo4() {
+  return (
+    <div className="mx-auto flex max-w-sm flex-col gap-3 p-4">
+      <Label className="text-muted-foreground" htmlFor="noise-input-demo">
+        Search with texture
+      </Label>
+      <div className="bg-muted/30 relative overflow-hidden rounded-lg border">
+        <NoiseTexture noiseOpacity={0.45} />
+        <Input
+          className="relative z-10 border-0 bg-transparent shadow-none focus-visible:ring-2"
+          id="noise-input-demo"
+          placeholder="Try typing…"
+          type="search"
+        />
+      </div>
+    </div>
+  )
+}
+
+
+
 ===== COMPONENT: number-ticker =====
 Title: Number Ticker
 Description: Animate numbers to count up or down to a target number

apps/www/public/llms.txt

@@ -49,6 +49,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Meteors](https://magicui.design/docs/components/meteors): A meteor shower effect.
 - [Morphing Text](https://magicui.design/docs/components/morphing-text): A dynamic text morphing component for Magic UI.
 - [Neon Gradient Card](https://magicui.design/docs/components/neon-gradient-card): A beautiful neon card effect
+- [Noise Texture](https://magicui.design/docs/components/noise-texture): An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.
 - [Number Ticker](https://magicui.design/docs/components/number-ticker): Animate numbers to count up or down to a target number
 - [Orbiting Circles](https://magicui.design/docs/components/orbiting-circles): A collection of circles which move in orbit along a circular path
 - [Particles](https://magicui.design/docs/components/particles): Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
@@ -98,6 +99,10 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [smooth-cursor-demo](https://github.com/magicuidesign/magicui/blob/main/example/smooth-cursor-demo.tsx): Example usage
 - [Progressive Blur Demo](https://github.com/magicuidesign/magicui/blob/main/example/progressive-blur-demo.tsx): Example usage
 - [Neon Gradient Card Demo](https://github.com/magicuidesign/magicui/blob/main/example/neon-gradient-card-demo.tsx): Example usage
+- [Noise Texture Demo](https://github.com/magicuidesign/magicui/blob/main/example/noise-texture-demo.tsx): Example usage
+- [Noise Texture Demo (newsletter card)](https://github.com/magicuidesign/magicui/blob/main/example/noise-texture-demo-2.tsx): Example usage
+- [Noise Texture Demo (button)](https://github.com/magicuidesign/magicui/blob/main/example/noise-texture-demo-3.tsx): Example usage
+- [Noise Texture Demo (input)](https://github.com/magicuidesign/magicui/blob/main/example/noise-texture-demo-4.tsx): Example usage
 - [Meteors Demo](https://github.com/magicuidesign/magicui/blob/main/example/meteors-demo.tsx): Example usage
 - [Grid Pattern Demo](https://github.com/magicuidesign/magicui/blob/main/example/grid-pattern-demo.tsx): Example usage
 - [Striped Pattern Demo](https://github.com/magicuidesign/magicui/blob/main/example/striped-pattern-demo.tsx): Example usage

apps/www/public/r/noise-texture-demo-2.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "noise-texture-demo-2",
+  "type": "registry:example",
+  "title": "Noise Texture Demo (newsletter card)",
+  "description": "Example showing a newsletter signup card with email input over a noise texture.",
+  "registryDependencies": [
+    "@magicui/noise-texture",
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/example/noise-texture-demo-2.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { NoiseTexture } from \"@/registry/magicui/noise-texture\"\n\nexport default function NoiseTextureDemo2() {\n  return (\n    <div className=\"flex justify-center p-4\">\n      <Card className=\"bg-card/80 relative w-full max-w-md overflow-hidden border\">\n        <NoiseTexture noiseOpacity={0.45} />\n        <CardHeader className=\"relative z-10 space-y-1 pb-4\">\n          <CardTitle className=\"text-xl\">The weekly digest</CardTitle>\n          <CardDescription>\n            One email on Sundays—new components, tips, and changelog highlights.\n            No spam, unsubscribe anytime.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"relative z-10 space-y-4 pt-0\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"newsletter-email\">Email</Label>\n            <Input\n              id=\"newsletter-email\"\n              autoComplete=\"email\"\n              placeholder=\"you@company.com\"\n              type=\"email\"\n            />\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Subscribe\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}

apps/www/public/r/noise-texture-demo-3.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "noise-texture-demo-3",
+  "type": "registry:example",
+  "title": "Noise Texture Demo (button)",
+  "description": "Example showing NoiseTexture behind a button label inside a relative button.",
+  "registryDependencies": [
+    "@magicui/noise-texture",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/example/noise-texture-demo-3.tsx",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { NoiseTexture } from \"@/registry/magicui/noise-texture\"\n\nexport default function NoiseTextureDemo3() {\n  return (\n    <div className=\"flex justify-center p-8\">\n      <Button\n        className=\"group/button relative cursor-pointer overflow-hidden px-8 active:scale-98\"\n        type=\"button\"\n        variant=\"secondary\"\n      >\n        <span className=\"relative z-10 font-medium\">Subscribe</span>\n        <NoiseTexture\n          noiseOpacity={0.45}\n          className=\"transition-all group-hover/button:opacity-100\"\n        />\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}