Code components & overrides

Code components

& overrides

Unlock the best in Framer with our collection of free and premium code components and overrides, curated to enhance your designs.

Search components

USA:

Current Weather

Show current weather data for any set location.

USA:

Current Weather

Show current weather data for any set location.

Progressive blur

The famous progressive blur that Apple uses throughout various parts in iOS.

Progressive blur

The famous progressive blur that Apple uses throughout various parts in iOS.

Hover me

Magnetic hover

Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.

Hover me

Magnetic hover

Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.

Smooth Shift

Eliminates layout jumps on the page when you have animating height or width.

Smooth Shift

Eliminates layout jumps on the page when you have animating height or width.

Gradient ease

Remove that ugly edge at the end of your gradient and have a smooth ease in.

Gradient ease

Remove that ugly edge at the end of your gradient and have a smooth ease in.

Closed. We'll be back Wednesday 9:00 AM – 5:00 PM

Closed. We'll be back Wednesday 09:00 – 17:00

Offline

Open hours

Open/Closed status with timezone support, and full weekly schedule.

Closed. We'll be back Wednesday 9:00 AM – 5:00 PM

Closed. We'll be back Wednesday 09:00 – 17:00

Offline

Open hours

Open/Closed status with timezone support, and full weekly schedule.

Clock + date

Show time and date for any set timezone. Multiple customization options.

Clock + date

Show time and date for any set timezone. Multiple customization options.

Random Variant

Randomly displays any connected frames on each page load.

Random Variant

Randomly displays any connected frames on each page load.

Analog Clock

Display the time in a classic & timeless way. Hands up, hands moving.

Analog Clock

Display the time in a classic & timeless way. Hands up, hands moving.

Fade it

Fade out any frame or image with multiple easing types of masks.

Fade it

Fade out any frame or image with multiple easing types of masks.

Auto copyright

Updates the copyright statement year in your footer automatically.

Auto copyright

Updates the copyright statement year in your footer automatically.

Image flip

Simple override that allows images to be flipped horizontally or vertically.

Image flip

Simple override that allows images to be flipped horizontally or vertically.

Scroll to top

Transform any frame to a smooth scroll to top action.

Scroll to top

Transform any frame to a smooth scroll to top action.

Premium collection

Better Carousel

Advanced features like drag-to-scroll, and a trully seamless infinite loop.

Better Carousel

Advanced features like drag-to-scroll, and a trully seamless infinite loop.

Animated counter

Animate your numbers with a start & end value and multiple customization options.

Animated counter

Animate your numbers with a start & end value and multiple customization options.

Image trail

Smooth trail of custom set images that follows your mouse cursor.

Image trail

Smooth trail of custom set images that follows your mouse cursor.

Variable fonts

Choose from over 75 fonts and get these variable weights popping.

Variable fonts

Choose from over 75 fonts and get these variable weights popping.

Updated: 1 year ago

Time Since

Displays the time passed since a chosen starting date.

Updated: 1 year ago

Time Since

Displays the time passed since a chosen starting date.

Word Switch

Display a series of words that smoothly transition between each other.

Word Switch

Display a series of words that smoothly transition between each other.

Smooth counter

Number ounter that smoothly scrolls from a start to an end value.

Smooth counter

Number ounter that smoothly scrolls from a start to an end value.

Audio Player

Fully functional and customizable audio player with volume controls.

Audio Player

Fully functional and customizable audio player with volume controls.

Frame beam

Adds an animated border outline to any connected frame. This is fully responsive.

Frame beam

Adds an animated border outline to any connected frame. This is fully responsive.

3D Hover & tilt

Turn any frame or image into a 3D card which tilts on hover smoothly.

3D Hover & tilt

Turn any frame or image into a 3D card which tilts on hover smoothly.

🎉

Confetti

Play beautiful confetti on button press or page load. Advanced customization.

🎉

Confetti

Play beautiful confetti on button press or page load. Advanced customization.

Before & After

Advanced before & after slider with multiple customization options.

Before & After

Advanced before & after slider with multiple customization options.

Scrambled text

Scramble text to create a cool effect while choosing your own style, subtle or all in.

Scrambled text

Scramble text to create a cool effect while choosing your own style, subtle or all in.

Custom Scroll Bar

Replace the native scroll bar with a custom one, works on mobile too.

Custom Scroll Bar

Replace the native scroll bar with a custom one, works on mobile too.

The most advanced text truncate Framer code…

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

The most advanced text truncate Framer code…

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

Depth + outline

Outline or 3D depth any text. Endless customization possibilities.

Depth + outline

Outline or 3D depth any text. Endless customization possibilities.