Analog CRT Noise Texture

backgrounds

Grain film raster noise backdrop for tactile retro skeuomorphic feeling.

#noise#texture#grain#analog#background

Live Interactive Preview

Analog Noise Texture

Component Source Code

Select language in the dropdown

NoiseBackground.tsx

1'use client';
2
3import React from 'react';
4
5export default function NoiseBackground() {
6  return (
7    <div className="relative h-64 w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-zinc-900 flex flex-col items-center justify-center p-6 text-white text-center select-none">
8      <div 
9        style={{
10          backgroundImage: 'radial-gradient(rgba(255,255,255,0.15) 1px, transparent 0)',
11          backgroundSize: '8px 8px'
12        }}
13        className="absolute inset-0 opacity-40 animate-pulse" 
14      />
15      <h3 className="text-xl font-bold text-white relative z-10">Film Grain Shader</h3>
16      <p className="text-xs text-zinc-400 mt-1 relative z-10">Analog texture overlay giving tactile warmth.</p>
17    </div>
18  );
19}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/backgrounds/NoiseBackground.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import AnalogCRTNoiseTexture from '@/components/backgrounds/NoiseBackground';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <AnalogCRTNoiseTexture />
7    </main>
8  );
9}