Text Mask

With Images

Copy

Hello.

Easing Gradient

HUSL, HSLA, RGBA

Copy
Gradient
✦ ADD SOME MAGIC ✦ ADD SOME MAGIC

Arc Text

Text on Paths

Copy

Color Cycle

Infinite Looping

Color Cycle

Infinite Looping

Copy
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

Copy

Globe

Interactive

Copy

Conic Gradient

Blur and Animate

Copy
Copy

Headings

Scaled Type

Gradient Noise

Noise Gradient

Fun with Blending

Copy

Randomize

Sets of Colors

Copy

Morpher

Morph Shapes

Copy

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

Particles

Interactive

Copy

Grain

Animated

Copy

Noise

Static

Copy

Squircles

Super Ellipses

Copy

Patterns

CSS and SVG

Copy

Animator

Animate Paths

Copy

Text Mask

With Images

Copy

Hello.

Easing Gradient

HUSL, HSLA, RGBA

Copy
Gradient
✦ ADD SOME MAGIC ✦ ADD SOME MAGIC

Arc Text

Text on Paths

Copy

Color Cycle

Infinite Looping

Color Cycle

Infinite Looping

Copy
@font-face {
  font-family: Inter;
  src: url("Inter.woff2");
}

body,
.text {
  color: #fff;
  background: #000;
  font-family: Inter;
  --heading: 24px/32px;
}

Syntax

Code Snippets

Copy

Globe

Interactive

Copy

Conic Gradient

Blur and Animate

Copy
Copy

Headings

Scaled Type

Gradient Noise

Noise Gradient

Fun with Blending

Copy

Randomize

Sets of Colors

Copy

Morpher

Morph Shapes

Copy

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

Particles

Interactive

Copy

Grain

Animated

Copy

Noise

Static

Copy

Squircles

Super Ellipses

Copy

Patterns

CSS and SVG

Copy

Animator

Animate Paths

Copy

Text Mask

With Images

Copy

Hello.

Easing Gradient

HUSL, HSLA, RGBA

Copy
Gradient
✦ ADD SOME MAGIC ✦ ADD SOME MAGIC

Arc Text

Text on Paths

Copy

Color Cycle

Infinite Looping

Color Cycle

Infinite Looping

Copy
@font-face {
  font-family: Inter;
  src: url("Inter.woff2");
}

body,
.text {
  color: #fff;
  background: #000;
  font-family: Inter;
  --heading: 24px/32px;
}

Syntax

Code Snippets

Copy

Globe

Interactive

Copy

Conic Gradient

Blur and Animate

Copy
Copy

Headings

Scaled Type

Gradient Noise

Noise Gradient

Fun with Blending

Copy

Randomize

Sets of Colors

Copy

Morpher

Morph Shapes

Copy

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

Particles

Interactive

Copy

Grain

Animated

Copy

Noise

Static

Copy

Squircles

Super Ellipses

Copy

Patterns

CSS and SVG

Copy

Animator

Animate Paths

Copy

Text Mask

With Images

Copy

Hello.

Easing Gradient

HUSL, HSLA, RGBA

Copy
Gradient
✦ ADD SOME MAGIC ✦ ADD SOME MAGIC

Arc Text

Text on Paths

Copy

Color Cycle

Infinite Looping

Color Cycle

Infinite Looping

Copy
@font-face {
  font-family: Inter;
  src: url("Inter.woff2");
}

body,
.text {
  color: #fff;
  background: #000;
  font-family: Inter;
  --heading: 24px/32px;
}

Syntax

Code Snippets

Copy

Globe

Interactive

Copy

Conic Gradient

Blur and Animate

Copy
Copy

Headings

Scaled Type

Gradient Noise

Noise Gradient

Fun with Blending

Copy

Randomize

Sets of Colors

Copy

Morpher

Morph Shapes

Copy

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

🌈

Particles

Interactive

Copy

Grain

Animated

Copy

Noise

Static

Copy

Squircles

Super Ellipses

Copy

Patterns

CSS and SVG

Copy

Animator

Animate Paths

Copy

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.

Can I request a component?

Absolutely! Requests are most welcome—I’d love to hear what you’re looking to add to your Framer site. In fact, many of these were made in response to requests from the community. Feel free to reach out on Twitter, or find me hanging in our Discord.

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.

Can I request a component?

Absolutely! Requests are most welcome—I’d love to hear what you’re looking to add to your Framer site. In fact, many of these were made in response to requests from the community. Feel free to reach out on Twitter, or find me hanging in our Discord.

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!

Conic

Pattern

Noise

Arc

Opacity
1

Radius

100

Angle

45°

Effect

Animate