A specific screen width where your design adapts to a different layout, ensuring your site looks good on all devices from phones to large monitors. Strategic breakpoint choices prevent awkward in-between states where content becomes cramped or overly stretched. Framer's breakpoint system lets you customize layouts at each size while maintaining a single source of truth for your design.

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 reusable design element that maintains consistency across your project, from simple buttons to complex navigation systems. Components create a single source of truth—update the main component and all instances reflect the change. In Framer, components can have variants, responsive states, and interactive behaviors.

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 appearance of a page or component when no content is available, such as an empty search results or new user dashboard. Well-designed empty states guide users toward actions that populate the interface. Include helpful messaging and clear calls to action rather than leaving users stranded.

The visual appearance of an interactive element when it receives keyboard focus, which is critical for accessibility. Focus states must remain clearly visible; do not remove them without providing an equally visible replacement. A strong focus style improves usability for keyboard and assistive-technology users.

The visual appearance of an element when a user's cursor is positioned over it, providing feedback and indicating interactivity. Hover states are essential for buttons, links, and clickable elements—without them, users can't tell what's interactive. Remember that hover doesn't exist on touch devices, so don't rely on it for essential information.

Any way users engage with your interface, from clicks and hovers to scrolls and gestures. Well-designed interactions feel responsive and intuitive while providing clear feedback. Framer enables complex interactions through triggers, animations, and state changes without coding.

An animation tool and runtime for creating interactive graphics that respond to user input in real time. Rive animations are lightweight and highly interactive, enabling complex state-driven animations. Import Rive files for sophisticated interactive elements.

An enhanced component with logic, state management, or interactive capabilities beyond static visual properties. Smart components respond to user input, fetch data, or manage complex state. Build smart components with code when visual tools aren’t sufficient.

A switch-style control for binary choices, indicating on/off or enabled/disabled states with immediate effect. Toggles differ from checkboxes in that they typically apply changes immediately rather than requiring a submit action. Use clear labeling so users understand what enabled and disabled states mean.

The animated change between two states of an element, such as button hover effects or page navigation. Smooth transitions make interfaces feel polished and help users track changes. Keep transitions quick (200-400ms for UI elements) to maintain responsive feel.

A predefined variation of a component representing different states, themes, or configurations. Variants keep related options organized and enable smooth transitions between states. Framer's variant system supports complex interactive components.

The portion of a webpage visible without scrolling, borrowed from newspaper terminology where the top half of the front page was most prominent. This prime real estate should contain your most compelling content, clear value proposition, and primary call-to-action. Studies show users form impressions within milliseconds, making above-the-fold content critical for engagement.

A navigation icon consisting of three horizontal lines that reveals a hidden menu when tapped, standard on mobile devices. While space-efficient, hamburger menus hide navigation and reduce discoverability—consider keeping key links visible. In Framer, create hamburger menus with component variants that animate between open and closed states.

An input field where users can search for content within a website, essential for content-heavy sites. Search functionality helps users find specific content quickly without browsing navigation. Implement effective search with relevant results and helpful empty states.

The initial appearance of an interface when empty of user content, requiring thoughtful design to guide action. Zero states should welcome users and clearly explain how to add content. Design engaging zero states that reduce new-user confusion.

A form element used to collect user-entered values such as text, email, or numbers. Input components often support states, validation, and submission workflows.

Logic rules that show, hide, or transform output based on whether specific conditions are met. Conditionals are useful for adapting CMS-driven content to different states or data values.

A timeline of saved project states that allows you to review, compare, and restore earlier versions. Version history reduces risk when iterating by making rollbacks straightforward.

Animated transitions between page or state views that preserve continuity as content changes. View transitions can make navigation feel smoother and reduce abrupt visual jumps.

Conditional Visibility is a rule-based display setting that renders elements only when defined conditions are met, improving relevance and personalization.

Component Properties are exposed settings on reusable components that let editors and designers change values like text, states, visibility, or variants.

Variable Modes let one variable system support multiple contexts, such as theme, platform, or state, by switching between predefined value sets.

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

An agent session is the active connection and conversation state between a user, an AI agent, and the project being edited.

An agent session keeps track of the current project access, recent instructions, and ongoing tasks. Session context helps an agent continue work without starting from a blank slate each time the user asks for a change.

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 link styles keep navigation, inline links, and active states consistent, so interactive text feels intentional across pages and CMS content.

In Framer, review sharing helps teams gather comments, approvals, and direction on a live preview or project state before changes go public.