Todos os componentes

Blur Vignette Image

Blur Vignette Image é 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 é

Blur Vignette Image é 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.

Blur Vignette Image

./registry/components/blurvignette/blurvignetteimg.tsx

import { BlurVignette, BlurVignetteArticle } from '@/components/ui/blur-vignette';
import { cn } from '@/lib/utils';
import Image from 'next/image';
import React from 'react';

function Blurvignetteimg() {
  return (
    <>
      <div className='w-fit mx-auto sm:flex gap-2 justify-center md:p-8 sm:p-4'>
        <BlurVignette radius='24px' inset='10px' transitionLength='80px' blur='15px'>
          <Image
            src='https://img.freepik.com/free-photo/african-kid-enjoying-life_23-2151447718.jpg'
            alt='grid'
            width={600}
            className='mx-auto w-full relative h-full object-cover'
            height={600}
          />
          <BlurVignetteArticle />
        </BlurVignette>
        <BlurVignette radius='24px' inset='10px' transitionLength='80px' blur='15px'>
          <Image
            src='https://img.freepik.com/free-photo/portrait-middle-aged-man-taking-photos-with-device-world-photography-day_23-2151672359.jpg'
            alt='grid'
            width={600}
            className='mx-auto w-full relative h-full object-cover'
            height={600}
          />
          <BlurVignetteArticle />
        </BlurVignette>
      </div>
    </>
  );
}

export default Blurvignetteimg;

./components/ui/blur-vignette.tsx

'use client';
import { cn } from '@/lib/utils';
import type React from 'react';
import { createContext, useContext } from 'react';

interface BlurVignetteContextProps {
  radius?: string;
  inset?: string;
  transitionLength?: string;
  blur?: string;
}

const BlurVignetteContext = createContext<BlurVignetteContextProps>({
  radius: '24px',
  inset: '20px',
  transitionLength: '44px',
  blur: '6px',
});

export const useBlurVignetteContext = () => useContext(BlurVignetteContext);

interface BlurVignetteProps {
  classname?: string;
  children: React.ReactNode;
  radius?: string;
  inset?: string;
  transitionLength?: string;
  blur?: string;
  blurclassname?: string;
}

export const BlurVignette: React.FC<BlurVignetteProps> = ({
  classname,
  children,
  radius = '24px',
  inset = '20px',
  transitionLength = '44px',
  blur = '6px',
}) => {
  return (
    <BlurVignetteContext.Provider value={{ radius, inset, transitionLength, blur }}>
      <div
        className={cn('relative aspect-square overflow-hidden', classname)}
        style={{ borderRadius: radius }}
      >
        {children}
      </div>
    </BlurVignetteContext.Provider>
  );
};
interface BlurVignetteArticleProps {
  children?: React.ReactNode;
  classname?: string;
}

export const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({
  children,
  classname,
}) => {
  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();

  return (
    <div
      className={cn('blur-vignette bottom-0 left-0 w-full h-full z-1', classname)}
      style={
        {
          '--radius': radius,
          '--inset': inset,
          '--transition-length': transitionLength,
          '--blur': blur,
        } as React.CSSProperties
      }
    >
      {children}
    </div>
  );
};

Componentes parecidos