Float Demo

1"use client"
2 
3import { exampleImages } from "@/utils/demo-images"
4import { motion } from "motion/react"
5 
6import Float from "@/components/fancy/blocks/float"
7 
8export default function FloatDemo() {
9  return (
10    <div className="w-dvw h-dvh flex flex-col items-center justify-center bg-white text-foreground dark:text-muted">
11      <div className="flex flex-col items-center justify-center w-full h-full">
12        <motion.div
13          initial={{ opacity: 0, y: 20 }}
14          animate={{ opacity: 1, y: 0 }}
15          transition={{ duration: 0.25, delay: 0.5, ease: "easeOut" }}
16        >
17          <Float>
18            <div className="sm:w-40 sm:h-40 h-32 w-32 md:w-48 md:h-48 shadow-2xl relative overflow-hidden  hover:scale-105 duration-200 cursor-pointer transition-transform">
19              <img
20                src={exampleImages[4].url}
21                className="w-full h-full object-cover absolute top-0 left-0"
22              />
23            </div>
24          </Float>
25        </motion.div>
26        <motion.h2
27          className="pt-8 sm:pt-12 md:pt-16 text-xl sm:text-3xl md:text-4xl uppercase z-10"
28          initial={{ opacity: 0, y: 20 }}
29          animate={{ opacity: 1, y: 0 }}
30          transition={{ duration: 0.25, delay: 0.7, ease: "easeOut" }}
31        >
32          Album of the week
33        </motion.h2>
34      </div>
35    </div>
36  )
37}