library of premium animated SVG components for modern websites. live link

The modern web has become increasingly generic.

GeckoFX exists to bring back personality, engineering aesthetics, and visual identity through high-quality animated technical illustrations.

Making the internet less slope.

CLI Usage

GeckoFX ships with a developer-first CLI that lets you install components, search the registry, and scaffold AI agent skills — all from your terminal.

Installation

Install the geckofx package in your project to use the CLI:

npm install geckofx
# or
bun add geckofx
# or
yarn add geckofx

You can also run it without installing via npx.

Commands

npx geckofx

Launch an interactive multiselect with a live searchable list of every component in the registry. Pick any number of components and they get added to your project.

npx geckofx

npx geckofx add <name...>

Add one or more components by name directly. Already have the component? The CLI will prompt you before overwriting.

# add a single component
npx geckofx add ConnectCube

# add multiple components at once
npx geckofx add ConnectCube ServerRack AI-Chip

Components are written to src/components/fx/<Name>.tsx.

npx geckofx search <query>

Query the component registry like a search engine. The query can be a component name, a keyword, a category, or even a description (e.g. fan rotating). Results are printed with the component name, description, recommendation status, and similar components.

npx geckofx search web3
npx geckofx search satellite

npx geckofx find

Loop-based search-and-add. Enter a query, get a filtered list of matching components, select the ones you want — then repeat with a new query until you're done. Perfect for exploring the registry.

npx geckofx find

npx geckofx skill

Scaffold the GeckoFX skill into your project as an AI agent skill for building SaaS landing pages with GeckoFX components.

npx geckofx skill

By default the skill is installed to .agents/skills/geckofx-saas-landing-page-skill in your project root. Use --claude and/or --cursor to install it for those agents instead - the flags can be combined:

# install to .claude/skills
npx geckofx skill --claude

# install to both .claude/skills and .cursor/skills
npx geckofx skill --claude --cursor