Todos os componentes

Blur Vignette Card

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

./registry/components/blurvignette/blurvignettecard.tsx

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

function Blurvignettecard() {
  return (
    <>
      <div className='w-fit mx-auto sm:flex gap-2 justify-center md:p-8 sm:p-4'>
        <BlurVignette radius='15px' inset='100px' transitionLength='200px' blur='15px'>
          <Image
            src='https://img.freepik.com/free-photo/cartoon-superhero-illustration_23-2151732547.jpg'
            alt='grid'
            width={600}
            className='mx-auto w-full relative h-full object-cover'
            height={600}
          />
          <BlurVignetteArticle classname='h-[35%] w-[96%] ml-2 mt-auto mb-1 border border-neutral-900/20 rounded-xl text-white '>
            <article className=' py-5 px-3'>
              <h1 className='2xl:text-3xl text-2xl'>UiLayout</h1>
              <p className='2xl:text-sm text-xs'>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, quaerat ab? Rerum
                facilis dignissimos voluptatum!
              </p>
            </article>
          </BlurVignetteArticle>
        </BlurVignette>
        <BlurVignette radius='15px' inset='100px' transitionLength='200px' blur='15px'>
          <Image
            src='https://img.freepik.com/free-photo/halloween-scene-illustration-anime-style_23-2151794328.jpg'
            alt='grid'
            width={600}
            className='mx-auto w-full relative h-full object-cover'
            height={600}
          />
          <BlurVignetteArticle classname='h-[35%] w-[96%] ml-2 mt-auto mb-1 border border-neutral-900/20 text-white '>
            <article className=' py-5 px-3'>
              <h1 className='2xl:text-3xl text-2xl'>UiLayout</h1>
              <p className='2xl:text-sm text-xs'>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, quaerat ab? Rerum
                facilis dignissimos voluptatum!
              </p>
            </article>
          </BlurVignetteArticle>
        </BlurVignette>
      </div>
    </>
  );
}

export default Blurvignettecard;

./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