react-liquid-fillDiscover the core library

v0.1.1 React · MIT · 2.7 kB

Pour colour into your interface.

react-liquid-fill is a tiny React component and hook that reveals icons, buttons and text with an animated liquid edge. On hover, on focus, or as they scroll into view.

Discover the core library
npm i react-liquid-fill

Hover any logo

Works with the icons you already use

  • Devicon
  • Lucide
  • react-icons
  • Heroicons
  • Material Icons
  • Simple Icons
  • Phosphor
  • Your own SVGs

Features

A small API that covers every trigger.

Any content

Icons, logos, images, buttons, links, headings. If it renders, it can fill. Bring your own icon set.

Four triggers

Hover, keyboard focus, scrolling into view, or your own code. Mix them, or scrub progress with setProgress().

2.7 kB gzipped

One component, one hook and one pure function. No dependencies, no stylesheet, no provider.

Accessible by default

Focus triggers the fill, the duplicate layer is hidden from screen readers, and reduced-motion users see an instant change.

Ready for Next.js

Safe to server-render. Works in the App and Pages Router, Vite, Remix and any React 18+ setup.

Fully typed

Written in TypeScript with documented options, so your editor completes every prop.

Playground

Tune it live, copy the code.

Every control maps to a prop. The snippet updates as you change them.

Subject
Trigger
Direction

Move your pointer over it from different sides

tsx
<LiquidFill
  direction="auto"
  duration={{ in: 460, out: 340 }}
  wave={{ amplitude: 0.3 }}
  base={<img src="/angular-outline.svg" alt="" />}
  fill={<img src="/angular.svg" alt="" />}
/>

Use cases

Made for the details people hover over.

Tech stacks and skills

Portfolio and agency pages that list the tools behind the work. Outline at rest, brand colour on hover.

Calls to action

Buttons that invert as the pointer arrives, from whichever side it came. Tap to toggle on touch screens.

Get started

Install, import, done.

Give LiquidFill a base and a fill. Hover and keyboard focus work immediately.

Size
2.7 kB
Dependencies
0
Triggers
4
React
18+
tsx
import { LiquidFill } from "react-liquid-fill";

export function Logo() {
  return (
    <LiquidFill
      base={<img src="/logo-outline.svg" alt="" width={48} height={48} />}
      fill={<img src="/logo.svg" alt="" width={48} height={48} />}
      aria-label="Acme"
      role="img"
    />
  );
}

FAQ

Questions

What does react-liquid-fill do?

It stacks two versions of an element, such as an outlined and a full-colour icon, and reveals the top one with an animated liquid edge when the user hovers, focuses or scrolls to it.

Does it work with my icon library?

Yes. It doesn't ship icons. Pass any two renderings as base and fill: image files, SVG components from react-icons or Lucide, emoji or text.

How big is it?

About 2.7 kB minified and gzipped, with no dependencies besides React.

Can I trigger the fill on scroll instead of hover?

Yes. Set trigger="inView" to fill as elements scroll into view, or call setProgress() to tie the fill to scroll position.

Is it accessible?

Keyboard focus triggers the same effect as hover, the fill layer is aria-hidden so content is announced once, and users who prefer reduced motion get an instant change.

Ready to pour?

Installation, live demos, guides for every icon set and the full API.

Discover the core library