Get started.

Choose a component

• Free. Free components are under the MIT licence, with their code on their page and no account needed.
• Pro. The prompt, the React component, the script and the embed come with buying it. A Pro page shows the effect and the names of its settings.

With your AI assistant

1. Tune it, if you like

   On a free component's page, move the Settings beside the demo, and pick its colors by role: your brand, your secondary. The prompt carries only what you changed.

2. Copy the prompt

   On the component's page, Copy the AI prompt.

3. Paste it and say where

   In Claude, Cursor, ChatGPT or any assistant. For instance: Add this magnetic effect to the main button of my hero.

MCP server

1. Add the server to your tool

   claude codeclaudecursor

   TerminalCopy

   claude mcp add --transport http foundry44 https://foundry44.dev/mcp

   Any other tool that takes a remote MCP server over HTTP takes the same address.

2. Ask for an effect

   • Find a Foundry44 card with a soft light that follows the cursor, and add it to my pricing.
   • Make the about paragraph light up word by word as I scroll, with word-fill from Foundry44.
   • Which free Foundry44 text effects are there? Add the best one to my hero headline.
   A Pro component shows up in the search too; the assistant gets the link to its page, not its code.

React

1. Add it with the shadcn CLI

   pnpmnpmyarnbun

   TerminalCopy

   pnpm dlx shadcn@latest add https://foundry44.dev/r/magnetic.json

   Without shadcn/ui, the component's page gives both files to copy by hand.

2. Use it

   ReactCopy

   import { Magnetic } from "@/components/ui/magnetic";
   
   export function Hero() {
     return (
       <Magnetic strength={0.5}>
         <a href="/contact">Start a project</a>
       </Magnetic>
     );
   }

3. Or install the package

   The free components are also on npm, as @foundry44/react. The code then stays in node_modules and updates with the package.
   pnpmnpmyarnbun

   TerminalCopy

   pnpm add @foundry44/react

   ReactCopy

   import { TextScramble } from "@foundry44/react";
   
   export function Hero() {
     return <TextScramble>Start a project</TextScramble>;
   }

Plain JavaScript

1. Load the script and mark an element

   HTMLCopy

   <script src="magnetic.js" defer></script>
   
   <a href="/contact" data-f44="magnetic" data-f44-strength="0.5">
     Start a project
   </a>

   Download the script, or a zip with its demo, from the component's page.

2. Drive it from your code, if you need to

   JavaScriptCopy

   const instance = Foundry44.magnetic(element, { strength: 0.5 });
   instance.update({ radius: 120 }); // any setting, live
   instance.destroy();               // everything removed, styles restored
   
   Foundry44.init(); // set up elements added after the page loaded

3. Or install the package, with a bundler

   The free components are also on npm, as @foundry44/core: one import per component, and no data-f44 set-up.
   pnpmnpmyarnbun

   TerminalCopy

   pnpm add @foundry44/core

   JavaScriptCopy

   import { textScramble } from "@foundry44/core/text-scramble";
   
   const scramble = textScramble(document.querySelector("h1"));
   scramble.destroy();

Embed on a site builder

1. Paste the embed

   On the component's page, open Embed and copy the block. Paste it where your builder takes custom HTML: an embed or code block, or the site's footer code.

2. Mark the element

   Give the element the attribute data-f44 with the component's name, through your builder's custom attributes or in its HTML.

What every component does

• Reduced motion. It follows the visitor's prefers-reduced-motion setting: the effect settles at once.
• Server rendering. It does nothing on the server, so it is safe in Next.js and any server-rendered page.
• Clean up. Destroyed, it removes its listeners and observers and restores the element's styles.
• Light. It animates only what the browser moves cheaply, and rests when nothing moves or when it is off screen.