blur-vignette-video

1import { cn } from '@/lib/utils';
2import Image from 'next/image';
3import React from 'react';
4import {
5  BlurVignette,
6  BlurVignetteArticle,
7} from '@/components/ui/blur-vignette';
8
9function index() {
10  return (
11    <>
12      <BlurVignette
13        radius='24px'
14        inset='10px'
15        transitionLength='100px'
16        blur='15px'
17        classname='h-96 w-full overflow-hidden'
18      >
19        <video
20          autoPlay={true}
21          muted
22          loop
23          content='true'
24          className='w-full  h-full object-cover  transition-all hover:scale-110'
25        >
26          <source
27            src='https://cdn.pixabay.com/video/2023/10/19/185726-876210695_large.mp4'
28            type='video/mp4'
29          />
30        </video>
31        <BlurVignetteArticle />
32      </BlurVignette>
33    </>
34  );
35}
36
37export default index;