Modern background effects, ready to drop in your projects.

Browse components

Tune every effect live

Drag any component's real props and watch the WebGL preview respond instantly, no code, no guessing at ranges. Land on something you like, then copy it straight into your project.

Open the editor →

Fluid SimulationColor SmokePixel InkCity GridFlow FieldLiquid MetalNeon FlowFire FlowHalftoneParticle FlowSoft SpreadWhisper SmokeInk BloomDust DriftShape ReassemblySnow GlobeFirefly SwarmWeather RadarThermal CameraTopographic ContourField LinesBlueprint SchematicCircuit TraceCoral GrowthMitosisASCII FluidBraille MatrixCRT TerminalFluid SimulationColor SmokePixel InkCity GridFlow FieldLiquid MetalNeon FlowFire FlowHalftoneParticle FlowSoft SpreadWhisper SmokeInk BloomDust DriftShape ReassemblySnow GlobeFirefly SwarmWeather RadarThermal CameraTopographic ContourField LinesBlueprint SchematicCircuit TraceCoral GrowthMitosisASCII FluidBraille MatrixCRT Terminal

Portrait RevealTypographic CloudBoidsCursor RipplesWavesMetaballsDNA HelixFireworksDouble PendulumGlass LensPrismBubblesGame of LifeChladni PlateVerlet ClothL-System TreePhyllotaxisLight CausticsTimes Table CircleHarmonographVoronoiMagnetic FilingsKaleidoscopeAuroraLightningStarfieldEqualizerPortrait RevealTypographic CloudBoidsCursor RipplesWavesMetaballsDNA HelixFireworksDouble PendulumGlass LensPrismBubblesGame of LifeChladni PlateVerlet ClothL-System TreePhyllotaxisLight CausticsTimes Table CircleHarmonographVoronoiMagnetic FilingsKaleidoscopeAuroraLightningStarfieldEqualizer

Effect of your choice

A sample of the catalog: every preview below is the real, live component, not a video.

Browse all 55 components →

Drop in, your way

Install it yourself in three lines, or let an MCP-connected agent pull the exact source straight into your project.

npm package

No shader boilerplate, no uniform plumbing. Install, import, render.

Install

Add the package to your project in seconds.

Terminal

npm install creativeui

Import

Bring in the component you need.

TypeScript

import { Fluid } from 'creativeui'

Render

Use it in your canvas, ready to go.

Canvas

<Canvas>
  <Fluid />
</Canvas>

MCP server

Two tools, search_components and get_component, so your agent can search the whole catalog and pull exact, real source by id, straight into your project. No hallucinated props, no guessed imports.

Claude CodeCursorWindsurfCodex

Connect

One command detects your agent and connects it to the hosted server.

Terminal

npx creativeui install-mcp

Ask

Describe the effect you want, your agent searches the real catalog.

Prompt

Find me a particle effect for a landing page hero

Fetch

Real, working source lands in your project, not a hallucinated API.

TypeScript

import { FireflySwarm } from 'creativeui'

Pricing

Start on Hobby. Upgrade whenever you want the full catalog and source access in one place.

Hobby

$0 forever

5 free-tier components, live in the gallery
npm install creativeui

Browse Hobby components

Pro Monthly

$3.99/month

Cancel anytime

The entire catalog, including every Pro-only release as it ships
MCP server access to the entire catalog, not just the free tier
Live /configure editor for every component, not just the free tier
Copy-paste-ready agent prompts with the real, exact source baked in
Free access to new components as they ship, every week

Get in touch

Recommended

Pro Lifetime

$39.99once

One-time payment, yours forever

The entire catalog, including every Pro-only release as it ships
MCP server access to the entire catalog, not just the free tier
Live /configure editor for every component, not just the free tier
Copy-paste-ready agent prompts with the real, exact source baked in
Free access to new components as they ship, every week

Get in touch