Easing Gradient
HUSL, HSLA, RGBA
Color Cycle
Infinite Looping
Color Cycle
Infinite Looping
import type { ComponentType } from "react";
/* Override */
export function setRotate(Component) {
return (props) => {
return (
<Component
{...props}
animate={{ rotate: 360 }}
transition={{
duration: 20,
repeat: Infinity,
ease: "linear"
}}
/>
);
};
}Syntax
Code Snippets
Conic Gradient
Blur and Animate
Noise Gradient
Fun with Blending
Randomize
Sets of Colors
Grain
Animated
Noise
Static
Squircles
Super Ellipses
Easing Gradient
HUSL, HSLA, RGBA
Color Cycle
Infinite Looping
Color Cycle
Infinite Looping
@font-face {
font-family: Inter;
src: url("Inter.woff2");
}
body,
.text {
color: #fff;
background: #000;
font-family: Inter;
--heading: 24px/32px;
}Syntax
Code Snippets
Conic Gradient
Blur and Animate
Noise Gradient
Fun with Blending
Randomize
Sets of Colors
Grain
Animated
Noise
Static
Squircles
Super Ellipses
Easing Gradient
HUSL, HSLA, RGBA
Color Cycle
Infinite Looping
Color Cycle
Infinite Looping
@font-face {
font-family: Inter;
src: url("Inter.woff2");
}
body,
.text {
color: #fff;
background: #000;
font-family: Inter;
--heading: 24px/32px;
}Syntax
Code Snippets
Conic Gradient
Blur and Animate
Noise Gradient
Fun with Blending
Randomize
Sets of Colors
Grain
Animated
Noise
Static
Squircles
Super Ellipses
Easing Gradient
HUSL, HSLA, RGBA
Color Cycle
Infinite Looping
Color Cycle
Infinite Looping
@font-face {
font-family: Inter;
src: url("Inter.woff2");
}
body,
.text {
color: #fff;
background: #000;
font-family: Inter;
--heading: 24px/32px;
}Syntax
Code Snippets
Conic Gradient
Blur and Animate
Noise Gradient
Fun with Blending
Randomize
Sets of Colors
Grain
Animated
Noise
Static
Squircles
Super Ellipses
FAQ
What is Framer?
Framer is a web builder for creative pros. It allows you to publish websites directly from a freeform canvas. It’s pretty special, and you can try it for free! Give framer.com a visit to learn more.
What are these components?
These are components for Framer, by Benjamin and friends. Many of them are interactive, and they’re all highly customizable. Some allow you to add fun effects—like film grain. Others allow you to add interactive and animated elements, like particles. You can use these to add little sprinkles of magic to your websites.
How do I add these to my Framer site?
Hover over any of the cards above, then click the “Copy” button. This will copy the component to your clipboard. Then, you can go back to your Framer project, and simply paste it onto the Canvas to add it to your site. Finally, you can customize the properties via the property panel on the right-hand side.
Where can I get support?
I’d recommend joining our community on Discord. You’ll find the Framer team there, plus a whole bunch of creatives sharing cool sites and templates. If you’ve found an issue, need help with your site, or simply have a question about one of these components, the community is the place to go. Hope to see you there!
What is Framer?
Framer is a web builder for creative pros. It allows you to publish websites directly from a freeform canvas. It’s pretty special, and you can try it for free! Give framer.com a visit to learn more.
What are these components?
These are components for Framer, by Benjamin and friends. Many of them are interactive, and they’re all highly customizable. Some allow you to add fun effects—like film grain. Others allow you to add interactive and animated elements, like particles. You can use these to add little sprinkles of magic to your websites.
How do I add these to my site?
Hover over any of the cards above, then click the “Copy” button. This will copy the component to your clipboard. Then, you can go back to your Framer project, and simply paste it onto the Canvas to add it to your site. Finally, you can customize the properties via the property panel on the right-hand side.
Where can I get support?
I’d recommend joining our community on Discord. You’ll find the Framer team there, plus a whole bunch of creatives sharing cool sites and templates. If you’ve found an issue, need help with your site, or simply have a question about one of these components, the community is the place to go. Hope to see you there!