LM-20Art & design

Ferro

A ferrofluid sculpture that follows the cursor, built in code.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A concept site for FERRO, a made-up magnetic liquid sculpture. A black chrome sphere dotted with 54 peaks bulges toward the cursor, ripples when tapped and turns with a drag, circled by orbiting beads and dust. A pinned section lets the scroll take the surface from smooth to fully spiked as the camera moves in, a full-screen field of 72 flowing lines bends toward the pointer and scatters while held, and an edition builder offers three finishes, a name and a PNG download. The sculpture is drawn live with three.js and the field on a 2D canvas, both in code; the two editorial photos are generated images. For artists, galleries, design studios and brands that sell sculptural objects.

How it's made

  1. A sphere with 54 peaks

    An 80 x 56 sphere (64 x 44 on phones) is reshaped on the CPU every frame. 54 peak centres sit on a golden-angle spiral, and each vertex's height comes from how close it is to them, plus a slow three-axis wave.

  2. It follows the cursor

    The pointer sets a field direction in the sphere's own space. The surface bulges toward it, a rippled collar rings the pull, and a tap or Enter sends a ripple that fades over three seconds. A drag turns the sphere with inertia, and arrow keys turn it too.

  3. Chrome from a painted studio

    A 1,024 x 512 canvas painted with a horizon and light and dark strips becomes the reflection map through a PMREM generator. The metal is fully metallic with a clear coat, and its reflections slide as the pointer moves.

  4. A hero with an aura

    Three orbit arcs with beads, 120 dust points (64 on phones) and two pulse rings circle the hero sphere and fade back while someone is sculpting. Seven droplets orbit every sphere.

  5. Scroll wakes the surface

    A 185svh pinned section (160svh on phones) maps the scroll to energy. The peaks grow from 0.08 to 1.73, the camera moves 1.6 units closer and the sphere turns 2.6 radians, while a meter counts from 000 to 100 through three states.

  6. A field you can bend

    A 2D canvas draws 72 lines (54 on phones) of 64 segments that fold around the cursor with a Gaussian falloff, with a dot riding each line. Holding pushes the lines apart and turns them rust, and when nobody touches the field its focus drifts on its own.

  7. Light on phones

    The 3D views cap the pixel ratio at 1.4 on desktop and 1.15 on phones (1.25 and 1 for the field). Each view draws only while on screen, reduced motion stops the clock, and Save composes a 1,400 x 1,600 PNG of the visitor's edition.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • third-party-notices/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

  • README.md

    Start here. What's inside and how to run it.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • ASSETS.md

    Asset list. Every image and font in the kit, where it came from and its license.

  • ARTWORK.md

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • DEPENDENCIES.md

  • VALIDATION.md

  • FILE_MANIFEST.md

  • CHECKSUMS.sha256

  • SOURCE_HASHES.json

  • font-sources.json

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.0 · three.js 0.186 (vendored) · JavaScript (ES modules) · Plain CSS · Canvas 2D · Procedural geometry · Self-hosted DM Sans and Manrope
File size
1.2 MB
Triangles
10,398
Load time
821 ms (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2. Phones get a lighter sphere (64 x 44), 64 dust points and 54 field lines, and the pixel ratio is capped at 1.4 on desktop and 1.15 on phones. Reduced motion stops the clock. Tested in headless Chromium at 1440 x 900 and 390 x 844 with no page errors and no sideways scroll; Safari, Firefox and real phones weren't part of the tests.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand.

Unlimited client projects, one person per license, no resale. Read the license

The sphere, its peaks, the orbiting beads and dust, the reflection studio and the magnetic field are generated in code, with no model files. The editorial photos (two on the page, one spare) are images generated with ChatGPT for this kit, and DM Sans and Manrope are self-hosted under the SIL Open Font License. FERRO is a placeholder name: replace it before launch.

Buy LM-20 Ferro

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.