Clipping

A single signed-distance test slices an animated icosphere, while a fitted disk reveals the moving cross-section.

Open fullscreen
"use client";
 
import { useEffect, useRef } from "react";
import { createRenderer } from "./renderer";
 
export function Example() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
 
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
 
    const renderer = createRenderer(canvas);
    void renderer.ready;
    return () => renderer.dispose();
  }, []);
 
  return <canvas ref={canvasRef} className="block h-full w-full bg-black" />;
}