fix(noise-texture): update default prop values and improve documentation

- Changed default values for `frequency`, `octaves`, and `noiseOpacity` in the NoiseTexture component.
- Updated documentation to reflect the new default values and improved formatting for better readability.
- Adjusted demo examples to utilize the updated `noiseOpacity` prop for consistency.

Author: chishiyac

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

@@ -76,13 +76,13 @@ import { NoiseTexture } from "@/components/ui/noise-texture"
 
 ### NoiseTexture
 
-| Prop        | Type     | Default | Description                                 |
-| ----------- | -------- | ------- | ------------------------------------------- |
-| `className` | `string` | —       | Merged onto the root `svg` (via `cn`)       |
-| `frequency` | `number` | `0.5`   | `baseFrequency` for `feTurbulence`          |
-| `octaves`   | `number` | `4`     | `numOctaves` for `feTurbulence`             |
-| `slope`     | `number` | `0.15`  | Linear slope per channel after desaturation |
-| `noiseOpacity` | `number` | `0.4` | Opacity of the noise `rect`                 |
+| Prop           | Type     | Default | Description                                 |
+| -------------- | -------- | ------- | ------------------------------------------- |
+| `className`    | `string` | —       | Merged onto the root `svg` (via `cn`)       |
+| `frequency`    | `number` | `0.5`   | `baseFrequency` for `feTurbulence`          |
+| `octaves`      | `number` | `4`     | `numOctaves` for `feTurbulence`             |
+| `slope`        | `number` | `0.15`  | Linear slope per channel after desaturation |
+| `noiseOpacity` | `number` | `0.4`   | Opacity of the noise `rect`                 |
 
 ## Credits
 

apps/www/public/llms-full.txt

@@ -12366,12 +12366,12 @@ export interface NoiseTextureProps extends ComponentProps<"svg"> {
   className?: string
   /**
    * `baseFrequency` for `feTurbulence`; higher values yield finer-grained noise.
-   * @default 0.5
+   * @default 0.4
    */
   frequency?: number
   /**
    * `numOctaves` for `feTurbulence`; more octaves add detail at smaller scales.
-   * @default 4
+   * @default 6
    */
   octaves?: number
   /**
@@ -12381,25 +12381,25 @@ export interface NoiseTextureProps extends ComponentProps<"svg"> {
   slope?: number
   /**
    * Opacity of the filled noise layer (`rect`).
-   * @default 0.4
+   * @default 0.6
    */
   noiseOpacity?: number
 }
 
 export const NoiseTexture = ({
   className,
-  frequency = 0.5,
-  octaves = 4,
+  frequency = 0.4,
+  octaves = 6,
   slope = 0.15,
-  noiseOpacity = 0.4,
+  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",
+        "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"
@@ -12441,7 +12441,7 @@ 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 dark:bg-neutral-950">
+    <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",
@@ -12472,8 +12472,8 @@ import { NoiseTexture } from "@/registry/magicui/noise-texture"
 export default function NoiseTextureDemo2() {
   return (
     <div className="flex justify-center p-4">
-      <Card className="bg-card relative w-full max-w-md overflow-hidden border">
-        <NoiseTexture />
+      <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>
@@ -12517,7 +12517,10 @@ export default function NoiseTextureDemo3() {
         variant="secondary"
       >
         <span className="relative z-10 font-medium">Subscribe</span>
-        <NoiseTexture className="transition-all group-hover/button:opacity-100" />
+        <NoiseTexture
+          noiseOpacity={0.45}
+          className="transition-all group-hover/button:opacity-100"
+        />
       </Button>
     </div>
   )
@@ -12539,7 +12542,7 @@ export default function NoiseTextureDemo4() {
         Search with texture
       </Label>
       <div className="bg-muted/30 relative overflow-hidden rounded-lg border">
-        <NoiseTexture />
+        <NoiseTexture noiseOpacity={0.45} />
         <Input
           className="relative z-10 border-0 bg-transparent shadow-none focus-visible:ring-2"
           id="noise-input-demo"

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

@@ -14,7 +14,7 @@
   "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 relative w-full max-w-md overflow-hidden border\">\n        <NoiseTexture />\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",
+      "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

@@ -11,7 +11,7 @@
   "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=\"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 className=\"transition-all group-hover/button:opacity-100\" />\n      </Button>\n    </div>\n  )\n}\n",
+      "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=\"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"
     }
   ]

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

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/example/noise-texture-demo-4.tsx",
-      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { NoiseTexture } from \"@/registry/magicui/noise-texture\"\n\nexport default function NoiseTextureDemo4() {\n  return (\n    <div className=\"mx-auto flex max-w-sm flex-col gap-3 p-4\">\n      <Label className=\"text-muted-foreground\" htmlFor=\"noise-input-demo\">\n        Search with texture\n      </Label>\n      <div className=\"bg-muted/30 relative overflow-hidden rounded-lg border\">\n        <NoiseTexture />\n        <Input\n          className=\"relative z-10 border-0 bg-transparent shadow-none focus-visible:ring-2\"\n          id=\"noise-input-demo\"\n          placeholder=\"Try typing…\"\n          type=\"search\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { NoiseTexture } from \"@/registry/magicui/noise-texture\"\n\nexport default function NoiseTextureDemo4() {\n  return (\n    <div className=\"mx-auto flex max-w-sm flex-col gap-3 p-4\">\n      <Label className=\"text-muted-foreground\" htmlFor=\"noise-input-demo\">\n        Search with texture\n      </Label>\n      <div className=\"bg-muted/30 relative overflow-hidden rounded-lg border\">\n        <NoiseTexture noiseOpacity={0.45} />\n        <Input\n          className=\"relative z-10 border-0 bg-transparent shadow-none focus-visible:ring-2\"\n          id=\"noise-input-demo\"\n          placeholder=\"Try typing…\"\n          type=\"search\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ]

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

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/example/noise-texture-demo.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { NoiseTexture } from \"@/registry/magicui/noise-texture\"\n\nexport default function NoiseTextureDemo() {\n  return (\n    <div className=\"relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-neutral-100 dark:bg-neutral-950\">\n      <NoiseTexture\n        className={cn(\n          \"absolute inset-0\",\n          \"mask-[radial-gradient(420px_circle_at_center,white,transparent)]\"\n        )}\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { NoiseTexture } from \"@/registry/magicui/noise-texture\"\n\nexport default function NoiseTextureDemo() {\n  return (\n    <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\">\n      <NoiseTexture\n        className={cn(\n          \"absolute inset-0\",\n          \"mask-[radial-gradient(420px_circle_at_center,white,transparent)]\"\n        )}\n      />\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ]

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

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/magicui/noise-texture.tsx",
-      "content": "\"use client\"\n\nimport { useId, type ComponentProps } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface NoiseTextureProps extends ComponentProps<\"svg\"> {\n  /** Extra classes merged onto the root `svg` element. */\n  className?: string\n  /**\n   * `baseFrequency` for `feTurbulence`; higher values yield finer-grained noise.\n   * @default 0.5\n   */\n  frequency?: number\n  /**\n   * `numOctaves` for `feTurbulence`; more octaves add detail at smaller scales.\n   * @default 4\n   */\n  octaves?: number\n  /**\n   * Linear slope on each channel after desaturation; adjusts contrast of the noise.\n   * @default 0.15\n   */\n  slope?: number\n  /**\n   * Opacity of the filled noise layer (`rect`).\n   * @default 0.4\n   */\n  noiseOpacity?: number\n}\n\nexport const NoiseTexture = ({\n  className,\n  frequency = 0.5,\n  octaves = 4,\n  slope = 0.15,\n  noiseOpacity = 0.4,\n  ...props\n}: NoiseTextureProps) => {\n  const filterId = useId()\n\n  return (\n    <svg\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 size-full opacity-50 select-none\",\n        className\n      )}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <filter id={filterId}>\n        <feTurbulence\n          type=\"fractalNoise\"\n          baseFrequency={frequency}\n          numOctaves={octaves}\n          stitchTiles=\"stitch\"\n        />\n        <feColorMatrix type=\"saturate\" values=\"0\" />\n        <feComponentTransfer>\n          <feFuncR type=\"linear\" slope={slope} />\n          <feFuncG type=\"linear\" slope={slope} />\n          <feFuncB type=\"linear\" slope={slope} />\n        </feComponentTransfer>\n      </filter>\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        filter={`url(#${filterId})`}\n        opacity={noiseOpacity}\n      />\n    </svg>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useId, type ComponentProps } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface NoiseTextureProps extends ComponentProps<\"svg\"> {\n  /** Extra classes merged onto the root `svg` element. */\n  className?: string\n  /**\n   * `baseFrequency` for `feTurbulence`; higher values yield finer-grained noise.\n   * @default 0.4\n   */\n  frequency?: number\n  /**\n   * `numOctaves` for `feTurbulence`; more octaves add detail at smaller scales.\n   * @default 6\n   */\n  octaves?: number\n  /**\n   * Linear slope on each channel after desaturation; adjusts contrast of the noise.\n   * @default 0.15\n   */\n  slope?: number\n  /**\n   * Opacity of the filled noise layer (`rect`).\n   * @default 0.6\n   */\n  noiseOpacity?: number\n}\n\nexport const NoiseTexture = ({\n  className,\n  frequency = 0.4,\n  octaves = 6,\n  slope = 0.15,\n  noiseOpacity = 0.6,\n  ...props\n}: NoiseTextureProps) => {\n  const filterId = useId()\n\n  return (\n    <svg\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 size-full opacity-50 select-none dark:opacity-[0.75]\",\n        className\n      )}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <filter id={filterId}>\n        <feTurbulence\n          type=\"fractalNoise\"\n          baseFrequency={frequency}\n          numOctaves={octaves}\n          stitchTiles=\"stitch\"\n        />\n        <feColorMatrix type=\"saturate\" values=\"0\" />\n        <feComponentTransfer>\n          <feFuncR type=\"linear\" slope={slope} />\n          <feFuncG type=\"linear\" slope={slope} />\n          <feFuncB type=\"linear\" slope={slope} />\n        </feComponentTransfer>\n      </filter>\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        filter={`url(#${filterId})`}\n        opacity={noiseOpacity}\n      />\n    </svg>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]

apps/www/registry/example/noise-texture-demo-2.tsx

@@ -13,8 +13,8 @@ import { NoiseTexture } from "@/registry/magicui/noise-texture"
 export default function NoiseTextureDemo2() {
   return (
     <div className="flex justify-center p-4">
-      <Card className="bg-card relative w-full max-w-md overflow-hidden border">
-        <NoiseTexture />
+      <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>

apps/www/registry/example/noise-texture-demo-3.tsx

@@ -10,7 +10,10 @@ export default function NoiseTextureDemo3() {
         variant="secondary"
       >
         <span className="relative z-10 font-medium">Subscribe</span>
-        <NoiseTexture className="transition-all group-hover/button:opacity-100" />
+        <NoiseTexture
+          noiseOpacity={0.45}
+          className="transition-all group-hover/button:opacity-100"
+        />
       </Button>
     </div>
   )

apps/www/registry/example/noise-texture-demo-4.tsx

@@ -9,7 +9,7 @@ export default function NoiseTextureDemo4() {
         Search with texture
       </Label>
       <div className="bg-muted/30 relative overflow-hidden rounded-lg border">
-        <NoiseTexture />
+        <NoiseTexture noiseOpacity={0.45} />
         <Input
           className="relative z-10 border-0 bg-transparent shadow-none focus-visible:ring-2"
           id="noise-input-demo"