Ferrofluid Ink

A pool of magnetic ink that trails the cursor across a light studio backdrop. Press and hold to magnetise it into spikes, and watch it lens the title underneath.

inkliquidmetaballwebglinteractiveherotypography

Open in playground Back to library

Live previewthreejs renderer

loading webgl…

source/ferrofluid-inklive mode

How it works

3 steps

Preview

See the authored component running live.

Customize

Open the playground to tune its controls.

Ship

Copy the TypeScript source and install what it needs.

Runtime package

Install the requirements

verified from renderer

These are the real runtime dependencies declared for this renderer. The product itself is not presented as a package until a published package exists.

npm install three^0.185.1 @react-three/fiber^9.7.0

three^0.185.1 · npm registry ↗@react-three/fiber^9.7.0 · npm registry ↗

Product contract

Renderer: threejs
Version: Not published
Preview: live
Controls: 0 authored controls
Source: ferrofluid-ink

Usage

Use the authored product, not a screenshot

This product is rendered as a live Three.js scene. The preview and exported source are driven by the same repository definition and renderer contract.

Stored product brief

A ferrofluid ink hero on a light studio backdrop: twelve metaballs form a linked pool that follows the cursor with spring physics, three ambient droplets drift around it, and holding the pointer magnetises every ball so they grow ferrofluid spikes. The title sits behind the pool and is refracted through it, with a thin-film sheen and a hard key light in the environment reflection.

Source integrity

Traceable back to the registry

Registry source

ferrofluid-ink

Public slug

ferrofluid-ink

Renderer

threejs

Published version

Not published

Playground

Code, API, and integration

ferrofluid-ink.tsxTypeScript

import { Canvas, useFrame } from "@react-three/fiber";
import { useRef } from "react";
import type { Group } from "three";

// Ferrofluid Ink — SceneUI 3D export (React Three Fiber)
function Rig({ children }: { children: React.ReactNode }) {
  const ref = useRef<Group>(null);
  useFrame((_, delta) => {
    if (ref.current) ref.current.rotation.y += delta * 0.45 * 1;
  });
  return <group ref={ref} scale={1.000}>{children}</group>;
}

export function FerrofluidInk() {
  return (
    <Canvas dpr={[1, 1.5]} camera={{ position: [0, 0, 4], fov: 45 }} style={{ background: "#e4e7ec" }}>
      <ambientLight intensity={0.35} />
      <pointLight position={[3, 3, 3]} intensity={7.8} color="#0b0e14" />
      <pointLight position={[-3, -2, -2]} intensity={4.4} color="#7c93b8" />
      <Rig>
        {/* Paste the matching JSX for this design from the playground renderer,
            or open it in the editor and copy the live scene. */}
      </Rig>
    </Canvas>
  );
}

Nearby in the library

More 3d →

open