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