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.

Created by

Nandi

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

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

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.

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.

Frame Shine code override

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

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>,
    }
}