Animated Shiny Pill in Framer

Copy component

Animated Shiny Pill in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Animated Shiny Pill in Framer

This is a shiny animated pill, created in Framer using some code overrides. Feel free to remix the project to see how it's structured and try rebuilding it for practice. You can also just copy and paste it into your project and customize the component with the properties in the right panel.

image of Nandi Muzsik

Created by

Animated Shiny Pill in Framer
Animated Shiny Pill in Framer
Animated Shiny Pill in Framer

About the resource

The main trickery in this little component is the two overrides I use. One called "Frame Shine" masks a frame from left to right repeatedly, and another called "Text Shine" does the same for text layers.

Once you have access to these magical code overrides, you just need to come up with smarter component structures to create visual effects that absolutely blow everyone's mind.

About the resource

The main trickery in this little component is the two overrides I use. One called "Frame Shine" masks a frame from left to right repeatedly, and another called "Text Shine" does the same for text layers.

Once you have access to these magical code overrides, you just need to come up with smarter component structures to create visual effects that absolutely blow everyone's mind.

About the resource

The main trickery in this little component is the two overrides I use. One called "Frame Shine" masks a frame from left to right repeatedly, and another called "Text Shine" does the same for text layers.

Once you have access to these magical code overrides, you just need to come up with smarter component structures to create visual effects that absolutely blow everyone's mind.

shiny pill layer structure

Shiny pill layer structure.

shiny pill layer structure

Shiny pill layer structure.

shiny pill layer structure

Shiny pill layer structure.

In this case, I'm layering different text layers above each other. The base text layer on the bottom doesn’t have any override, giving us the baseline color for the text. All the other text layers on top of the baseline text have the override and different layer blur values. That's how we achieve a nice shiny animation that goes from left to right repeatedly.

Frame Shine code override

Apply this override to any frame to mask it from left to right over and over again. To create the override in your project, go the left panel, click assets, and scroll down to code, where you can click the plus button to create a new override. Replace the auto-generated code with the one below and you're done.

In this case, I'm layering different text layers above each other. The base text layer on the bottom doesn’t have any override, giving us the baseline color for the text. All the other text layers on top of the baseline text have the override and different layer blur values. That's how we achieve a nice shiny animation that goes from left to right repeatedly.

Frame Shine code override

Apply this override to any frame to mask it from left to right over and over again. To create the override in your project, go the left panel, click assets, and scroll down to code, where you can click the plus button to create a new override. Replace the auto-generated code with the one below and you're done.

In this case, I'm layering different text layers above each other. The base text layer on the bottom doesn’t have any override, giving us the baseline color for the text. All the other text layers on top of the baseline text have the override and different layer blur values. That's how we achieve a nice shiny animation that goes from left to right repeatedly.

Frame Shine code override

Apply this override to any frame to mask it from left to right over and over again. To create the override in your project, go the left panel, click assets, and scroll down to code, where you can click the plus button to create a new override. Replace the auto-generated code with the one below and you're done.

import { useEffect } from "react"
import type { ComponentType } from "react"

export function withFrameShine(Component: ComponentType): ComponentType {
    return (props) => {
        useEffect(() => {
            const style = document.createElement("style")
            style.innerHTML = `
              @keyframes maskShine {
                0% { -webkit-mask-position: 200%; }
                100% { -webkit-mask-position: -100%; }
              }
              .maskShine {
                -webkit-mask-image: linear-gradient(to right, transparent 30%, #EEE 50%, transparent 70%);
                -webkit-mask-size: 150% auto;
                animation: maskShine 5s ease-in-out infinite;
              }
            `
            document.head.appendChild(style)
        }, [])

        const { className, ...rest } = props
        const combinedClassName = [className, "maskShine"]
            .filter(Boolean)
            .join(" ")

        return <Component {...rest} className={combinedClassName} />
    }
}
import { useEffect } from "react"
import type { ComponentType } from "react"

export function withFrameShine(Component: ComponentType): ComponentType {
    return (props) => {
        useEffect(() => {
            const style = document.createElement("style")
            style.innerHTML = `
              @keyframes maskShine {
                0% { -webkit-mask-position: 200%; }
                100% { -webkit-mask-position: -100%; }
              }
              .maskShine {
                -webkit-mask-image: linear-gradient(to right, transparent 30%, #EEE 50%, transparent 70%);
                -webkit-mask-size: 150% auto;
                animation: maskShine 5s ease-in-out infinite;
              }
            `
            document.head.appendChild(style)
        }, [])

        const { className, ...rest } = props
        const combinedClassName = [className, "maskShine"]
            .filter(Boolean)
            .join(" ")

        return <Component {...rest} className={combinedClassName} />
    }
}
import { useEffect } from "react"
import type { ComponentType } from "react"

export function withFrameShine(Component: ComponentType): ComponentType {
    return (props) => {
        useEffect(() => {
            const style = document.createElement("style")
            style.innerHTML = `
              @keyframes maskShine {
                0% { -webkit-mask-position: 200%; }
                100% { -webkit-mask-position: -100%; }
              }
              .maskShine {
                -webkit-mask-image: linear-gradient(to right, transparent 30%, #EEE 50%, transparent 70%);
                -webkit-mask-size: 150% auto;
                animation: maskShine 5s ease-in-out infinite;
              }
            `
            document.head.appendChild(style)
        }, [])

        const { className, ...rest } = props
        const combinedClassName = [className, "maskShine"]
            .filter(Boolean)
            .join(" ")

        return <Component {...rest} className={combinedClassName} />
    }
}

Text Shine code override

Apply this override to any text layer to mask it from left to right repeatedly. To create the override in your project, go to the left panel, click on assets, and scroll down to code. Click the plus button to create a new override. Replace the auto-generated code with the one below, and you're done.

Text Shine code override

Apply this override to any text layer to mask it from left to right repeatedly. To create the override in your project, go to the left panel, click on assets, and scroll down to code. Click the plus button to create a new override. Replace the auto-generated code with the one below, and you're done.

Text Shine code override

Apply this override to any text layer to mask it from left to right repeatedly. To create the override in your project, go to the left panel, click on assets, and scroll down to code. Click the plus button to create a new override. Replace the auto-generated code with the one below, and you're done.

import { useEffect } from "react"
import type { Override } from "framer"
export const TextShine: Override = (props) => {
    useEffect(() => {
        const style = document.createElement("style")
        style.innerHTML = `
@keyframes shine {
0% { -webkit-mask-position: 200%; }
100% { -webkit-mask-position: -100%; }
}
        .shine {
            -webkit-mask-image: linear-gradient(to right, transparent 30%, #EEE 50%, transparent 70%);
            -webkit-mask-size: 150% auto;
            animation: shine 5s ease-in-out infinite;
        }
    `
        document.head.appendChild(style)
    }, [])

    return {
        ...props,
        style: {
            ...props.style, // existing styles
        },
        children: <span className="shine">{props.children}</span>,
    }
}
import { useEffect } from "react"
import type { Override } from "framer"
export const TextShine: Override = (props) => {
    useEffect(() => {
        const style = document.createElement("style")
        style.innerHTML = `
@keyframes shine {
0% { -webkit-mask-position: 200%; }
100% { -webkit-mask-position: -100%; }
}
        .shine {
            -webkit-mask-image: linear-gradient(to right, transparent 30%, #EEE 50%, transparent 70%);
            -webkit-mask-size: 150% auto;
            animation: shine 5s ease-in-out infinite;
        }
    `
        document.head.appendChild(style)
    }, [])

    return {
        ...props,
        style: {
            ...props.style, // existing styles
        },
        children: <span className="shine">{props.children}</span>,
    }
}
import { useEffect } from "react"
import type { Override } from "framer"
export const TextShine: Override = (props) => {
    useEffect(() => {
        const style = document.createElement("style")
        style.innerHTML = `
@keyframes shine {
0% { -webkit-mask-position: 200%; }
100% { -webkit-mask-position: -100%; }
}
        .shine {
            -webkit-mask-image: linear-gradient(to right, transparent 30%, #EEE 50%, transparent 70%);
            -webkit-mask-size: 150% auto;
            animation: shine 5s ease-in-out infinite;
        }
    `
        document.head.appendChild(style)
    }, [])

    return {
        ...props,
        style: {
            ...props.style, // existing styles
        },
        children: <span className="shine">{props.children}</span>,
    }
}

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

  • Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component