What is a Framer code override? A designer's guide.

If you've ever wanted a Framer site to do something a little smarter — a button that follows the cursor, a hero that fades on scroll, a list that animates in sequence — chances are someone told you "you need a code override."

But what is an override, exactly? And why does Framer have them in the first place?

The one-sentence answer

A Framer code override is a small piece of TypeScript that wraps a frame on your Framer canvas and changes how that frame behaves at runtime — without touching the frame's visual design.

Think of it as a layer of behavior you bolt onto an otherwise normal Framer element. The element still lives in your design file. The override is what makes it move, react, or pull in data.

Why overrides exist

Framer's visual editor is excellent for designing what something looks like. But there are interactions you can't express with built-in animations alone:

• Cursor-following effects (magnetic buttons, tilt cards)
• Scroll-driven animations beyond the basics (parallax, fade-on-scroll with custom easing)
• Server-backed data (live view counts, fetched content)
• Cross-element coordination (stagger reveals, command palettes)

For any of those, you need to drop down to code. Overrides are Framer's way of letting you do that without abandoning the visual editor — the design stays where it is, the code lives in a separate file, and you wire them together via the Code Overrides panel.

What an override looks like

Here's the simplest possible one — adds opacity 0.5 to any frame it's applied to:

import type { ComponentType } from "react"

export function withFade(Component): ComponentType {
  return (props) => <Component {...props} style={{ ...props.style, opacity: 0.5 }} />
}

The function takes a Component (the frame Framer hands you), returns a new Component that renders the original wrapped in extra behavior. That wrapper is the override.

You apply it from Framer's Code Overrides panel on the right sidebar — pick the file, pick the function, done.

When not to use an override

Overrides are for modifying existing elements. If you need to add something new to the canvas — a custom UI component with its own design — that's a job for a code component, not an override.

The two get confused all the time. We wrote a side-by-side comparison that walks through when to reach for each, plus a dedicated explainer for code components if you want the components-side primer.

Try one without writing any code

Want to see an override in action without typing a line? Grab the free scroll-fade hero from our marketplace — drop it on a hero frame, watch it work:

And if you want a custom one written for your design, the Forge writes overrides from plain-English prompts. Describe what you want; get the code; paste it in.