"use client";
import { AnimatePresence, motion } from "framer-motion";
import React, { useState } from "react";
import "swiper/css";
import "swiper/css/effect-creative";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import { cn } from "@/lib/utils";
const Skiper52 = () => {
const images = [
{
src: "/images/x.com/13.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/32.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/20.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/21.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/19.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/1.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/2.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/3.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "/images/x.com/4.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
];
return (
(1);
return (
);
};
export { HoverExpand_001 };
/**
* Skiper 52 HoverExpand_001 — React + Framer Motion
* Illustrations by AarzooAly - https://x.com/AarzooAly
*
* License & Usage:
* - Free to use and modify in both personal and commercial projects.
* - Attribution to Skiper UI is required when using the free version.
* - No attribution required with Skiper UI Pro.
*
* Feedback and contributions are welcome.
*
* Author: @gurvinder-singh02
* Website: https://gxuri.me
* Twitter: https://x.com/Gur__vi
*/
{images.map((image, index) => (
setActiveImage(index)}
onHoverStart={() => setActiveImage(index)}
>
{activeImage === index && (
{activeImage === index && (
)}
))}
{image.code}