PLAYBOOK · COMPONENTS

Components & Code

Generate interactive components and real, editable React code.

FLAGSHIP · LIVE

A real component, generated from one line

New York

live React · ticking every second

Components & Code

Intermediate

≈ 150 credits

Working analog clock

The agent writes a real React component — ticking hands, a time-zone property, and clean property controls. Fully editable on the canvas.

PROMPT

Turn this selected element into a functioning analog clock component, and add a custom property for the time zone.

PROMPT LIBRARY

40 prompts for components & code

live preview

Components & CodeBeginner~50 credits

Componentize repeated items

Collapse duplicates into one editable component.

Turn these repeated list items into a single component with variables for each piece of content, then replace every existing item with an instance and populate the variables with the original text and images. Keep the design identical and make future edits happen in one place.

live preview

Components & CodeBeginner~100 credits

Audit for reusable components

Find duplication worth extracting.

Audit the whole site for smaller, repeated elements — badges, stat blocks, cards, buttons — that should become reusable components. List each candidate with where it appears, then convert the highest-impact ones into components with sensible controls.

live preview

Components & CodeIntermediate~150 credits

Mobile nav open/close

Real interaction states, not just visuals.

Create working open and close states for the phone navigation. A menu button reveals the links with a smooth drawer animation and switches its label to Close when open; tapping it or a link closes the menu. Trap focus while open and animate height, not display.

LONDON

live preview

Components & CodeIntermediate~150 credits

Working analog clock

A real, ticking React code component.

Turn this selected element into a functioning analog clock code component. Draw the face, hour, minute, and second hands; tick every second; and expose a custom property for the time zone so each instance can show a different city. Keep it SSR-safe and lightweight.

▲

●

✦

◇

■

✚

❋

◆

▲

●

▲

●

✦

◇

■

✚

❋

◆

▲

●

live preview

Components & CodeAdvanced~150 credits

Data-driven ticker

Fetch live data and render it.

Fetch the latest ten posts about Framer, store them in a CMS collection, then build a card component with variables for name, date, and content bound to that collection. Lay the cards out as a seamless infinite horizontal ticker that pauses on hover.

grab

throw

snap

live preview

Components & CodeAdvanced~100 credits

Cursor-tilt override

Runtime motion via a code override.

Write a code override that makes this card tilt in 3D toward the cursor using spring physics, with a subtle highlight that tracks the pointer. Reset smoothly when the pointer leaves, cap the tilt angle so it stays tasteful, and disable it on touch.

live preview

Components & CodeBeginner~50 credits

FAQ accordion component

A reusable disclosure component.

Build an FAQ accordion as a component with open and closed variants, a plus/minus icon that swaps on toggle, and question and answer controls. Animate the height with an ease-out curve, allow the first item open by default, and keep it keyboard accessible.

live preview

Components & CodeIntermediate~100 credits

Animated counter component

Count-up with controls.

Create a number-counter component that counts up to a target value when it scrolls into view, with controls for the value, prefix, suffix, and duration. Use tabular figures, ease the count so it slows near the end, and only run once per view.

pull

spin

flick

live preview

Components & CodeAdvanced~200 credits

Drag-to-reorder list

Gesture-driven UI.

Build a list component whose items can be dragged to reorder, with the dragged item lifting and the others making room using spring layout animations. Persist the new order, support keyboard reordering for accessibility, and keep it smooth at 60fps.

live preview

Components & CodeAdvanced~200 credits

WebGL shader component

A custom canvas visual.

Write a code component that renders an animated WebGL gradient with controls for the colors, speed, and grain. Make it SSR-safe, pause rendering when off-screen, handle resize cleanly, and keep it performant on mobile.

$ npx @framer/agent
✓ connected to canvas
audit my SEO
generating nodes

live preview

Components & CodeIntermediate~100 credits

Typewriter terminal

A sequenced terminal animation.

Create a terminal component that types out a sequence of commands and their outputs in order, with a blinking cursor and a loop option. Style it like a macOS window with traffic-light dots, expose the lines as an array control, and start the sequence on view.

live preview

Components & CodeIntermediate~100 credits

Bento feature component

Composable, animated tiles.

Build a bento-grid component where each tile is a slot with controls for column and row span. Add an optional perpetual micro-animation per tile, keep the corner radii concentric, and make the grid reflow cleanly to one column on phone.

TOKYO

live preview

Components & CodeBeginner~50 credits

Countdown timer

A live ticking countdown.

Add a countdown-timer component to a target date with a control for the deadline and the unit labels. Tick every second, handle the zero state with a custom message, and keep the digits from shifting width as they change.

drag

toss

drop

live preview

Components & CodeAdvanced~150 credits

Physics playground

Draggable, bouncing bodies.

Build a component where a set of labels are draggable physics bodies that fall in, collide, settle, and can be tossed with momentum. Keep walls around the container, make it responsive on resize, and provide a calm static fallback on the canvas and reduced-motion.

◆

▲

●

✦

◇

■

✚

❋

◆

▲

◆

▲

●

✦

◇

■

✚

❋

◆

▲

live preview

Components & CodeIntermediate~100 credits

Marquee component

A looping logo or text band.

Create a marquee component that scrolls its slotted children infinitely with no visible seam, pausing on hover. Expose controls for speed and direction, duplicate the content automatically for the seamless loop, and keep it off the main thread.

live preview

Components & CodeIntermediate~100 credits

Spotlight border card

A cursor-aware glowing border.

Build a card whose border illuminates and follows the cursor as it moves across the card, with controls for the glow color and radius. Keep the glow subtle, fade it out on leave, and disable it on touch devices.

live preview

Components & CodeBeginner~100 credits

Tabs component

Accessible tabbed content.

Create a tabs component with a sliding active indicator and full keyboard support (arrow keys, home/end). Use slots for each panel, animate the indicator with an ease-out curve, and keep the inactive panels out of the tab order.

live preview

Components & CodeAdvanced~150 credits

Coverflow carousel

A 3D slide gallery.

Build a coverflow carousel component: the centered slide faces forward while the side slides angle back in 3D. Support drag and arrow navigation, snap to slides, and keep it performant with hardware-accelerated transforms.

$ npx @framer/agent
✓ connected to canvas
generate a pricing table
generating nodes

live preview

Components & CodeAdvanced~150 credits

Live API badge

Render runtime data.

Create a component that fetches a number from an API on mount — like stars or subscribers — and renders it as an animated live badge that counts up to the fetched value. Handle loading and error states gracefully and cache between renders.

NEW YORK

live preview

Components & CodeIntermediate~100 credits

World clock row

Multiple time zones, one component.

Build a row of analog clocks for several time zones, each with a city label, all driven by one component with an array control for the zones. Keep them ticking in sync, lay them out responsively, and let each be resized independently.

live preview

Components & CodeAdvanced~300 credits

Infinite Scroll List

Code component that auto-loads more CMS records as users scroll

Build a code component named InfiniteList that renders items from a CMS collection and loads more as the user nears the bottom. Use an IntersectionObserver sentinel to trigger pagination in batches of twelve, showing a skeleton loader row while fetching. Add property controls for page size, gap, and a slot for the item template. Expose loading and end-of-list states, and respect prefers-reduced-motion by disabling the fade-in stagger. Make sure it hydrates cleanly on the published site without layout shift.

live preview

Components & CodeAdvanced~200 credits

Scroll Progress Bar

Sticky reading-progress indicator overlay driven by scroll position

Create a code component called ScrollProgress that renders a thin fixed bar tracking document scroll percentage. Use Framer Motion useScroll and useSpring to smooth the fill, and a CSS variable for the accent color so it inherits a color style. Add property controls for height, position (top or bottom), gradient toggle, and a milestone tick at 50 percent. Disable the spring under prefers-reduced-motion and fall back to instant updates. Ensure the bar sits above all sections via z-index and never blocks pointer events.

grab

throw

snap

live preview

Components & CodeAdvanced~250 credits

Magnetic Button Override

Code override pulling a button toward the cursor on hover

Write a code override named withMagnetic that I can apply to any button or frame. On mouse move within the element bounds, translate it toward the pointer using a spring, clamping displacement to a configurable strength, and snap back on leave. Read strength and radius from override props with sensible defaults. Pair it with a subtle scale on the inner label by exposing a second override withMagnetLabel. Guard against touch devices by checking pointer type, and bypass the animation entirely when prefers-reduced-motion is set.

live preview

Components & CodeAdvanced~350 credits

Pricing Toggle Card

Pricing component with monthly and annual switch plus variants

Build a pricing card component with three variants for Starter, Pro, and Enterprise, each driven from variant properties for title, price, and feature list. Add a shared monthly-annual toggle that swaps the displayed price with a count-up transition and shows a saved-percentage badge on annual. Wire the highlighted plan to a featured boolean that lifts elevation and applies an accent color style. Make it responsive so the three cards stack on mobile breakpoint, and stagger their reveal on scroll with reduced-motion respected.

live preview

Components & CodeAdvanced~300 credits

Animated Stat Dashboard

Counter grid that animates numbers into view on scroll

Create a stats component rendering a responsive four-up grid of metric tiles, each with a label, value, and optional suffix from property controls. When the section enters the viewport, count each value from zero using a Framer Motion animate with eased timing and a staggered start per tile. Bind values to a CMS collection so non-technical edits flow through. Use a number color style for the figures and a muted text style for labels. Collapse to two columns on tablet and one on mobile, and skip the count animation under prefers-reduced-motion.

live preview

Components & CodeAdvanced~400 credits

Toast Notification System

Code component plus override for stacking dismissible toast alerts

Implement a toast system as a code component ToastHost that listens for a custom window event and renders a stacked, animated queue in a corner. Each toast supports a title, message, variant color, and auto-dismiss timeout, sliding in with a spring and fading out on dismiss or timeout. Provide an override withToastTrigger that fires the event on click with props for message and variant. Cap visible toasts and collapse overflow into a counter. Honor prefers-reduced-motion with instant transitions and ensure ARIA live-region announcements.

live preview

Components & CodeAdvanced~300 credits

Before After Slider

Draggable handle reveals one image over another for comparison

Build a code component named CompareSlider that overlays two images and reveals the top one via a draggable vertical handle. Use a clip-path inset driven by drag position with a spring for snap-free movement, and support keyboard arrows for accessibility. Add property controls for both image sources, handle color, and a starting split percentage. Make the component fill its frame and stay responsive across breakpoints. Show a faint hint pulse on first view that stops once interacted with, and disable the pulse under prefers-reduced-motion.

live preview

Components & CodeAdvanced~400 credits

Mega Menu Component

Multi-column dropdown nav panel with hover intent and variants

Create a mega-menu component triggered from a nav item that opens a multi-column panel with featured links, icons, and a promo slot. Use variants for closed and open with a height-and-opacity reveal, and add hover-intent timing so it does not flicker between adjacent triggers. Drive the link columns from a CMS collection of nav entries grouped by category. Make it keyboard navigable with focus trapping and Escape to close, collapse into an accordion on the mobile breakpoint, and respect prefers-reduced-motion.

live preview

Components & CodeAdvanced~300 credits

Theme Switcher Override

Override that flips site palette via CSS variable swapping

Write a code override withThemeToggle for a button that switches the site between light and dark by toggling a data-theme attribute on the document root, persisting choice in localStorage and honoring the OS preference on first load. Define both palettes as CSS custom properties so existing color styles remap automatically, and animate the swap with a brief crossfade. Add a companion override withThemedIcon that morphs a sun into a moon glyph. Ensure no flash of wrong theme on load and that the transition is skipped under prefers-reduced-motion.

live preview

Components & CodeAdvanced~400 credits

Filterable Project Grid

CMS gallery with category filter chips and animated reflow

Build a project gallery component sourcing cards from a CMS collection, with a row of filter chips generated from the distinct category field. Clicking a chip filters the grid and animates layout changes using Framer Motion layout transitions so cards reflow smoothly. Support a multi-select mode via a property control and an all-items default. Keep the grid responsive with equal-height cards across breakpoints, lazy-load images, and provide an empty state when no items match. Disable layout animation under prefers-reduced-motion and keep focus order sensible.

live preview

Components & CodeAdvanced~300 credits

Sticky Header Shrink

Override that condenses the nav bar after scrolling past hero

Create a code override withShrinkHeader for a sticky nav frame that detects when the user scrolls past a threshold and transitions to a compact state: reduced height, smaller logo, and a subtle background blur with a bottom border. Use useScroll to read offset and useTransform to interpolate values, with a spring for smoothness. Expose threshold, blur amount, and shrunk height as override props. Ensure it works at every breakpoint and never causes layout jump, and fall back to an instant switch when prefers-reduced-motion is active.

live preview

Components & CodeAdvanced~350 credits

Testimonial Slider

Auto-advancing quote carousel bound to a CMS collection

Build a testimonial component that cycles quotes from a CMS collection, showing author name, role, avatar, and a star rating. Auto-advance on a configurable interval with a crossfade, pausing on hover and on focus, and provide dot indicators plus swipe support on touch. Add property controls for interval, transition style, and whether to show avatars. Use a quote text style and an accent color style for the active dot. Keep it responsive, announce slide changes to screen readers, and stop autoplay entirely under prefers-reduced-motion.

live preview

Components & CodeAdvanced~450 credits

Multi-Step Form

Wizard component with progress, validation, and step transitions

Implement a multi-step form code component with a header progress indicator and step transitions that slide forward and back. Manage step state internally, validate required fields before advancing, and disable Next until valid. Use variants or conditional rendering for each step's fields, and animate the progress fill with a spring. Add property controls for step count and submit endpoint, posting collected values on completion with a success state. Make it responsive, keyboard-friendly with focus moved to each new step, and honor prefers-reduced-motion with non-sliding transitions.

live preview

Components & CodeAdvanced~350 credits

Parallax Layer Stack

Component layering frames that drift at different scroll speeds

Create a code component ParallaxStack that accepts several image or frame layers and moves each at a configurable depth as the page scrolls, using useScroll and useTransform for offset. Expose per-layer speed and direction through property controls, and keep movement clamped so nothing clips out of the section. Composite layers with z-index and allow a foreground content slot that stays readable. Ensure it is GPU-accelerated via transforms only, performs well on mobile by reducing range, and disables all parallax under prefers-reduced-motion.

$ npx @framer/agent
✓ connected to canvas
add a CMS blog
generating nodes

live preview

Components & CodeIntermediate~200 credits

Copy Code Block

Syntax-styled snippet component with one-click clipboard copy

Build a code-block component that displays a formatted snippet with a monospace text style, a language label, and a copy button in the corner. On click, copy the content to the clipboard via the Clipboard API and swap the icon to a checkmark for two seconds with a small spring pop. Add property controls for the code string, language label, and a line-numbers toggle. Handle overflow with horizontal scroll, keep the copy button keyboard accessible with an ARIA label, and skip the icon animation under prefers-reduced-motion.

live preview

Components & CodeAdvanced~350 credits

Animated Mobile Menu

Full-screen overlay nav with staggered link reveal on open

Create a mobile menu component using open and closed variants where the trigger morphs from a hamburger into an X. On open, a full-screen overlay slides in and the nav links reveal with a staggered upward fade, then reverse on close. Source links from a CMS collection so they stay in sync with the desktop nav. Lock body scroll while open, trap focus and close on Escape, and ensure it only appears at the mobile and tablet breakpoints. Replace the stagger with a simple fade when prefers-reduced-motion is set.

■

✚

❋

◆

▲

●

✦

◇

■

✚

■

✚

❋

◆

▲

●

✦

◇

■

✚

live preview

Components & CodeIntermediate~250 credits

Logo Cloud Component

Responsive customer-logo wall with grayscale hover reveal

Build a logo-cloud component rendering a responsive grid of partner logos pulled from a CMS collection. Display logos in muted grayscale at rest and animate to full color and slight scale on hover, with a staggered entrance when the section scrolls into view. Add property controls for columns per breakpoint, gap, and a max grayscale toggle. Keep all cells equal height with logos centered and capped in size, lazy-load images, and ensure the layout reflows from six columns on desktop down to two on mobile. Respect prefers-reduced-motion for entrances.

grab

throw

snap

live preview

Components & CodeAdvanced~350 credits

Range Slider Control

Custom dual-handle slider component emitting selected value range

Implement a custom range-slider code component with one or two draggable handles over a track, a filled active segment, and a live value tooltip above each handle. Support min, max, step, and initial values through property controls, snapping to steps with a spring on release. Style the track and fill with color styles, and emit the current range so overrides can react to it. Make handles keyboard operable with arrow keys and proper ARIA slider roles, keep touch targets large enough on mobile, and disable the snap spring under prefers-reduced-motion.

live preview

Components & CodeIntermediate~200 credits

Reveal On Scroll Override

Reusable override that fades and lifts any element into view

Write a code override withReveal that animates any element from a faded, slightly lowered state into place when it scrolls into the viewport, using an IntersectionObserver so it triggers once. Expose distance, duration, easing, and delay as override props so it can be tuned per element, and add a withRevealStagger variant for child lists that offsets each child. Use transforms and opacity only for performance, ensure it never blocks interaction before triggering, and short-circuit to the visible state immediately when prefers-reduced-motion is enabled.

live preview

Components & CodeAdvanced~400 credits

Interactive Map Pins

Component with animated location markers and hover detail cards

Create a map component that overlays positioned pins on a static map image, each pin placed via percentage coordinates from a CMS collection of locations. Pins pulse subtly on load and pop up a detail card with name, address, and a link on hover or tap. Add property controls for pin color, the map image, and a default selected location. Ensure cards stay within the frame by flipping their anchor near edges, make pins keyboard focusable with the card shown on focus, keep it responsive across breakpoints, and calm the pulse under prefers-reduced-motion.