SOURCE

const { createApp } = PetiteVue
const { log, dir, table, clear, warn, error } = console
clear()

createApp({
    data: [
        { icon: 'ri-sword-fill', title: 'Apartments', desc: 'Places to be apart. Wait, what?' },
        { icon: 'ri-bell-fill', title: 'Unicorns', desc: 'A single corn. Er, I mean horn.' },
        { icon: 'ri-ghost-smile-fill', title: 'Blender Phones', desc: 'These absolutely deserve to exist.' },
        { icon: 'ri-rocket-2-fill', title: 'Adios', desc: 'See you...' },
        { icon: 'ri-robot-2-fill', title: 'I mean hello', desc: '...over here.' },
        { icon: 'ri-game-fill', title: 'Otters', desc: 'Look at me, imma cute lil fella.' },
    ],
    pic: null,
    onMouseMove(e) {
        this.pic.setAttribute('style', `
            top:  ${e.clientY}px;
            left: ${e.clientX}px;
        `)
    },
    ref(name, el) {
        this[name] = el
    }
}).mount()

<div v-scope class="flex flex-col justify-center items-center w-full h-full bg-black overflow-hidden" @mousemove="onMouseMove">
    <div class="absolute p-40 left-0 top-0 -translate-x-1/2 -translate-y-1/2 mix-blend-overlay pointer-events-none bg-gradient-radial z-20" @vue:mounted="ref('pic',$el)"></div>
    <h1 class="w-fit pb-4 text-3xl text-white/50 font-medium">Magical Hover Effect</h1>
    <ul class="grid grid-cols-3 gap-2 mx-auto text-white/50">
        <li class="w-[240px] h-[180px] flex flex-col justify-center p-4 border border-white/20 bg-white/5 rounded-2xl cursor-pointer duration-500 hover:bg-white/10 active:scale-90" v-for="(item, index) in data">
            <i :class="`mx-auto text-6xl ${item.icon}`"></i>
            <div class="flex gap-2 mt-3">
                <i :class="`${item.icon}`"></i>
                <div class="py-0.5">
                    <h2 class="text-sm">{{item.title}}</h2>
                    <p class="text-xs text-white/50 line-clamp-1">{{item.desc}}</p>
                </div>
            </div>
        </li>
    </ul>
</div>

<script type="tailwind-config">
{
    theme: {
        extend: {
            width: {
                'fit': 'fit-content'
            },
            backgroundImage: {
                'gradient-radial': 'radial-gradient(#ffffffff 0%, #ffffff00 70%)'
            },
        },
    }
}
</script>

html, body {
    height: 100%;
}