Pro

Chrome Blob

A metallic sphere that distorts as it turns, with studio reflections.

The reflections come from light panels built in code, so no HDR file is loaded. Use it behind a headline or next to a product name.

Buy all access, USD 10

What you get

The full source and any assets are delivered after checkout. One payment of USD 10 unlocks every pro element. The start of the file is shown here.

ChromeBlob.tsxPro · full source after checkout
"use client";

/**
 * Chrome Blob — a liquid-metal sphere with studio reflections.
 *
 * Self-contained: three, @react-three/fiber, @react-three/drei.
 * The reflections come from light panels inside a procedural
 * environment, so there is no HDR file to fetch or host.
 *
 *   <ChromeBlob color="#d9b36a" distort={0.4} speed={1.6} />
 */
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { Environment, Float, Lightformer, MeshDistortMaterial } from "@react-three/drei";
import { useRef } from "react";
import type { Group } from "three";

export type ChromeBlobProps = {
  color?: string;
  /** 0 = sphere, 0.8 = fully liquid. */
  distort?: number;
  speed?: number;
  className?: string;
};

function Blob({ color, distort, speed }: Required<Omit<ChromeBlobProps, "className">>) {
  const group = useRef<Group>(null);
  const pointer = useThree((state) => state.pointer);

Inside

  • React Three Fiber scene with a light-panel environment
  • Distortion with speed and amplitude props
  • Pointer parallax and idle float
  • Props for colour, distortion and speed
  • Mounts when visible, unmounts when not

Install

npm install three @react-three/fiber @react-three/drei

One file.

Kind
3D objects
Licence
Unlimited projects
Runs on
React 19
Price
USD 10, all access

More elements

All elements
3D objects
Pro
Orbit Rings: open the element page

Orbit Rings

Five metal rings on tilted orbits, each turning at its own speed.

Price
USD 10, all access
Built with
React Three Fiber

FAQ

What you get, what it runs on, what it costs to run and what the licence allows.

01

What do I get?

One React component file per element, plus any shader or asset files it needs. Members of a series also get the small engine file they share. Free elements are copied from the page. Pro elements are a download after one payment of USD 10, which unlocks all of them. Each element imports only public packages, which are listed on its page.

02

What does it run on?

React 19. The 3D and shader elements use three.js through React Three Fiber. The 2D ones use Framer Motion or plain CSS and canvas. They work in Next.js, Vite, Remix and any other React setup. Framer and Webflow users can embed an element as a code component.

03

Can I change the colours and speed?

Yes. Every element exposes its look as props, the same controls shown on its page. Anything beyond the props is yours to edit in the file.

04

Can I use these in a deck, a magazine or a film?

Yes. Every element page has a Save frame button that downloads the current frame as a PNG at the size shown. Make the browser window large for a print-size still. For motion, record the page or ask us for a rendered clip. The licence covers web, print, decks and video, for your own work and your clients' work.

05

How heavy is it?

The 3D elements mount when they scroll into view and unmount when they leave, so an element off screen costs nothing. The shader backgrounds cost a fraction of a video background. The 2D elements are a few kilobytes.

06

What is the licence?

Free elements are MIT. Use them anywhere, including client work. Pro elements are licensed to you for unlimited projects of your own and your clients'. You may not resell or redistribute the source itself.

07

Can you make one for us?

Yes. A custom element, such as your product in 3D or a branded shader, is a small project quoted up front. All-access members are asked first about what we build next.