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.

An animation that plays when an element first becomes visible on screen, typically as the user scrolls down the page. These effects add polish and draw attention to content as it enters the viewport. Framer provides various appear effects like fade, slide, scale, and blur that can be customized for timing, delay, and easing.

A CSS effect that applies visual filters like blur or color adjustment to the area behind an element, creating frosted glass or tinted overlay effects. This technique is popular for navigation bars and modal backgrounds that need to stand out while maintaining context with underlying content. In Framer, apply backdrop filters through the Fill properties to create modern, layered interfaces.

The visual layer behind an element’s content, which can include solid colors, gradients, images, videos, or combinations of these. Backgrounds establish visual hierarchy and mood while providing contrast for readable text. Framer supports multiple background layers, allowing you to combine images with color overlays and blend modes for sophisticated effects.

A setting that determines how an element’s colors interact with the layers beneath it, such as multiply, screen, overlay, or difference. Blend modes enable creative effects like color tinting images, creating texture overlays, and building complex visual compositions. Experiment with blend modes in Framer to achieve effects that would otherwise require image editing software.

A CSS effect that adds shadow beneath or around an element, creating depth and visual separation from the background. Shadows help establish hierarchy by making elements appear to float above the page surface. Framer offers detailed shadow controls including multiple shadows, inner shadows, and variables for consistent elevation systems.

The color, gradient, or image that fills the interior of a shape or element. Multiple fills can be layered with different blend modes for complex visual effects. Framer’s fill controls support solid colors, gradients, and images with positioning, scaling, and opacity options.

A type of animation that creates fluid, continuous motion between states or along scroll, often used for page transitions. Flow effects add polish and help users maintain context during navigation. Framer's transitions support various flow effects between pages and component states.

The fundamental container element in Framer that holds content and defines boundaries for layout, sizing, and visual properties. Frames are the building blocks of every Framer design, from tiny icons to full page layouts. Unlike groups, frames have their own properties and can contain responsive layouts and effects.

The prominent top section of a landing page, typically featuring primary messaging and a main call to action. It sets the first impression and communicates value quickly. Effective hero sections combine clear copy, visual support, and an obvious next step.

An element in the design stack that can be positioned above or below other elements, controlling visual overlap. Layers enable complex compositions with overlapping elements and effects. Manage layer order in Framer's left sidebar or use z-index for precise control.

A JSON-based animation format that renders Adobe After Effects animations on the web with small file sizes and infinite scalability. Lottie animations are lightweight, vector-based, and highly customizable through JavaScript. Import Lottie files into Framer for sophisticated animations without performance penalties.

A grainy texture effect added to backgrounds or elements for visual interest and tactile quality. Subtle noise can add depth and sophistication, reducing the flatness of solid colors. Apply noise sparingly—heavy noise can look dated and affect performance.

The transparency level of an element, ranging from 0% (invisible) to 100% (fully opaque). Reduce opacity to create overlays, de-emphasize secondary content, or build layered visual effects. Animate opacity for smooth fade-in and fade-out transitions.

The animation or effect that occurs when navigating between pages, providing visual continuity. Page transitions can make navigation feel seamless and help users maintain context. Framer supports various transition effects between pages.

A scrolling effect where background elements move slower than foreground elements, creating an illusion of depth. Parallax adds visual interest and engagement but can impact performance and cause motion sickness. Use parallax sparingly and provide reduced-motion alternatives for accessibility. See Creating parallax with Scroll Speed in Framer.

A color transition radiating from a center point outward in a circular or elliptical pattern. Radial gradients create depth, spotlight effects, and organic backgrounds. Combine with other fills and blend modes for sophisticated visual effects.

Animation triggered by scrolling, from simple reveal effects to complex parallax and timeline-based sequences. Scroll animations engage users and create storytelling opportunities as they progress through content. Use Framer's scroll-triggered effects for appear animations and scroll-linked transitions.

Animation properties that change continuously based on scroll position, creating smooth parallax and reveal effects. Scroll-linked animations tie element properties like opacity, scale, or position to scroll progress. Use sparingly for performance and respect reduced motion preferences.

Animation effects tied to scroll position, creating parallax, reveal, and other scroll-driven visual changes. Scroll transforms add interactivity and storytelling potential to long-form content. Balance visual interest with performance and accessibility considerations.

Animations that play once when elements enter the viewport during scrolling, commonly used for section reveals. Scroll-triggered animations add polish and draw attention to content as it appears. Framer's appear effects provide scroll-triggered animation capabilities. See Triggering animations on scroll in Framer.

Physics-based animation that simulates natural spring-like motion with properties like stiffness, damping, and mass. Spring animations feel more natural than linear or bezier-based easing. Framer Motion powers Framer's spring animation capabilities. See Mastering transitions and easing in Framer. See Using the Loop Effect in Framer.

The current condition of a component or interface element, such as default, hover, active, loading, or error. Managing state effectively enables responsive, interactive experiences. Design all relevant states and transitions between them.

A saved set of visual properties—colors, typography, effects—that can be applied consistently across elements. Styles enable design system consistency and make global updates efficient. In Framer, text and color styles ensure brand coherence throughout your project.

Visual enhancements applied to text including shadows, gradients, outlines, and animations. Text effects can add personality and emphasis but should maintain readability. Use effects sparingly and test at various sizes and backgrounds.

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.

CSS operations that modify element geometry—translate, rotate, scale, skew—without affecting document flow. Transforms are hardware-accelerated for smooth performance and power many animation effects. Combine transforms for complex visual manipulations.

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.

Temporary storage that keeps copies of assets so repeat visits load faster and consume less bandwidth. Effective caching can significantly improve page-load performance for returning users. CDNs and browser cache policies work together to deliver assets efficiently.

A prompt encouraging users to take a specific action, typically presented as a button or link with action-oriented text like 'Get Started' or 'Learn More.' Effective CTAs are visually prominent, clearly worded, and strategically placed throughout the user journey. Test different CTA copy, colors, and placements to optimize conversion rates using Framer's A/B testing.

Document Object Model — the programming interface representing HTML documents as a tree structure that JavaScript can manipulate. Understanding the DOM helps debug layout issues and write effective custom code.

A rotating display of multiple pieces of content within a single space, allowing users to navigate through items using arrows or swipe gestures. While carousels save space, studies show users often miss content beyond the first slide—consider whether a grid might be more effective. If using carousels, ensure clear navigation indicators and consider auto-play carefully.

A prominently styled button designed to attract clicks and drive users toward a conversion goal. Effective CTA buttons use contrasting colors, clear action-oriented text, and strategic placement. Test variations of your CTA—even small changes to wording or color can significantly impact click-through rates.

An overlay window that appears on top of page content, often used for promotions, email captures, or important notices. Pop-ups can be effective but easily frustrate users if poorly timed or hard to dismiss. Consider alternative placements and respect user preferences.

A measurement of how far down a page users scroll, indicating content engagement and page length effectiveness. Low scroll depth may indicate content problems or fulfilled user intent at the top. Track scroll depth to optimize content placement and page structure.

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.

A quote or endorsement from a satisfied customer providing social proof and building trust with potential customers. Effective testimonials are specific, relatable, and include identifying details like names and companies. Display testimonials prominently near decision points.

Psychology-based design rules explaining how humans perceive visual elements as unified wholes, including proximity, similarity, closure, and continuity. Applying gestalt principles creates intuitive groupings and relationships without explicit visual separators. These principles underpin effective layout and information architecture.

A design tool used to resize selected layers proportionally, often including typography and effects. It helps preserve visual relationships when scaling multi-element compositions.

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

Usability measures how effectively, efficiently, and satisfactorily users can achieve goals within a system or interface.

A step beyond code completion, agentic coding lets an AI agent take multi-step actions—reading files, running tests, fixing errors, and committing changes—with the developer reviewing at checkpoints rather than writing every instruction. Tools like Claude Code and Cursor’s Composer operate in this mode. Agentic coding accelerates complex tasks but requires clear goals, sandboxing, and human review to avoid unintended side effects.

The skill of writing, structuring, and iterating on instructions—often called prompts—so that an AI model produces the desired output. In coding contexts, good prompt engineering includes providing context, specifying constraints, and showing examples. In vibe coding workflows, clear prompts directly determine code quality. Effective prompt engineering reduces hallucinations, improves specificity, and is essential for getting reliable results from both code generation and agentic tasks.

Writing software by expressing intent in conversational language rather than formal syntax. AI models translate the natural-language description into runnable code. Natural language programming is the conceptual foundation of vibe coding and is enabled by advances in large language models. It dramatically lowers the barrier to entry for non-developers, though it still requires understanding of what good code looks like in order to review AI output effectively.

An agent prompt is a user request written to guide an AI agent toward a specific project outcome, such as a page edit or CMS update.

An effective agent prompt gives the AI enough direction to act without guessing. It usually names the target, the desired outcome, constraints, and any content or style rules that should be preserved.

In Framer, scroll effects let designers tie motion to page position, so sections can fade, move, scale, or transform as someone scrolls through the experience.

Framer blend modes can create richer visual treatments by letting text, shapes, images, and effects interact with the colors underneath them.

Framer masks help designers create image treatments, reveal effects, soft fades, and graphic compositions without flattening the work into static assets.