Skip to content

New238 animated icons, 75 free. See the icons ›

Nexus UI

Liquid Smoke, animated React component

A fluid you stir with the pointer, solved on the GPU. Move and smoke pours out of the cursor, curls into eddies and fades, lit so it reads as a body of smoke with a wet glint on its folds. A slow drift leaves a wisp and a fast sweep pours. Screen it over a dark section or set Multiply for ink on a light one, inside any element or over the whole page. Clicks pass straight through. It sleeps once the trail has gone, skips machines without a GPU, and stays off for people who ask for reduced motion.

  • Pro
  • Background Effects
  • Hover

Play with it

Move over the stage to stir it. Multiply turns the stage light and draws in ink.

Props

PropTypeDefaultWhat it does
area"inside" | "page""inside"inside fills its parent and listens to the pointer there (give the parent position: relative). page is a fixed layer over the whole window.
colorstring"#e9e9ee"Colour of the smoke. Ignored when rainbow is on. With blend set to multiply and no colour given, it draws in near-black.
rainbowbooleanfalseShifts the hue by itself as you move.
blend"normal" | "screen" | "multiply" | "difference""screen"How the smoke sits on what is behind it. screen for dark backgrounds, multiply for ink on light ones.
cursor"native" | "dot" | "ring""ring"The pointer over the area. native keeps the system cursor.
fadenumber2.4How fast the trail fades. Higher is shorter.
forcenumber6000How hard the pointer pushes the fluid.
radiusnumber0.25Size of each puff.
swirlnumber14How much it curls into eddies. 0 flows smooth.
shadingbooleantrueLights the surface so it reads as a body of smoke.
glossnumber0.5The wet glint on the shaded surface, 0 to 1.
cursorColorstring—Colour of the ring or dot. White on dark blends and near-black in ink mode when left out.
autoplaybooleanfalseStirs itself along a slow path until a pointer moves over it, and again after it leaves. Off under reduced motion.
pixelRationumber1.5Highest device pixel ratio the canvas draws at. Lower is lighter on the GPU.
allowSoftwarebooleanfalseAlso run where WebGL is drawn in software (no GPU). Slow, so it is off and the area stays empty there.
classNamestring—Classes for the layer that holds the canvas.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Liquid Smoke is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

More background effects