If you're a Framer designer, you've probably hit the wall where Framer's built-in animations and interactions stop being enough. You want something the visual editor can't quite do — a button that follows the cursor, a list that staggers in, a marquee that doesn't visibly seam at the loop point.
That's what code overrides + code components are for. Here are five we'd put in every designer's starter kit, ranked by how often we reach for them.
1. Scroll Fade Hero
Probably the single most-asked-for Framer effect. As the user scrolls down, the hero section fades and lifts. Sounds simple — and the basic version is — but the production-ready version handles configurable thresholds, easing curves, and the awkward edge case where Framer reuses scroll containers.
OVRScroll Fade HeroFree→Best applied to landing-page heroes that introduce the rest of the content. Don't apply it to every section — the effect loses meaning when it's everywhere.
2. Magnetic Button
The micro-interaction that consistently gets the "wait, how did you do that?" reaction. Buttons subtly lean toward the cursor when nearby, snap back when you leave. Configurable strength, return-ease, accessibility-aware (keyboard focus bypasses the magnetism).
OVRMagnetic Button$8→Apply to single primary CTAs. Hero Get Started, header Buy buttons, footer Subscribe — anywhere the click matters more than the navigation.
3. Stagger Reveal
For any list, grid, or set of feature cards that should feel intentional on first paint. Wraps a container and reveals its children sequentially with configurable stagger interval. Pairs well with feature grids, testimonial rows, pricing tiers.
OVRStagger RevealFree→Two gotchas you'll find in our version that hand-rolled stagger overrides usually miss: once visible, children stay rendered (no re-trigger on subsequent scrolls), and the animation respects prefers-reduced-motion for accessibility.
4. Marquee Row
Infinite horizontal scrolling for logo strips, ticker rows, and quote carousels. Loops cleanly without the seam most CSS marquees show (the trick: duplicate the children once, animate the full strip). Pauses on hover, supports both directions.
CMPMarquee Row$12→This one's a code component, not an override — drop it on the canvas like any Framer component, pass it children. Common use: client logo strips on agency sites, "as featured in" press logo rows.
5. Tilt Card
3D card tilt that follows the cursor. Configurable perspective, max tilt angle, return ease, and — the detail most tilt effects skip — a glare overlay that sells the depth illusion.
OVRTilt Card$8→Apply to feature cards, portfolio thumbnails, or pricing tier cards on landing pages. The glare is what separates "looks 3D" from "feels 3D."
How they fit together
You don't need all five at once — but knowing they exist + how each is meant to be used is half the battle. The mental model:
- Overrides (#1, #2, #3, #5) modify existing frames. You design the frame in Framer, the override adds behavior.
- Components (#4) add new elements to the canvas. The component IS the design.
We have a longer breakdown of the override vs component distinction if you want the deep dive, plus dedicated explainers for overrides and components individually.
What's missing from this list
Lots of common effects didn't make the cut — page transitions, custom cursors, countdown timers, command palettes, scroll-snap layouts. The honest reason: they're either too project-specific to recommend universally, or we haven't shipped the polished version yet.
If you're hitting a specific need not covered by these five, the Forge writes custom overrides from natural-language prompts. Describe what you want; get production-ready code in seconds. Often the right path when your need is one-of-a-kind.