Ink Bloom
A soft cloud of brand colour hangs off the top edge of your hero and bleeds into the page background, darkest against the edge and lighter as it thins out. Bring the cursor close and the colour reaches for it, then drags behind it with real weight as you move. Move away and it lets go. It drifts slowly on its own the whole time. Unlike Mesh Gradient, which fills the whole canvas with several colours, this is a single wash anchored to one edge that reacts to the cursor.
One of 101 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The first version reacted to the mouse everywhere at once. You moved the cursor and the whole band of colour shifted with it, and it felt wrong, kinda like dragging a picture around. So now only a small area around the cursor reacts and the rest keeps drifting as if nothing happened. The second thing was weight. When the colour just followed the mouse it felt light and cheap, so the part right at the edge keeps up with you but the far end lags behind and swings back a bit when you stop, and that is what makes it feel like you are pushing into something that was already flowing.
The rest is yours. Pick the two colours, pick which edge it hangs from, set how deep it reaches and how big the area around the cursor is, and turn the constant movement off if you want it still. Behind a sticky header it can pull itself back into the edge when the page scrolls. It is the smoke itself thinning out, not a box getting squashed, and once it is gone it stops drawing anything until you scroll back up.
What you'll need.
Install
- GSAP
- three
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Ink Bloom work with React and Vue?
- Ink Bloom ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Ink Bloom?
- Yes. Ink Bloom is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Ink Bloom without editing code?
- Ink Bloom exposes 16 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Ink Bloom free?
- Ink Bloom is part of the Annnimate Library, a paid subscription (from EUR 29/month billed quarterly, or EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Ink Bloom is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Ink Bloom or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Ink Bloom in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Ink Bloom on as many projects as you build, with no attribution required.
- Does Ink Bloom respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
