Animated Grain Texture

Step 1: Bring in the Static

First, let’s load the grained library. Think of it as tuning your TV to a channel that only broadcasts static—it’s that grainy texture we’re after. To do this, add the following script tag to your HTML, right before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/grained/dist/grained.min.js"></script>

Step 2: Tweak the Settings

Now that we’ve got the library ready, it’s time to fine-tune the effect. Picture adjusting the rabbit ears on an old TV to get just the right amount of static. Here’s how you configure your grainy background (it's called JSON or Javascript Object Notation, you'll be seeing it a lot):

var options = {
  animate: true,
  patternWidth: 100,
  patternHeight: 100,
  grainOpacity: 0.05,
  grainDensity: 1,
  grainWidth: 1,
  grainHeight: 1
};

Here’s the rundown: animate is set to true to add some movement, like the static fuzz subtly shifting on the screen. The patternWidth and patternHeight settings control the size of the grain pattern, while grainOpacity adjusts how visible the effect is. grainDensity dictates how packed the grains are, and grainWidth and grainHeight let you tweak the size of each individual grain.

Step 3: Apply the Effect

With your settings in place, it’s time to apply the grainy texture to an element on your page. Just add this line of code:

grained("#grain", options);

This targets an element with the ID grain and applies the options you’ve set up. The result is a nice, grainy texture that overlays your content, much like the static on a TV screen that’s just a bit out of tune.

Step 4: Keep Your Site Usable

One last touch—you don’t want your grainy background to interfere with the usability of your site. To ensure that buttons and links remain clickable, set pointer-events to none on your grainy element:

#grain {
  pointer-events: none;
}

This keeps the grain effect purely visual, so your users can still interact with everything on your page.

By following these steps, you’ll add a subtle, nostalgic texture to your website, reminiscent of a time when TV screens were a bit more, well, textured. It’s a simple way to bring some retro vibes to your modern site without overwhelming your content.