Todos os componentes

Video Blur Vignette

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

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

Video Blur Vignette

./registry/components/blurvignette/blurvignettevideo.tsx

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

function Blurvignettevideo() {
  return (
    <>
      <BlurVignette
        radius='24px'
        inset='10px'
        transitionLength='100px'
        blur='15px'
        classname='h-96 w-full overflow-hidden'
      >
        <video
          autoPlay={true}
          muted
          loop
          content='true'
          className='w-full  h-full object-cover  transition-all hover:scale-110'
        >
          <source
            src='https://cdn.pixabay.com/video/2023/10/19/185726-876210695_large.mp4'
            type='video/mp4'
          />
        </video>
        <BlurVignetteArticle />
      </BlurVignette>
    </>
  );
}

export default Blurvignettevideo;

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