Code components & overrides

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.

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

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

Free collection

Free collection

Free collection

Premium collection

(coming soon)

Premium collection

(coming soon)

Premium collection

(coming soon)

0

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.

Variable fonts

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

Updated: ago

Time Since

Displays the time passed since a chosen starting date.

SVG mask + text

Choose any svg or text and use it as a mask on any image of your choice.

Fancy button

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.

🎉

Tap me

Confetti

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

am i scrambled?

Scrambled text

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

Before & After

Advanced before & after slider with multiple customization options.

The most advanced text truncate Framer code component

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

Outline
Outline
Outline

Outline + depth

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

Hover Zoom

Hover to zoom on any image. It comes with 3 predefined zoom styles.

NEW

3D Elements

Coming soon

NEW

3D Elements

Download

NEW

After Date

Show, switch or hide any frame or component by a set date and time.

01

02

03

Scroll Snap

Add scroll snapping sections. Works both for vertical and horizontal scrolling.

Code Overrides

In Framer, "code overrides" refer to a powerful feature that allows users to modify the behavior and properties of visual elements or components directly through code.

Benefits of Using Code Overrides


  • Enhanced Interactivity: Code overrides provide a layer of interactivity that can make prototypes feel more like the final application.


  • Custom Animations: They allow for custom animations and transitions that are not limited to what is available in the GUI.


Scroll Edge Fade

Fade out the container edges upon scrolling. Both horizontally or vertically.

Negative Gap

Connect multiple frames and set a negative gap between them.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Display Grid

Multiple grid layout patterns, super customizable and fully responsive.

CMS Formatted text field

This is a formatted text paragraph linked to a CMS collection with the component applied. You can see the images take up the full width of the container and have corner radius applied.

CMS Images style

Style width and radius on formatted text images inside your CMS collection.

Previous page

Back button

Convert any frame to a back button which goes to previous page.

We're cooking

More premium components being added.

0

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.

Variable fonts

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

Updated: ago

Time Since

Displays the time passed since a chosen starting date.

SVG mask + text

Choose any svg or text and use it as a mask on any image of your choice.

Fancy button

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.

🎉

Tap me

Confetti

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

am i scrambled?

Scrambled text

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

Before & After

Advanced before & after slider with multiple customization options.

The most advanced text truncate Framer code component

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

Outline
Outline
Outline

Outline + depth

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

Hover Zoom

Hover to zoom on any image. It comes with 3 predefined zoom styles.

NEW

3D Elements

Coming soon

NEW

3D Elements

Download

NEW

After Date

Show, switch or hide any frame or component by a set date and time.

01

02

03

Scroll Snap

Add scroll snapping sections. Works both for vertical and horizontal scrolling.

Code Overrides

In Framer, "code overrides" refer to a powerful feature that allows users to modify the behavior and properties of visual elements or components directly through code.

Benefits of Using Code Overrides


  • Enhanced Interactivity: Code overrides provide a layer of interactivity that can make prototypes feel more like the final application.


  • Custom Animations: They allow for custom animations and transitions that are not limited to what is available in the GUI.


Scroll Edge Fade

Fade out the container edges upon scrolling. Both horizontally or vertically.

Negative Gap

Connect multiple frames and set a negative gap between them.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Display Grid

Multiple grid layout patterns, super customizable and fully responsive.

CMS Formatted text field

This is a formatted text paragraph linked to a CMS collection with the component applied. You can see the images take up the full width of the container and have corner radius applied.

CMS Images style

Style width and radius on formatted text images inside your CMS collection.

Previous page

Back button

Convert any frame to a back button which goes to previous page.

We're cooking

More premium components being added.

0

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.

Variable fonts

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

Updated: ago

Time Since

Displays the time passed since a chosen starting date.

SVG mask + text

Choose any svg or text and use it as a mask on any image of your choice.

Fancy button

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.

🎉

Tap me

Confetti

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

am i scrambled?

Scrambled text

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

Before & After

Advanced before & after slider with multiple customization options.

The most advanced text truncate Framer code component

Text Truncate

Multiple customization options, fully responsive and uses framer motion.

Outline
Outline
Outline

Outline + depth

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

Hover Zoom

Hover to zoom on any image. It comes with 3 predefined zoom styles.

NEW

3D Elements

Coming soon

NEW

3D Elements

Download

NEW

After Date

Show, switch or hide any frame or component by a set date and time.

01

02

03

Scroll Snap

Add scroll snapping sections. Works both for vertical and horizontal scrolling.

Code Overrides

In Framer, "code overrides" refer to a powerful feature that allows users to modify the behavior and properties of visual elements or components directly through code.

Benefits of Using Code Overrides


  • Enhanced Interactivity: Code overrides provide a layer of interactivity that can make prototypes feel more like the final application.


  • Custom Animations: They allow for custom animations and transitions that are not limited to what is available in the GUI.


Scroll Edge Fade

Fade out the container edges upon scrolling. Both horizontally or vertically.

Negative Gap

Connect multiple frames and set a negative gap between them.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Display Grid

Multiple grid layout patterns, super customizable and fully responsive.

CMS Formatted text field

This is a formatted text paragraph linked to a CMS collection with the component applied. You can see the images take up the full width of the container and have corner radius applied.

CMS Images style

Style width and radius on formatted text images inside your CMS collection.

Previous page

Back button

Convert any frame to a back button which goes to previous page.

We're cooking

More premium components being added.

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

A product by

made by Fabian Albert.

© 2024 - Eleveight Supply™

Follow us on x.com

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

A product by

made by Fabian Albert.

Follow us on x.com

© 2024 - Eleveight Supply™

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

A product by

made by Fabian Albert.

© 2024 - Eleveight Supply™

Follow us on x.com