Rainbow Road

Back

Copy Link

Library

Free

Rainbow Road

28 Rainbow Road

FREE

Not loading? Preview

Made by

@frameroverrides

override

click

Help

Override

Remix & Clone

Rainbow Road

Copy

Override

Copied to Clipboard!

Instructions

(A)

Apply to a frame separate from your button frame
Place that frame inside your button stack or frame
Set the frame holding the effect to absolute position
Set 0 pixels on all sides to ensure scaling
Whatever text or image you place inside, set pointer events to “none”
If items appear behind the rainbow effect, adjust position or Z-Index

(B)

Apply to your button or frame, turn off fill
Add a new stack around your button or frame and set it to hug contents
Give the stack around your content your desired fill

Code Preview

import React, { useState } from "react"
import { useEffect } from "react"
import type { ComponentType } from "react"
import { motion } from "framer-motion"
import styled from "styled-components"
import { useAnimation } from "framer-motion"

const GradientWrapper = styled(motion.div)`
  position: relative;
  overflow: hidden;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: -250%;
    width: 400%;
    height: 100%;
    background: linear-gradient(90deg, 
      rgba(0,0,0,0), 
      #4fcf70, 
      #fad648, 
      #a767e5, 
      #12bcfe, 
      #44ce7b, 
      #4fcf70, 
      #fad648, 
      #a767e5, 
      #12bcfe, 
      #44ce7b,
      rgba(0,0,0,0));
    transform: skewX(-10deg);
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }

  &:hover:after {
    left: 0;
    opacity: 1;
    animation: moveGradient 1s linear infinite;
  }

  @keyframes moveGradient {
    0% {
      left: -150%;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      left: 150%;
      opacity: 0;
    }
  }
`
const rainbowHoverVariants = {
    initial: {
        background: "transparent",
        backgroundSize: "200% auto",
        backgroundPositionX: "200%",
    },
    hover: {
        background:
            "linear-gradient(to right, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b)",
        backgroundSize: "200% auto",
        backgroundPositionX: ["200%", "0%"],
        transition: {
            duration: 2,
            ease: "linear",
            repeat: Infinity,
        },
    },
}

export function withHoverA(Component): ComponentType {
    return (props) => {
        const [hovered, setHovered] = useState(false)

        return (
            <GradientWrapper
                {...props}
                onMouseEnter={() => setHovered(true)}
                onMouseLeave={() => {
                    setHovered(false)
                }}
                style={{
                    "--gradient-opacity": hovered ? 1 : 0,
                }}
            >
                <Component {...props} />
            </GradientWrapper>
        )
    }
}

export function withHoverB(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        const handleMouseEnter = () => {
            controls.start("hover")
        }

        const handleMouseLeave = () => {
            controls.stop()
            controls.set("initial")
        }

        return (
            <Component
                {...props}
                as={motion.div}
                variants={rainbowHoverVariants}
                animate={controls}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            />
        )
    }
}

export function withLoopB(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        useEffect(() => {
            controls.start("hover")
        }, [controls])

        return (
            <Component
                {...props}
                as={motion.div}
                variants={rainbowHoverVariants}
                animate={controls}
            />
        )
    }
}

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.