Noise Texture

Open in

"use client"

import { cn } from "@/lib/utils"
import { NoiseTexture } from "@/registry/magicui/noise-texture"

export 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>
  )
}

Open in

The weekly digest

One email on Sundays—new components, tips, and changelog highlights. No spam, unsubscribe anytime.

Email

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 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>
  )
}

Open in

import { Button } from "@/components/ui/button"
import { NoiseTexture } from "@/registry/magicui/noise-texture"

export 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>
  )
}

Open in

Search with texture

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { NoiseTexture } from "@/registry/magicui/noise-texture"

export 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>
  )
}

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`

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`

Noise Texture

Installation

Examples

Button

Input field

Usage

Props

NoiseTexture

Credits

Noise Texture

Installation

Examples

Button

Input field

Usage

Props

NoiseTexture

Credits

Noise Texture

Installation

Examples

Newsletter digest

Button

Input field

Usage

Props

NoiseTexture

Credits

Noise Texture

Installation

Examples

Newsletter digest

Button

Input field

Usage

Props

NoiseTexture

Credits