noise-effect

'use client';
import React, { useState, useCallback } from 'react';

const index = () => {
  const [opacity, setOpacity] = useState(0.05);

  const handleOpacityChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setOpacity(parseFloat(event.target.value));
    },
    []
  );
  return (
    <>
      <section className='relative border rounded-lg w-full'>
        <div className='absolute top-4 right-4 z-10 flex justify-end pb-2'>
          <label htmlFor='opacity-slider ' className='mr-2 inline-block'>
            Noise Opacity:
          </label>
          <input
            id='opacity-slider'
            type='range'
            min='0'
            max='1'
            step='0.01'
            value={opacity}
            onChange={handleOpacityChange}
          />
          <span className='ml-2'>{opacity.toFixed(2)}</span>
        </div>
        <div
          className="absolute top-0 left-0 w-full h-full content-[''] z-10 pointer-events-none bg-[url('/noise.gif')]"
          style={{ opacity: opacity }}
        ></div>
        <section className='  font-semibold 2xl:h-[450px] sm:h-[450px] h-[400px] bg-linear-to-t dark:to-neutral-950 dark:from-neutral-950 to-[#dadada] from-[#ebebeb] flex flex-col items-center justify-center dark:text-white text-black'>
          <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-size-[35px_34px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]'></div>

          <h1 className='xl:text-4xl text-3xl px-8 font-semibold text-center tracking-tight leading-[120%]'>
            An Home Page with Noise Effect
          </h1>
        </section>
      </section>
    </>
  );
};
export default index;