The visual indicator showing the mouse position on screen, which changes shape to indicate possible interactions. Custom cursors can reinforce branding and provide feedback about interactive elements. In Framer, the cursor becomes contextual tools for placing elements and manipulating the canvas during design.

Framer Motion is now Motion, a high-performance animation library for React and JavaScript. The old name still appears in tutorials and search results, but current docs and packages use Motion.

If you are building a website in Framer, you do not need to install Motion or write Framer Motion code. Framer has Motion-powered animation tools built into the canvas, so you can create polished animations visually: appear effects, scroll animations, hover and tap states, transitions, and component variants. That gives you Framer Motion-style results without setting up npm, importing an animation library, or maintaining custom React animation code.

Bringing websites to life with animation in Framer

2:31

If your goal is to build a website, start with Framer instead of reaching for animation code first. You can design the page, add motion, and publish from one visual workflow — then use custom code only when a project truly needs it.

Use Motion directly when you are building a custom React or JavaScript app and need code-level animation control. Use Framer when you want to design, animate, and publish a site visually.

To learn the no-code path, explore Framer’s Academy, or open the Framer homepage to start building visually.

Generative Fill replaces or creates content inside selected areas while matching surrounding context. It often depends on accurate Image Segmentation and pairs with Generative Expand for broader canvas edits.

Generative Expand increases image boundaries and predicts plausible continuation beyond original edges. It is commonly used alongside Generative Fill in broader Text-to-Image Generation workflows.

What is vibe design?

Vibe design is the practice of directing the look, feel, and layout of a user interface through natural language prompts and AI-assisted tools instead of manually adjusting every canvas detail.

Why it matters

It helps teams move from intent to interface faster. Instead of starting with blank frames, spacing rules, and individual style decisions, creators can describe the desired outcome, then refine the generated result through iteration.

Example

A designer might ask for a calm editorial landing page, a dense SaaS comparison section, or a playful onboarding screen. The prompt sets the direction, while follow-up edits tune hierarchy, copy, layout, and interaction details.

How it works in Framer

In Framer, vibe design works best when the prompt describes the visible goal clearly: audience, structure, density, tone, and important content. The AI can then create or revise editable canvas elements while keeping the result aligned with the site’s design system.

A canvas agent is an AI assistant that edits, refines, and structures a website directly on the design canvas while keeping the work editable.

In AI-assisted website creation, canvas agent helps teams move faster without losing control of structure, content, performance, or editable design details.

Framer plugins help teams add new capabilities to the editor, automate repetitive work, and connect design workflows to external services without leaving the project.

Framer’s transform controls can add dimensional motion and perspective to cards, mockups, and interaction states while keeping the elements editable on the canvas.

Framer’s vector tools let designers craft visual assets in place, keeping illustrations, masks, and interface details editable alongside the rest of the site.

In Framer workflows, exportable layers help teams move graphics, images, and design assets between site production, marketing, and documentation needs.

Framer comments keep feedback connected to the exact design context, helping teams review pages, resolve decisions, and collaborate without scattering notes across tools.

In Framer, multiplayer cursors make collaboration feel immediate by showing teammates’ presence on the canvas, helping teams design together without losing context.

In Framer, SSO supports larger teams by connecting authentication to company identity systems, simplifying onboarding, permissions, and account security.