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.
USA:
Current Weather
Show current weather data for any set location.
Progressive blur
The famous progressive blur that Apple uses it throughout various parts in iOS.
Hover me
Hover me
Magnetic hover
Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.
Gradient ease
Remove that ugly edge at the end of your gradient and have a smooth ease in.
Clock + date
Show time and date for any set timezone. Multiple customization options.
Fade it
Fade out any frame or image in seconds, without relying on gradient workarounds.
Auto copyright
Updates the copyright statement year in your footer automatically.
Image flip
Simple override that allows images to be flipped horizontally or vertically.
USA:
Current Weather
Show current weather data for any set location.
Progressive blur
The famous progressive blur that Apple uses it throughout various parts in iOS.
Hover me
Hover me
Magnetic hover
Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.
Gradient ease
Remove that ugly edge at the end of your gradient and have a smooth ease in.
Clock + date
Show time and date for any set timezone. Multiple customization options.
Fade it
Fade out any frame or image in seconds, without relying on gradient workarounds.
Auto copyright
Updates the copyright statement year in your footer automatically.
Image flip
Simple override that allows images to be flipped horizontally or vertically.
USA:
Current Weather
Show current weather data for any set location.
Progressive blur
The famous progressive blur that Apple uses it throughout various parts in iOS.
Hover me
Hover me
Magnetic hover
Add a magnetic hover effect like on iPad OS. Easy to adjust values in code.
Gradient ease
Remove that ugly edge at the end of your gradient and have a smooth ease in.
Clock + date
Show time and date for any set timezone. Multiple customization options.
Fade it
Fade out any frame or image in seconds, without relying on gradient workarounds.
Auto copyright
Updates the copyright statement year in your footer automatically.
Image flip
Simple override that allows images to be flipped horizontally or vertically.
Premium collection
Premium collection
Premium collection
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.
Time Since
Displays the time passed since a chosen starting date.
Word Switch
Display a series of words that smoothly transition between each other.
Audio Player
Fully functional and customizable audio player with volume controls.
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.
Scrambled text
Scramble text to create a cool effect while choosing your own style, subtle or all in.
Text Truncate
Multiple customization options, fully responsive and uses framer motion.
Depth + outline
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.
SVG mask + text
Choose any svg or text and use it as a mask on any image of your choice.
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.
Edge Glow
Add a hover glow to the edges or the entire area of any frame.
Scroll Word Reveal
Dynamically reveal words in a phrase based on user's scroll position.
Display Grid
Multiple grid layout patterns, super customizable and fully responsive.
FAQ
Eleveight Supply
Why should I use this component?
First of all because it won't break the fluid motion when expanding and collapsing. The way Framer uses motion inside the dom is by transform and scale, so if you won't wrap everything on the page in one huge component (which applies motion to all emenents) it will break the motion.
How does this component fix the issue?
We found a work-around using the capabilities of JS and other little tricks and the result is having all other sections and components on the page wrap around animating smoothly all together.
Is it hard to set-up?
Absolutely not. In fact is a lot faster than having to design it manually in Framer. You can get your FAQ section with this component in a matter of seconds.
Set-up your faq in seconds
Setting up your faq has never been easier. On top of that it's also smooth and fully adjustable and responsive without breaking the animation.
FAQ
Create FAQs in seconds, while keeping fluid motion on all elements around.
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.
We're cooking
More premium components being added.
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.
Time Since
Displays the time passed since a chosen starting date.
Word Switch
Display a series of words that smoothly transition between each other.
Audio Player
Fully functional and customizable audio player with volume controls.
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.
Scrambled text
Scramble text to create a cool effect while choosing your own style, subtle or all in.
Text Truncate
Multiple customization options, fully responsive and uses framer motion.
Depth + outline
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.
SVG mask + text
Choose any svg or text and use it as a mask on any image of your choice.
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.
Edge Glow
Add a hover glow to the edges or the entire area of any frame.
Scroll Word Reveal
Dynamically reveal words in a phrase based on user's scroll position.
Display Grid
Multiple grid layout patterns, super customizable and fully responsive.
FAQ
Eleveight Supply
Why should I use this component?
First of all because it won't break the fluid motion when expanding and collapsing. The way Framer uses motion inside the dom is by transform and scale, so if you won't wrap everything on the page in one huge component (which applies motion to all emenents) it will break the motion.
How does this component fix the issue?
We found a work-around using the capabilities of JS and other little tricks and the result is having all other sections and components on the page wrap around animating smoothly all together.
Is it hard to set-up?
Absolutely not. In fact is a lot faster than having to design it manually in Framer. You can get your FAQ section with this component in a matter of seconds.
Set-up your faq in seconds
Setting up your faq has never been easier. On top of that it's also smooth and fully adjustable and responsive without breaking the animation.
FAQ
Create FAQs in seconds, while keeping fluid motion on all elements around.
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.
We're cooking
More premium components being added.
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.
Time Since
Displays the time passed since a chosen starting date.
Word Switch
Display a series of words that smoothly transition between each other.
Audio Player
Fully functional and customizable audio player with volume controls.
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.
Scrambled text
Scramble text to create a cool effect while choosing your own style, subtle or all in.
Text Truncate
Multiple customization options, fully responsive and uses framer motion.
Depth + outline
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.
SVG mask + text
Choose any svg or text and use it as a mask on any image of your choice.
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.
Edge Glow
Add a hover glow to the edges or the entire area of any frame.
Scroll Word Reveal
Dynamically reveal words in a phrase based on user's scroll position.
Display Grid
Multiple grid layout patterns, super customizable and fully responsive.
FAQ
Eleveight Supply
Why should I use this component?
First of all because it won't break the fluid motion when expanding and collapsing. The way Framer uses motion inside the dom is by transform and scale, so if you won't wrap everything on the page in one huge component (which applies motion to all emenents) it will break the motion.
How does this component fix the issue?
We found a work-around using the capabilities of JS and other little tricks and the result is having all other sections and components on the page wrap around animating smoothly all together.
Is it hard to set-up?
Absolutely not. In fact is a lot faster than having to design it manually in Framer. You can get your FAQ section with this component in a matter of seconds.
Set-up your faq in seconds
Setting up your faq has never been easier. On top of that it's also smooth and fully adjustable and responsive without breaking the animation.
FAQ
Create FAQs in seconds, while keeping fluid motion on all elements around.
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.
We're cooking
More premium components being added.
Follow us on x.com
Say hello: sales@eleveight.supply
Follow us on x.com
Say hello: sales@eleveight.supply
Follow us on x.com
Say hello: sales@eleveight.supply