New
AnimationFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 frameworksIntermediate
Loading…
An organic gradient blob that morphs and rotates on a slow loop.
<style>
/* Rotate is GPU-cheap; border-radius drives the organic morph. */
@keyframes blob {
0%, 100% { border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%; transform: rotate(0deg); }
33% { border-radius: 62% 38% 41% 59% / 63% 55% 45% 37%; transform: rotate(120deg); }
66% { border-radius: 38% 62% 58% 42% / 45% 63% 37% 55%; transform: rotate(240deg); }
}
.blob { animation: blob 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
</style>
<div class="blob h-40 w-40 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500" aria-hidden="true"></div>| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 160 | Size |
className | string | '' | Additional classes merged onto the root element. |
Adjust `size` and the gradient stops. The rotation is GPU-cheap and reduced motion freezes the shape in place.