Frequently asked questions.

GrabMotion is a library of interactive motion effects for websites.

Explore animated backgrounds, cursor effects, buttons, cards, text effects and overlays.

1. Preview an effect in action.
2. Customise it to match your website.
3. Copy the code into your project.

Yes — free for personal and commercial use. Code snippets are MIT licensed.

• Your projects: Use and customise the code for your website, product or client work.
• Full code access: Unlock it through the free newsletter signup.

No account, password or payment is required.

• Preview and customise: Start immediately, without signing up.
• View and copy full code: Subscribe to the free newsletter when prompted.
• Return later: Access is remembered in that browser. If you switch browsers or clear storage, enter the same email to unlock again.

React, Vue and Vanilla JS are available for every effect.

• CSS and Tailwind: Available for selected effects.
• Other frameworks: Start with the Vanilla JS version and adapt its setup and cleanup to your framework’s lifecycle.

Choose the matching tab in the effect’s code panel before copying.

Tailwind is only required for Tailwind snippets. React, Vue and Vanilla JS versions include their own styling.

• Available tabs vary: CSS and Tailwind appear only where those implementations exist.
• Some effects need JavaScript: Canvas and physics effects cannot always be recreated with CSS alone.
• Copy the complete snippet: Include its supporting styles and scripts.

Adjust the controls and watch the live preview update.

1. Open an effect and try the available settings, such as colours, size, speed, text, particles or spring behaviour.
2. Copy after customising so the generated code includes your changes.
3. Fine-tune in your project by editing the copied styling, content and behaviour.

The controls available depend on the effect.

Yes — use Apply on supported effect cards. It temporarily previews the effect across the GrabMotion interface.

• Available for: Supported backgrounds, cursors and selected card interactions.
• End the preview: Press Escape or choose Stop.
• Use it on your website: Open the effect’s detail page and copy its code. Applying a preview does not install it.

Choose → customise → copy → add to your project.

Select your code format and copy the complete snippet, then follow the instructions for your framework:

• React: Save as a .jsx component, then import and render it. Add types if you use TypeScript.
• Vue: Save as a .vue component and use it in your page.
• Vanilla JS: Include the HTML, styles and script. Run the script after its target elements exist.

Before testing: Keep the required container dimensions and install any dependencies referenced by the snippet.

No GrabMotion package is required. Copy the source code directly into your project.

• Most effects: Use browser APIs and your existing framework.
• Framer Motion: The React versions of Gravity Button and Elastic Cursor need framer-motion. Check the snippet’s imports and install it with npm install framer-motion, or your package manager’s equivalent.
• Tailwind snippets: Require Tailwind to be configured in your project.

Yes — choose the React version.

1. Keep "use client" at the top of interactive component files.
2. Import the component into your page or layout.
3. Run browser APIs in effects or event handlers, rather than during server rendering. This includes window, document and canvas APIs.

Seeing window is not defined? Check for browser API calls outside those client-side lifecycle steps.

Start with the console, container size and interaction trigger.

1. Check the console: Fix missing imports or JavaScript errors, and confirm you copied the complete snippet.
2. Check visibility: Give the container a visible width and height. Look for clipping, stacking order or overlapping elements.
3. Trigger the effect: Try hovering, moving the pointer or clicking.
4. Check reduced motion: This preference can limit or disable animation. Respect it and provide a usable static state.

It depends on the effect. Touchscreens do not have the same persistent cursor or hover behaviour as a mouse.

• Test on a real touch device: Many snippets use pointer events, but behaviour still varies.
• Keep essential actions available: Visitors should be able to use your site without hovering.
• Simplify decorative cursors: Consider disabling them on coarse-pointer devices or providing a touch-friendly alternative.

Reduce the amount of animation running at once.

• Lower the workload: Reduce particles, trail length or density where the effect allows it.
• Use fewer large canvases: Avoid running several heavy effects together.
• Preserve cleanup: Cancel animation frames and remove event listeners when components are removed.
• Pause when off-screen: Consider pausing decorative effects and keep a reduced-motion fallback.

Test on the devices your visitors use, especially mobile hardware.

Check the unlock first, then try copying again.

1. Code still locked? Complete the free newsletter form. Existing subscribers can use the same email.
2. Signup error? Check your connection and retry. Private browsing or blocked storage can prevent access from being remembered.
3. Copy failed? Try Copy code again, or select and copy the code manually from the full-screen editor.

Still stuck? Email support@grabmotion.dev with the effect name, code format, browser and error message.