Skip to content

Open source · MIT · 30 components

Ship 3D that stops the scroll.

Production-ready React Three Fiber components you copy into your project. No dependency. No lock-in. Own every line.

$npx facet3d add image-particles
Browse componentsFor AI agents

Why Facet

Source you own, not a dependency you rent

Copy, don't install

Components land in your repo as source. Tweak anything.

A playground for every prop

Tune color, speed, geometry live, then copy the exact config.

Built for AI agents

MCP server, llms.txt, machine-readable registry, and a CLI your agent can drive.

The registry

Components

Production-ready 3D building blocks. Install one, own the source.

30 components

01Flagship

Image Particles

Particles that assemble into any text or image, and scatter under the cursor.

image-particles

02

Hero Blob

Morphing distortion sphere: the classic 3D hero centerpiece.

hero-blob

03

Particle Field

Interactive particle cloud that reacts to the cursor.

particle-field

04

Galaxy

Procedural spiral galaxy with tens of thousands of shader-driven stars.

galaxy

05

Globe Arcs

Interactive dotted globe with animated connection arcs: the infra-startup staple.

globe-arcs

06

Aurora

Animated aurora gradient shader: the landing-page background everyone wants.

aurora

07

Ripple Plane

Touch-responsive water surface. Move your cursor and watch it ripple.

ripple-plane

08

Node Network

3D plexus network of drifting, connected nodes, built for AI landing pages.

node-network

09

Cursor Trail

A fluid ribbon of light that follows the cursor.

cursor-trail

10

Audio Visualizer

Audio-reactive frequency rings: microphone or built-in simulation.

audio-visualizer

11

Floating Shapes

Drifting geometric primitives for ambient backgrounds.

floating-shapes

12

Wave Grid

Shader-driven undulating wireframe terrain.

wave-grid

13

3D Text

Extruded 3D typography with environment-lit materials.

text-3d

14

Model Viewer

Drop-in GLTF model viewer with staging and orbit controls.

model-viewer

15

Holo Card

Holographic fresnel card with an iridescent sheen.

holo-card

16

Scroll Camera

Scroll-driven camera flythrough scene.

scroll-camera

17

Glass Prism

Cinematic glass dispersion crystal with real refraction and chromatic aberration.

glass-prism

18

Face Puppet

Webcam face-tracked spirit head that mirrors your expressions, with mouse-follow fallback.

face-puppet

19

God Rays

Volumetric light shafts with drifting dust: cinematic background glow, zero post-processing.

god-rays

20

Portal

A standing portal that renders another world live, with true perspective parallax.

portal

21

Silk Cloth

Silk banner billowing in gusting wind, with smooth pointer push and drag.

silk-cloth

22

Lightning Arcs

Branching electric arcs with a white-hot core, strike flicker, and pointer chasing.

lightning-arcs

23

Character Controller

Third-person character controller: WASD movement, jumping, and a collision-aware camera.

character-controller

24

Procedural Terrain

Seeded noise terrain with elevation biomes, from sand to snow.

procedural-terrain

25

Ocean

Gerstner-wave water with fresnel, crest foam, and sun glint.

ocean

26

VFX Burst

GPU particle bursts with game-ready presets: explosion, fire, smoke, magic.

vfx-burst

27

Day/Night Sky

Procedural sky dome with a full sun cycle, stars, and drifting clouds.

day-night-sky

28

Grass Field

Tens of thousands of instanced grass blades swaying in the wind.

grass-field

29

Avatar Maker

Design a stylized 3D character with expressions and export it as a .glb for your game.

avatar-maker

30

Drift Car

Arcade drift car with raycast suspension, handbrake slides, smoke, and skid marks.

drift-car

Agent-native

Made for AI agents

Any coding agent, like Claude Code, Cursor, or Copilot, can consume the Facet registry directly. The MCP server lets agents browse components, read their docs and source, and install them into your project natively. The CLI does the same from the terminal.

mcp config
{
  "mcpServers": {
    "facet": {
      "command": "npx",
      "args": ["-y", "@facet3d/mcp"]
    }
  }
}
terminal
npx facet3d docs image-particles
npx facet3d add image-particles