Movement applied to elements that brings interfaces to life and guides user attention through visual storytelling. Thoughtful animation improves usability by providing feedback, showing relationships between elements, and making interactions feel responsive. Framer offers powerful animation tools including appear effects, scroll-based triggers, and component variants with smooth transitions.

The percentage of visitors who leave your site after viewing only one page, without any further interaction. A high bounce rate may indicate irrelevant traffic, poor user experience, or content that doesn't match visitor expectations. Analyze bounce rates alongside other metrics—a blog post with high bounce rate might still be successful if users find their answer.

A JavaScript function that modifies component behavior without changing the component itself, enabling custom interactions and logic. Overrides let you add functionality like form validation, state management, or API calls while keeping components reusable. This separation of concerns keeps your component library clean while allowing page-specific customizations.

A predefined state or version of a component, such as primary/secondary buttons or default/hover/active states. Variants keep related component options organized together while enabling smooth transitions between states. Framer's variant system supports complex interaction patterns with animated transitions between any variant combination.

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.

User-written JavaScript, CSS, or HTML that extends functionality beyond built-in features. Custom code enables advanced interactions, integrations, and unique behaviors tailored to specific requirements. In Framer, add custom code through code components, overrides, or the custom code section in site settings.

An interaction where users click and hold an element to move it, common for reordering lists, sliders, and drawing interfaces. Drag interactions should provide clear visual feedback about what's being moved and where it can be dropped. Consider touch device behavior where drag competes with scrolling gestures.

Recording specific user interactions to measure engagement and understand behavior patterns beyond basic pageviews. Track meaningful events like button clicks, video plays, form starts, and scroll milestones. Framer Metrics includes event tracking for comprehensive behavior analysis.

The ability to navigate and interact with a website using only keyboard controls, essential for accessibility. Test tab order, focus visibility, and keyboard-activated interactions to ensure full functionality. Many users rely on keyboard navigation due to motor disabilities or preference.

Custom code or settings that modify default component behavior without changing the original component definition. Overrides enable page-specific customizations while maintaining reusable component libraries. Use Framer’s code overrides for interactions that go beyond visual property changes.

A CSS property controlling whether an element responds to mouse and touch interactions, useful for making elements click-through or non-interactive. Disable pointer events for decorative overlays that shouldn’t block underlying interactions. Be cautious—removing pointer events can create accessibility issues.

A transform that spins an element around a center point by a specified angle measured in degrees. Rotation adds dynamism and visual interest to layouts and interactions. Combine rotation with other transforms for complex motion sequences.

A group of user interactions with a website occurring within a time frame, typically resetting after 30 minutes of inactivity. Sessions provide context for analyzing user behavior patterns and conversion paths. Track session-based metrics to understand how users engage over visits.

An invisible clickable area overlaid on designs to add interactivity, commonly used in prototypes for click-through demonstrations. Hotspots enable quick prototyping of interactions without building fully functional components. In Framer, prefer native interactive components over hotspots for production.

Design that adapts fluidly to mobile screen sizes through flexible layouts, scaled typography, and touch-friendly interactions. Mobile responsiveness is essential as mobile traffic often exceeds desktop. Test designs on actual devices to catch issues emulators miss.

A web application that loads once and dynamically updates content without full page reloads. SPAs provide app-like experiences with smooth transitions and responsive interactions. Framer supports SPA-style navigation with page transitions.

The path a user takes through your website to accomplish a goal, from entry to completion. Mapping user flows reveals friction points and optimization opportunities. Design flows that minimize steps while providing necessary information at each stage.

The Framer interface panel used to add elements, components, sections, and assets to a page. It centralizes building blocks so you can quickly compose layouts and interactions. See Using the insert panel in Framer.

Interaction to Next Paint (INP) evaluates responsiveness by measuring the delay between a user interaction and the next visual update.

Cumulative Layout Shift (CLS) quantifies visual instability by measuring how much elements move unexpectedly during page load and interaction.

Site Preview is a non-production view of a site used to test design, content, and interactions before a production publish.

Non-interactive Mode executes agent workflows in a command-driven context without live chat interactions, useful for automation and pipelines.

Agent Memory is persisted context that allows an AI agent to remember preferences, facts, and workflow state across sessions.

A Customer Journey maps each step a user takes across touchpoints before, during, and after conversion to identify friction and improve experience.

UI/UX Design integrates visual interface decisions with user experience research and interaction planning to improve product effectiveness and satisfaction.

In Framer, smart components package structure, styling, content controls, and states into reusable building blocks so teams can update repeated UI consistently across a site.

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 selection colors let teams align the small details of browser interaction with the site’s visual system, reinforcing brand polish even in native behaviors.

Framer custom cursors can add interaction feedback, brand personality, or contextual hints while visitors move through highly designed pages.