Todos os componentes

Noise Effect

Noise Effect é um componente de efeito para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT effects

O que é

Noise Effect é um componente de efeito para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Noise Effect

./registry/components/noise-effect/section-noise.tsx
'use client';
import type React from 'react';
import { useCallback, useState } from 'react';

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

  const handleOpacityChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setOpacity(Number.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 SectionNoise;

Componentes parecidos