How to work with GetLayers

Everything else in these docs is the manual route: pick a layer, copy its prompt, paste it into your assistant. The MCP removes the copying — the assistant reaches the library itself, searches it, previews what it finds, and pulls in the pieces it needs while it builds.

It runs as a remote server you connect once, and it works in Claude Code, Cursor, ChatGPT, Windsurf and any other MCP-capable client. After that you describe what you want in your own words — the more detail, and for scenes the more reference images, the better.

It's included with Full Stack Lifetime. The MCP page has the install command for each client, the five things it can do, and prompts you can paste in to have your assistant set itself up.

There is a limit on how much the assistant can pull in one stretch. It is sized for building — a whole site in a sitting is comfortably inside it — and it exists so the library cannot be drained wholesale by anything pointed at it. You are unlikely to meet it while working; if you do, it clears on its own.

A template is the whole thing: layout, motion, type, and the atmosphere that holds them together. Some are heroes for a page you already have; others are full landing pages you can ship once the copy is yours.

As a prompt, your AI rebuilds it as one self-contained HTML file — everything inline, nothing to install. As a source file you get a Next.js project, because templates carry a lot of motion and server-side rendering is what keeps a heavily animated page fast and crawlable.

Some templates still need optimisation for mobile performance and load speed. Next.js covers most of it out of the box — content ships in the initial HTML so crawlers index it without running animation JS, and heavy scenes can be client-side only so they never block first paint.

A 3D scene isn't a page — it's a component you drop into one you're already building: behind a hero, as a section backdrop, as an interactive centrepiece.

It's the one category where the prompt and the source file give you the same thing: a single self-contained HTML file. There's no Next.js version on purpose — wrapping a drop-in scene in a framework hands you a whole project environment when all you wanted was the scene.

The file carries its own Three.js setup, render loop, and shaders. Lift the parts you need, or point your AI at the file and tell it to port the scene into your structure.

Sections are for pages you've already started. One part falls flat — the FAQ accordion, the testimonial slider, the contact form — and a section replaces just that part, without rebuilding the page around it.

As a prompt, it arrives like everything else: one self-contained HTML file you can view straight away and port anywhere.

Sections are meant to be composed, so they're written to be pulled apart. Take the interaction and leave the styling, or keep the layout and rewrite the copy.

You can't prompt your way to a video. A background isn't code to recreate, it's an asset to use: grab the file, or a link to it, and put it in your page.

A background should sit behind your content without competing with it — in practice, lower contrast and slower motion than feels right when you view it on its own.

A gradient is the lightest layer we ship: one fragment shader and a few lines of setup. It reacts to the pointer, holds full frame rate on a phone, and costs a fraction of what a 3D scene does.

Every gradient carries a set of colour presets, and the palette is yours to move — pick a preset or push the colours where you want them. What you copy is the version you tuned, not the default.

Because it's plain WebGL there's nothing to install around it. The same handful of lines drops into a React component, a static HTML page, or a theme you didn't write.