feat(noise-texture): introduce NoiseTexture component

[chishiyac]

Description

This PR adds the Noise Texture component: a reusable, pointer-events–disabled SVG overlay that uses SVG filters (feTurbulence, desaturation, and feComponentTransfer) so you can add grain-style texture without raster assets. It ships with four registry examples (default panel, newsletter-style card, button, and input), full Magic UI registry entries and generated public/r/*.json, documentation at noise-texture.mdx (CLI and manual install, examples, props), and sidebar/docs config updates.

Changes

• Component: New NoiseTexture in registry/magicui/noise-texture.tsx with props such as frequency (baseFrequency), octaves, slope (post-desaturation contrast), and opacity, plus standard SVG/className passthrough.
• Examples: noise-texture-demo, noise-texture-demo-2, noise-texture-demo-3, and noise-texture-demo-4 under registry/example/, wired in registry-examples.ts and the registry __index__.
• Registry: Entries in registry-ui.ts, registry/__index__.tsx, and public/r/ JSON for the block and demos.
• Docs: New content/docs/components/noise-texture.mdx and config/docs.ts update for navigation.
• LLM docs: public/llms.txt and public/llms-full.txt updated to list the component and example files.

Motivation

I didn't have anywhere to store the component LMAO, and why not store it in the library most used by Design Engineers? Joking aside, I just thought it could be a good addition so people can build more things in a derivative way.

Breaking Changes

None.

Screenshots

Device / browser / viewport: (e.g. Chrome · macOS · 1440×900 — match your capture)

Before	After
N/A (new component)	Noise Texture docs with live previews; newsletter, button, and input examples in the registry

---

[vercel]

@chishiyac is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[chishiyac]

One note: I've added my name to the credits for the components I've added. I hope that's not a problem...

[Yeom-JinHo]

@chishiyac
Tysm for the awesome contribution! I added a follow-up commit with a few small fixes.

Before we merge, I do have one concern: the noise looks nice and clear in light mode, but in dark mode it feels a bit too subtle and hard to notice.

Could you take another look at that when you get a chance? Appreciate it!

[dikshantgulekar20-oss]

Hey 👋

Thank you so much for allowing me to contribute to the project and for giving me this opportunity , I really appreciate it 🙌

Thanks again for implementing this so quickly, the execution is clean and well thought out.

I’ve been testing the new shape variants, and everything is working smoothly. The transitions feel great, especially with how the shapes originate from the toggle button. From a user perspective, this makes a lot of sense since the toggler is often placed in areas like the navbar, footer, or bottom corner, and the animation naturally starts from that interaction point.

That said, I was also thinking about an additional use case. In some designs, users might prefer the transition to originate from the center of the screen instead of the toggle button, to create a more global or cinematic effect.

Based on this idea, I experimented with an implementation and introduced an optional prop called fromCenter, which allows the transition to start from the center of the viewport rather than the button position.

I’ve created a separate PR for this enhancement and also committed the changes to the branch. If you have some time, I’d really appreciate it if you could review it and share your thoughts. I’ve tried to keep the implementation aligned with the existing code structure and ensured it remains simple and user-friendly.

Would love to hear your feedback on whether this fits well within the component’s design. I’m happy to refine it further based on your suggestions, and I’d love to continue contributing more to Magic UI going forward

Thank you 🙏

[chishiyac]

@chishiyac Tysm for the awesome contribution! I added a follow-up commit with a few small fixes.

Before we merge, I do have one concern: the noise looks nice and clear in light mode, but in dark mode it feels a bit too subtle and hard to notice.

Could you take another look at that when you get a chance? Appreciate it!

Hi @Yeom-JinHo! Hope you're doing well

I just pushed a new commit addressing the improvements you pointed out. Hopefully it aligns with what you had in mind, but feel free to let me know if you'd like anything tweaked further!

Really appreciate your feedback!

[Yeom-JinHo]

@chishiyac
Tysm for addressing the feedback so quickly.

I’m going to add a couple of tiny follow-up commits on my side, then I’ll get this merged. Really appreciate your continued contributions and the care you put into this PR.

Thanks again for all the great work!