Component
Component
Component
Component
Shiny Button Component
Shiny Button Component
Shiny Button Component
Shiny Button Component
Creator
Creator
Creator
Creator
Features
This effect mixes overrides with component variants.
First off, there's a layer inside the button that tracks the cursor thanks to a "Cursor-Follow" override when we hover over the button.
Next, we've got another override used on the button component. This one makes it scale down when clicked.
These overrides can be found in the remix, but if you want, you can also copy the code from below.
Step / 01
Remix the project.
Step / 02
See how it's built.
Step / 03
Recreate it for practice.
Step / 04
Or copy and past it to your project.
Cursor follow code override for Framer
If you want to take a look at how such a code override is built in Framer, feel free to copy this code from below and dig into it.
// © Framer University. All rights reserved.
import type { ComponentType } from "react"
import { useRef, useState } from "react"
import { useEffect } from "react"
import { useSpring, animated } from "react-spring"
export function withCursorFollow(Component): ComponentType {
return (props) => {
const ref = useRef(null)
const [isHovering, setIsHovering] = useState(false)
const [originalPosition, setOriginalPosition] = useState({
left: 0,
top: 0,
})
const [centerPosition, setCenterPosition] = useState({
left: 0,
top: 0,
})
const springProps = useSpring({
left: isHovering ? originalPosition.left : centerPosition.left,
top: isHovering ? originalPosition.top : centerPosition.top,
config: { mass: 1, tension: 170, friction: 26 },
})
useEffect(() => {
if (!ref.current) return
const buttonRect = ref.current.getBoundingClientRect()
const elementRect = ref.current.getBoundingClientRect()
setCenterPosition({
left: buttonRect.width / 2 - elementRect.width / 2,
top: buttonRect.height / 2 - elementRect.height / 2,
})
const handleMouseMove = (e) => {
if (!ref.current) return
if (e.target.closest("button")) {
setIsHovering(true)
const buttonRect = e.target.getBoundingClientRect()
const elementRect = ref.current.getBoundingClientRect()
setOriginalPosition({
left:
e.clientX - buttonRect.left - elementRect.width / 2,
top:
e.clientY - buttonRect.top - elementRect.height / 2,
})
setCenterPosition({
left: buttonRect.width / 2 - elementRect.width / 2,
top: buttonRect.height / 2 - elementRect.height / 2,
})
} else {
setIsHovering(false)
}
}
window.addEventListener("mousemove", handleMouseMove)
return () => {
window.removeEventListener("mousemove", handleMouseMove)
}
}, [])
return (
<animated.div
ref={ref}
style={{
position: "absolute",
pointerEvents: "none",
left: springProps.left,
top: springProps.top,
}}
>
<Component {...props} />
</animated.div>
)
}
}
// © Framer University. All rights reserved.
import type { ComponentType } from "react"
import { useRef, useState } from "react"
import { useEffect } from "react"
import { useSpring, animated } from "react-spring"
export function withCursorFollow(Component): ComponentType {
return (props) => {
const ref = useRef(null)
const [isHovering, setIsHovering] = useState(false)
const [originalPosition, setOriginalPosition] = useState({
left: 0,
top: 0,
})
const [centerPosition, setCenterPosition] = useState({
left: 0,
top: 0,
})
const springProps = useSpring({
left: isHovering ? originalPosition.left : centerPosition.left,
top: isHovering ? originalPosition.top : centerPosition.top,
config: { mass: 1, tension: 170, friction: 26 },
})
useEffect(() => {
if (!ref.current) return
const buttonRect = ref.current.getBoundingClientRect()
const elementRect = ref.current.getBoundingClientRect()
setCenterPosition({
left: buttonRect.width / 2 - elementRect.width / 2,
top: buttonRect.height / 2 - elementRect.height / 2,
})
const handleMouseMove = (e) => {
if (!ref.current) return
if (e.target.closest("button")) {
setIsHovering(true)
const buttonRect = e.target.getBoundingClientRect()
const elementRect = ref.current.getBoundingClientRect()
setOriginalPosition({
left:
e.clientX - buttonRect.left - elementRect.width / 2,
top:
e.clientY - buttonRect.top - elementRect.height / 2,
})
setCenterPosition({
left: buttonRect.width / 2 - elementRect.width / 2,
top: buttonRect.height / 2 - elementRect.height / 2,
})
} else {
setIsHovering(false)
}
}
window.addEventListener("mousemove", handleMouseMove)
return () => {
window.removeEventListener("mousemove", handleMouseMove)
}
}, [])
return (
<animated.div
ref={ref}
style={{
position: "absolute",
pointerEvents: "none",
left: springProps.left,
top: springProps.top,
}}
>
<Component {...props} />
</animated.div>
)
}
}
Scale on click source code
Feel free to copy the code and create the code override from scratch in any of your projects.
// © Framer University. All rights reserved.
import type { ComponentType } from "react"
import { useState } from "react"
export function onClick(Component): ComponentType {
return (props) => {
const [isClicked, setIsClicked] = useState(false)
return (
<Component
{...props}
onMouseDown={() => setIsClicked(true)}
onMouseUp={() => setIsClicked(false)}
animate={
isClicked ? { scale: 0.99, y: 1.5 } : { scale: 1, y: 0 }
}
transition={{ duration: 0.1 }}
/>
)
}
}
// © Framer University. All rights reserved.
import type { ComponentType } from "react"
import { useState } from "react"
export function onClick(Component): ComponentType {
return (props) => {
const [isClicked, setIsClicked] = useState(false)
return (
<Component
{...props}
onMouseDown={() => setIsClicked(true)}
onMouseUp={() => setIsClicked(false)}
animate={
isClicked ? { scale: 0.99, y: 1.5 } : { scale: 1, y: 0 }
}
transition={{ duration: 0.1 }}
/>
)
}
}
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free
Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
