Pixel bloom

<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>

<div class="m-pxb-row"><a class="m-pxb-card" href="#pixel-bloom" data-motion="pixel-bloom"><b>Warm start</b><span>Pixels bloom from where the pointer comes in.</span></a><a class="m-pxb-card" href="#pixel-bloom" data-motion="pixel-bloom" data-motion-colors="#8a7dff,#3fd7ff,#c9c2ff,#5f8bff" data-motion-from="center"><b>Cool center</b><span>This one blooms from the middle out.</span></a><a class="m-pxb-card" href="#pixel-bloom" data-motion="pixel-bloom" data-motion-colors="#3fdc9b,#b8f27c,#2fb8a6" data-motion-gap="8"><b>Big pixels</b><span>A wider grid of greens.</span></a></div>

import { PixelBloom } from "./motion/react/PixelBloom";

<PixelBloom>Your content</PixelBloom>

<script setup lang="ts">
import PixelBloom from "./motion/vue/PixelBloom.vue";
</script>

<template>
  <PixelBloom>Your content</PixelBloom>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "pixel-bloom";