Install component
"use client"; import { useState } from "react"; import { Lens } from "@/components/ui/lens"; import Image from "next/image"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; export function ImageOnly() { const [hovering, setHovering] = useState(false); return ( <div> <div className="w-full relative rounded-3xl overflow-hidden max-w-md mx-auto bg-gradient-to-r from-[#1D2235] to-[#121318] p-8 my-10"> <Rays /> <Beams /> <div className="relative z-10"> <Lens hovering={hovering} setHovering={setHovering}> <Image src="https://images.unsplash.com/photo-1713869820987-519844949a8a?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" width={500} height={500} className="rounded-2xl" /> </Lens> <motion.div animate={{ filter: hovering ? "blur(2px)" : "blur(0px)", }} className="py-4 relative z-20" > <h2 className="text-white text-2xl text-left font-bold"> Apple Vision Pro </h2> <p className="text-neutral-200 text-left mt-4"> The all new apple vision pro was the best thing that happened around 8 months ago, not anymore. </p> </motion.div> </div> </div> </div> ); } export function ImageAndReactComponent() { const [hovering, setHovering] = useState(false); return ( <div> <Lens> <div className="w-full relative rounded-3xl overflow-hidden max-w-md mx-auto bg-gradient-to-r from-[#1D2235] to-[#121318] p-8 my-10"> <Rays /> <Beams /> <div className="relative z-10"> <Image src="https://images.unsplash.com/photo-1713869820987-519844949a8a?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" width={500} height={500} className="rounded-2xl" /> <motion.div className="py-4 relative z-20"> <h2 className="text-white text-2xl text-left font-bold"> Apple Vision Pro </h2> <p className="text-neutral-200 text-left mt-4"> The all new apple vision pro was the best thing that happened around 8 months ago, not anymore. </p> </motion.div> </div> </div> </Lens> </div> ); } const Beams = () => { return ( <svg width="380" height="315" viewBox="0 0 380 315" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute top-0 left-1/2 -translate-x-1/2 w-full pointer-events-none" > <g filter="url(#filter0_f_120_7473)"> <circle cx="34" cy="52" r="114" fill="#6925E7" /> </g> <g filter="url(#filter1_f_120_7473)"> <circle cx="332" cy="24" r="102" fill="#8A4BFF" /> </g> <g filter="url(#filter2_f_120_7473)"> <circle cx="191" cy="53" r="102" fill="#802FE3" /> </g> <defs> <filter id="filter0_f_120_7473" x="-192" y="-174" width="452" height="452" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="56" result="effect1_foregroundBlur_120_7473" /> </filter> <filter id="filter1_f_120_7473" x="70" y="-238" width="524" height="524" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_120_7473" /> </filter> <filter id="filter2_f_120_7473" x="-71" y="-209" width="524" height="524" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_120_7473" /> </filter> </defs> </svg> ); }; const Rays = ({ className }: { className?: string }) => { return ( <svg width="380" height="397" viewBox="0 0 380 397" fill="none" xmlns="http://www.w3.org/2000/svg" className={cn( "absolute left-0 top-0 pointer-events-none z-[1]", className )} > <g filter="url(#filter0_f_120_7480)"> <path d="M-37.4202 -76.0163L-18.6447 -90.7295L242.792 162.228L207.51 182.074L-37.4202 -76.0163Z" fill="url(#paint0_linear_120_7480)" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} opacity="0.3" filter="url(#filter1_f_120_7480)" > <path d="M-109.54 -36.9027L-84.2903 -58.0902L178.786 193.228L132.846 223.731L-109.54 -36.9027Z" fill="url(#paint1_linear_120_7480)" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} opacity="0.86" filter="url(#filter2_f_120_7480)" > <path d="M-100.647 -65.795L-69.7261 -92.654L194.786 157.229L139.51 197.068L-100.647 -65.795Z" fill="url(#paint2_linear_120_7480)" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} opacity="0.31" filter="url(#filter3_f_120_7480)" > <path d="M163.917 -89.0982C173.189 -72.1354 80.9618 2.11525 34.7334 30.1553C-11.495 58.1954 -106.505 97.514 -115.777 80.5512C-125.048 63.5885 -45.0708 -3.23233 1.15763 -31.2724C47.386 -59.3124 154.645 -106.061 163.917 -89.0982Z" fill="#8A50FF" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} filter="url(#filter4_f_120_7480)" > <path d="M34.2031 13.2222L291.721 269.534" stroke="url(#paint3_linear_120_7480)" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} filter="url(#filter5_f_120_7480)" > <path d="M41 -40.9331L298.518 215.378" stroke="url(#paint4_linear_120_7480)" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} filter="url(#filter6_f_120_7480)" > <path d="M61.3691 3.8999L317.266 261.83" stroke="url(#paint5_linear_120_7480)" /> </g> <g style={{ mixBlendMode: "plus-lighter" }} filter="url(#filter7_f_120_7480)" > <path d="M-1.46191 9.06348L129.458 145.868" stroke="url(#paint6_linear_120_7480)" strokeWidth="2" /> </g> <defs> <filter id="filter0_f_120_7480" x="-49.4199" y="-102.729" width="304.212" height="296.803" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter1_f_120_7480" x="-115.54" y="-64.0903" width="300.326" height="293.822" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter2_f_120_7480" x="-111.647" y="-103.654" width="317.434" height="311.722" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="5.5" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter3_f_120_7480" x="-212.518" y="-188.71" width="473.085" height="369.366" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="48" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter4_f_120_7480" x="25.8447" y="4.84521" width="274.234" height="273.065" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter5_f_120_7480" x="32.6416" y="-49.3101" width="274.234" height="273.065" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter6_f_120_7480" x="54.0078" y="-3.47461" width="270.619" height="272.68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_120_7480" /> </filter> <filter id="filter7_f_120_7480" x="-9.2002" y="1.32812" width="146.396" height="152.275" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_120_7480" /> </filter> <linearGradient id="paint0_linear_120_7480" x1="-57.5042" y1="-134.741" x2="403.147" y2="351.523" gradientUnits="userSpaceOnUse" > <stop offset="0.214779" stopColor="#AF53FF" /> <stop offset="0.781583" stopColor="#B253FF" stopOpacity="0" /> </linearGradient> <linearGradient id="paint1_linear_120_7480" x1="-122.154" y1="-103.098" x2="342.232" y2="379.765" gradientUnits="userSpaceOnUse" > <stop offset="0.214779" stopColor="#AF53FF" /> <stop offset="0.781583" stopColor="#9E53FF" stopOpacity="0" /> </linearGradient> <linearGradient id="paint2_linear_120_7480" x1="-106.717" y1="-138.534" x2="359.545" y2="342.58" gradientUnits="userSpaceOnUse" > <stop offset="0.214779" stopColor="#9D53FF" /> <stop offset="0.781583" stopColor="#A953FF" stopOpacity="0" /> </linearGradient> <linearGradient id="paint3_linear_120_7480" x1="72.701" y1="54.347" x2="217.209" y2="187.221" gradientUnits="userSpaceOnUse" > <stop stopColor="#AF81FF" /> <stop offset="1" stopColor="#C081FF" stopOpacity="0" /> </linearGradient> <linearGradient id="paint4_linear_120_7480" x1="79.4978" y1="0.191681" x2="224.006" y2="133.065" gradientUnits="userSpaceOnUse" > <stop stopColor="#AF81FF" /> <stop offset="1" stopColor="#C081FF" stopOpacity="0" /> </linearGradient> <linearGradient id="paint5_linear_120_7480" x1="79.6568" y1="21.8377" x2="234.515" y2="174.189" gradientUnits="userSpaceOnUse" > <stop stopColor="#B981FF" /> <stop offset="1" stopColor="#CF81FF" stopOpacity="0" /> </linearGradient> <linearGradient id="paint6_linear_120_7480" x1="16.119" y1="27.6966" x2="165.979" y2="184.983" gradientUnits="userSpaceOnUse" > <stop stopColor="#A981FF" /> <stop offset="1" stopColor="#CB81FF" stopOpacity="0" /> </linearGradient> </defs> </svg> ); }; export { ImageOnly, ImageAndReactComponent };