PLAYBOOK · MOTION
Style & Motion
Theme, animate, and add shaders without leaving the canvas.
FLAGSHIP · LIVE
Motion that actually runs on the canvas
Animate every heading on view.
shader + word-by-word text effect
Style & Motion
Intermediate
≈ 100 credits
Animate every heading by word
One prompt adds an on-scroll, word-by-word reveal to every heading across the whole site.
PROMPT
Add subtle text animation to every heading across all pages. Trigger when it scrolls into view, animate word by word, move up, and fade in.
PROMPT LIBRARY
40 prompts for styling, theming & motion
live preview
Style & MotionBeginner~50 credits
Set a single accent color
Apply one accent with restraint.
Make the accent color a bright lime (#C4F04C) and apply it only to primary buttons, links, and key highlights. Leave all neutral surfaces and body text untouched, and create an accent color style so it can be changed globally later.
live preview
Style & MotionBeginner~100 credits
Staggered hero reveal
Choreograph the hero entrance.
Add a staggered appear effect to the hero: fade and lift in the background first, then the eyebrow, headline, subhead, and CTA in sequence from top to bottom. Use a 0.6s duration, 0.08s stagger, an ease-out curve, and make sure no parent frame clips the motion.
Qo.
live preview
Style & MotionIntermediate~100 credits
Animate every heading by word
One sitewide on-scroll text reveal.
Add subtle text animation to every heading across all pages: when each heading scrolls into view, animate it in word by word, moving up a few pixels and fading in. Keep it fast and tasteful, trigger only once per heading, and respect reduced-motion settings.
live preview
Style & MotionIntermediate~100 credits
Liquid gradient hero
A real animated WebGL gradient.
Add a full-bleed liquid-gradient shader behind the hero. Keep it dark with one lime accent, slow and calm rather than busy, and add a touch of grain. Make sure the headline and CTA in front keep at least 4.5:1 contrast over the brightest part of the gradient.
live preview
Style & MotionAdvanced~150 credits
Theme for light and dark
Generate a matching second theme.
Theme the site for both light and dark mode using color styles. Keep the current values as the dark theme and generate a considered light counterpart for each token. Leave the intentionally static colors in the hero untouched, and verify contrast in both modes.
Aa.
live preview
Style & MotionAdvanced~50 credits
Normalize text styles
Snap stray text to the system.
List every text layer in the project that isn't bound to a text style, excluding ones sized to fit. Then for each, find the closest matching style by size and weight and apply it, so the whole site runs on a consistent type system.
grab
throw
snap
live preview
Style & MotionAdvanced~150 credits
Magnetic buttons
Buttons that pull toward the cursor.
Make the primary buttons magnetic: on hover they should pull slightly toward the cursor and the label should track with a small offset, using spring physics for the motion. Snap smoothly back to center on leave, and disable the effect on touch devices.
■
✚
❋
◆
▲
●
✦
◇
■
✚
■
✚
❋
◆
▲
●
✦
◇
■
✚
live preview
Style & MotionIntermediate~100 credits
Infinite logo ticker
A seamless looping marquee.
Turn this logo row into a seamless, infinitely looping ticker that scrolls horizontally with no visible seam. Slow it to about half speed on hover, keep the logos vertically centered and evenly spaced, and pause it under reduced-motion.
live preview
Style & MotionIntermediate~100 credits
Mesh gradient background
Organic drifting color.
Add an animated mesh-gradient background to this section: a dark base with lime and deep-green blobs drifting slowly and blurring into each other. Keep it behind the content at low contrast so text stays perfectly readable.
drag
toss
drop
live preview
Style & MotionBeginner~50 credits
Hover lift on cards
Tactile card feedback.
Add a subtle hover state to every card: lift it up 4px, brighten the border slightly, and add a soft tinted shadow, all with a 200ms ease-out transition. Add a small scale-down on press for tactile feedback, and gate the hover behind a hover-capable media query.
live preview
Style & MotionAdvanced~150 credits
Scroll-driven parallax
Layered depth on scroll.
Add gentle parallax to the hero so the background image moves slower than the foreground content as the user scrolls. Keep the effect subtle, run it off the main thread for smoothness, and disable it under reduced-motion.
live preview
Style & MotionIntermediate~100 credits
Count-up stats
Animate numbers into view.
Make the four stat numbers count up from zero to their value when the stats band scrolls into view. Ease the count-out so it decelerates near the end, use tabular figures so widths don't jump, and only run it once.
live preview
Style & MotionAdvanced~200 credits
Add a shader to a section
WebGL beyond CSS.
Add a tasteful animated shader background to this section that stays within the dark lime palette. Keep it performant on mobile, pause it when off-screen, and ensure all overlaid text remains high-contrast and legible.
$ npx @framer/agent
✓ connected to canvas
make this responsive
generating nodes
live preview
Style & MotionIntermediate~100 credits
Text scramble on load
Decode-style headline.
Make this headline scramble its characters and decode into the final text when it enters the viewport. Keep the scramble quick (under one second), use a monospace feel during the scramble, and settle cleanly into the real type style.
live preview
Style & MotionIntermediate~100 credits
Rotating image rings
Orbital gallery motion.
Arrange these images into two or three concentric rings that rotate slowly in alternating directions behind the hero. Fade the outermost ring toward the edges, keep each photo upright as it orbits, and pause the motion under reduced-motion.
live preview
Style & MotionBeginner~50 credits
Soften the shadows
Tasteful elevation.
Replace the harsh black shadows on these cards with soft, background-tinted shadows — wider spread, lower opacity, and a slight downward offset. Keep elevation consistent across all cards so the hierarchy reads clearly.
grab
throw
snap
live preview
Style & MotionAdvanced~150 credits
Cursor image trail
Playful pointer effect.
Add a tasteful image trail that follows the cursor across the hero: each movement drops a small image that scales in and fades out quickly. Throttle it so it never floods the screen, and disable it entirely on touch devices.
■
✚
❋
◆
▲
●
✦
◇
■
✚
■
✚
❋
◆
▲
●
✦
◇
■
✚
live preview
Style & MotionBeginner~50 credits
Kinetic marquee band
Big scrolling typography.
Add a large kinetic marquee band of oversized text that scrolls horizontally and subtly reverses direction as the user scrolls past it. Keep the type tight, use the existing display font, and make the loop seamless.
live preview
Style & MotionIntermediate~100 credits
Glassmorphism panel
Premium frosted card.
Turn this card into a frosted-glass panel over the gradient: a real backdrop blur, a 1px inner white border, and a subtle inner shadow to simulate the glass edge. Keep the text fully legible and the blur under control for Safari performance.
live preview
Style & MotionBeginner~50 credits
Breathing status dot
Perpetual micro-motion.
Add a softly pulsing status indicator next to the 'live' label so it always feels alive: a small dot that gently fades its opacity in and out on a slow loop. Keep it in the accent color and pause it under reduced-motion.
live preview
Style & MotionAdvanced~250 credits
Scroll Progress Reading Bar
Add a top progress bar that fills as the visitor scrolls
Build a code component that renders a fixed 3px bar pinned to the top of the page and fills horizontally from 0 to 100 percent based on document scroll progress. Drive width via a scroll listener using requestAnimationFrame, throttled for performance, and pull the fill color from an accent color variable so it tracks the brand. Add a property control for height and a glow toggle. Respect prefers-reduced-motion by snapping to discrete steps. Place it above all sections and confirm it stays smooth at the desktop and tablet breakpoints.
live preview
Style & MotionAdvanced~400 credits
Sticky Section Pin Sequence
Pin a hero while inner content swaps through scroll-linked steps
Create a pinned scroll sequence where the first section sticks to the viewport for three screen heights while three captioned layers cross-fade and translate based on scroll position. Use an override that maps scrollYProgress to opacity and y for each layer, with springs for smoothing. Keep the pinned frame full-bleed at the desktop breakpoint and unpin gracefully on mobile by stacking the layers vertically instead. Gate the motion behind prefers-reduced-motion so reduced users see all three layers statically stacked.
live preview
Style & MotionAdvanced~300 credits
Number Odometer Counter
Roll metrics up digit by digit like a mechanical odometer
Build a code component that animates a numeric value with a per-digit rolling odometer effect: each digit column slides vertically through 0 to 9 strips, easing into place with a slight overshoot spring. Add property controls for the target number, duration, prefix, suffix and thousands separator, and start the roll only when the element enters the viewport via an intersection trigger. Pull the digit color from a text style and size it responsively across breakpoints. Disable rolling and show the final value instantly when prefers-reduced-motion is set.
✦
◇
■
✚
❋
◆
▲
●
✦
◇
✦
◇
■
✚
❋
◆
▲
●
✦
◇
live preview
Style & MotionAdvanced~300 credits
Marquee Pause On Hover
An infinite logo strip that slows and pauses under the cursor
Build an infinite horizontal marquee that loops a row of logo images seamlessly by duplicating the track and translating it with a continuous animation. On hover, ease the speed down to zero over 400ms, then ramp back up on leave. Expose property controls for speed, gap and direction, and feed the logos from a CMS collection so the strip stays in sync with the brand list. Mask the edges with a gradient fade. Honor prefers-reduced-motion by rendering a static, evenly spaced row with no looping.
grab
throw
snap
live preview
Style & MotionAdvanced~350 credits
3D Tilt Product Card
Cards that tilt in 3D space following the pointer with depth layers
Create an override that gives a card a perspective tilt: track pointer position relative to the card center and map it to rotateX and rotateY within plus or minus 12 degrees, smoothed with springs and reset on pointer leave. Add a parallax depth offset so the image and the headline shift at different magnitudes for a layered feel, and include a subtle dynamic highlight that follows the cursor. Wire it to a component variant so every card in the gallery inherits it. Skip all tilt and parallax when prefers-reduced-motion is active.
live preview
Style & MotionAdvanced~400 credits
Page Transition Curtain
Wipe a colored curtain across the screen between page navigations
Build a route transition where a full-screen colored panel wipes up to cover the viewport, then reveals the next page by wiping away, timed so the swap happens behind the curtain. Implement it as an override on the page wrapper using exit and enter variants with eased clip-path or scaleY, pulling the curtain color from a brand variable. Keep total duration under 700ms so navigation never feels sluggish. On prefers-reduced-motion, replace the wipe with a quick cross-fade and ensure focus moves to the new page heading for accessibility.
live preview
Style & MotionAdvanced~300 credits
Animated Gradient Border
A conic gradient that rotates around a card outline endlessly
Create a code component wrapper that draws an animated gradient border: render a conic gradient behind the content, mask it to a thin ring with padding, and rotate the gradient angle continuously. Expose controls for border width, corner radius, speed and a two-stop color pair sourced from accent variables. Keep the inner content background opaque so the ring reads as a frame. Pause the rotation when the card is offscreen using an intersection observer for performance, and freeze the gradient at a fixed angle when prefers-reduced-motion is set.
live preview
Style & MotionIntermediate~200 credits
Reveal On Scroll Stagger
Fade and rise list items in sequence as they enter view
Add a scroll-triggered staggered reveal to a column of items: as the container enters the viewport, animate each child from opacity 0 and y 24 to its resting state with a 60ms stagger and a soft easeOut. Use an override with whileInView and viewport once true so it fires a single time, and bind it to a component so CMS-driven lists inherit it automatically. Tune the stagger tighter on mobile to avoid long waits. When prefers-reduced-motion is set, reveal everything at once with no translate, only a brief fade.
pull
spin
flick
live preview
Style & MotionAdvanced~400 credits
Liquid Cursor Blob
A gooey blob that trails the cursor with elastic lag
Build a code component that renders a soft blob following the cursor with spring-based lag so it stretches toward fast movement and settles when still. Use an SVG with a feGaussianBlur and feColorMatrix goo filter to merge the main blob with a smaller trailing dot. Add property controls for size, color from a brand variable, blend mode and stiffness. Render it in a fixed full-viewport layer with pointer events disabled so it never blocks clicks. Hide the blob entirely on touch devices and when prefers-reduced-motion is active.
live preview
Style & MotionAdvanced~350 credits
Flip Card On Click
Cards that rotate to reveal a back face with details
Create a flip card component with a front and back face using a 3D rotateY transform and preserve-3d, toggling on click and supporting keyboard activation with Enter and Space. Add a spring for a tactile snap, expose a flip-direction control, and let both faces accept slotted content so they can hold CMS-bound text and images. Manage aria-pressed and visibility so screen readers only read the visible face. Keep the card height equal on both faces across breakpoints, and reduce the flip to an instant content swap with a fade when prefers-reduced-motion is set.
Qo.
live preview
Style & MotionAdvanced~300 credits
Typewriter Headline Cycle
Type and delete a rotating list of phrases in the hero
Build a code component that types out a phrase character by character, pauses, deletes it, then cycles to the next phrase from a list, with a blinking caret. Expose controls for the phrase array, typing speed, delete speed, hold duration and loop, and pull text color from a text style so it matches the headline. Drive timing with timeouts cleaned up on unmount to avoid leaks. Keep the line height stable so layout never jumps between phrases. When prefers-reduced-motion is set, show only the first phrase fully typed with a static caret.
live preview
Style & MotionAdvanced~350 credits
Scroll Velocity Skew
Skew a section subtly based on how fast you scroll
Create an override that reads scroll velocity and applies a damped skewY to a content block, so fast scrolling tilts it slightly and it springs back to flat when scrolling stops. Derive velocity from the change in scrollY across frames, clamp the skew to plus or minus 6 degrees, and smooth it with a spring to avoid jitter. Apply it to an image grid for a kinetic feel without harming readability. Disable the effect entirely on touch and when prefers-reduced-motion is set, leaving the grid perfectly upright.
pull
spin
flick
live preview
Style & MotionAdvanced~300 credits
Magnetic Nav Underline
A pill underline that glides between nav links on hover
Build a navigation override where a single highlight pill animates its position and width to sit under whichever link is hovered, then returns to the active link on leave. Measure each link with getBoundingClientRect, animate the pill with a spring through layout-style transforms, and pull the pill color from an accent variable. Ensure the pill tracks the current page link by default and stays correct after resize at every breakpoint. Keep keyboard focus moving the pill too, and snap instantly with no glide when prefers-reduced-motion is set.
live preview
Style & MotionAdvanced~300 credits
Image Reveal Clip Wipe
Unmask images with a directional clip-path as they appear
Create an override that reveals an image by animating clip-path inset from fully closed to open in a chosen direction when it enters the viewport, paired with a slow scale from 1.08 to 1 so the image settles as it uncovers. Expose a direction control for left, right, up or down and a duration control. Bind it to a component so CMS gallery images all reveal consistently with a per-item stagger. Fire only once via viewport once. When prefers-reduced-motion is set, show the image immediately at full size with no wipe or scale.
live preview
Style & MotionAdvanced~350 credits
Sticky Header Shrink
Collapse the nav bar into a compact pill after scrolling
Build a header override that transitions from a tall transparent bar to a compact, blurred, background-filled pill once the page scrolls past 80px. Animate height, padding, logo scale and background opacity together with a spring, and switch the background blur and color from theme variables so it works in light and dark. Debounce the scroll state with a hysteresis threshold so it never flickers near the boundary. Verify the shrink across desktop, tablet and mobile breakpoints, and make the transition instant rather than animated when prefers-reduced-motion is set.
grab
throw
snap
live preview
Style & MotionAdvanced~400 credits
Confetti Success Burst
Fire a celebratory particle burst on form submit
Create a code component that emits a short confetti burst of small rotating rectangles from a point, each with randomized velocity, gravity, rotation and color drawn from a palette of brand variables, drawn on a canvas for performance and cleared after the animation completes. Expose a trigger prop and controls for particle count, spread and duration, and call it on successful form submission via an override. Keep the canvas in a fixed pointer-events-none layer. Skip the burst entirely and rely on a static success message when prefers-reduced-motion is set.
live preview
Style & MotionAdvanced~350 credits
Accordion Height Spring
Expand FAQ panels with measured-height spring animation
Build an accordion component where each panel animates open and closed by animating height from 0 to its measured content height using a spring, with the chevron icon rotating in sync. Measure content with a ref and ResizeObserver so dynamic CMS answers expand correctly, and manage aria-expanded and a controlled single-open mode. Ensure focus order stays logical and the toggle works with keyboard. Keep type styles intact inside panels. When prefers-reduced-motion is set, toggle visibility instantly without the height animation while preserving all aria state.
live preview
Style & MotionIntermediate~250 credits
Floating Decor Drift
Gently float background shapes on a continuous loop
Create a code component that scatters a few soft decorative shapes and animates each on its own slow, offset loop of translate and rotate so they drift independently for ambient depth behind the hero. Use distinct durations and delays per shape to avoid visible synchronization, pull fills from theme variables, and set them in a pointer-events-none background layer. Add a count and intensity control. Pause the loops when the section leaves the viewport for performance, and stop all drift, leaving the shapes static, when prefers-reduced-motion is active.
live preview
Style & MotionAdvanced~300 credits
Spotlight Hover Glow
A radial glow that tracks the pointer across a panel
Build an override that adds a radial-gradient spotlight following the cursor inside a panel: track pointer position and update CSS custom properties for the gradient center, fading the glow in on enter and out on leave with a short transition. Pull the glow color from an accent variable and use a soft mix so it reads on both light and dark themes. Keep it performant by writing to custom properties rather than re-rendering. Disable the spotlight on touch devices, and render only a faint static center glow when prefers-reduced-motion is set.
live preview
Style & MotionAdvanced~300 credits
Loading Skeleton Shimmer
Show shimmering placeholders while CMS content loads in
Create a skeleton placeholder component matching a card layout, with rounded blocks for image, title and lines, animated by a diagonal shimmer gradient sweeping across each block on a continuous loop. Expose controls for block sizes and shimmer speed, and pull the base and highlight tones from theme variables so it adapts to light and dark. Use it as the loading state for a CMS-driven grid, crossfading to real content once data arrives. Replace the moving shimmer with a steady, slightly muted block and no sweep when prefers-reduced-motion is set.