Pro

Prism

A glass knot that refracts what sits behind it.

Real refraction with colour fringing at the edges, turning slowly under studio light panels. The heaviest element in the library; it mounts only when on screen.

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.

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

/**
 * Prism — a glass knot that refracts whatever sits behind it.
 *
 * Self-contained: three, @react-three/fiber, @react-three/drei. Real
 * refraction through drei's transmission material, lit by light
 * panels in a procedural environment. The heaviest element in the
 * library; it mounts only when on screen.
 *
 *   <Prism tint="#f7efe3" ior={1.4} aberration={0.06} speed={0.5} />
 */
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { Environment, Float, Lightformer, MeshTransmissionMaterial } from "@react-three/drei";
import { useRef } from "react";
import type { Group, Mesh } from "three";

export type PrismProps = {
  tint?: string;
  /** Index of refraction: 1 = air, 1.5 = glass, 2.4 = diamond. */
  ior?: number;
  /** Colour fringing at the edges. */
  aberration?: number;
  speed?: number;
  className?: string;
};

function Knot({ tint, ior, aberration, speed }: Required<Omit<PrismProps, "className">>) {

Inside

  • Transmission material with thickness, IOR and chromatic aberration
  • Light-panel environment, no HDR file
  • Pointer parallax and idle float
  • Props for tint, IOR, fringing and speed

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
Chrome Blob: open the element page

Chrome Blob

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

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.