Version: 3.5.13

Animations

Explore hover animations and 3D effects for components. Each animation includes interactive previews and ready-to-use code examples that you can copy and adapt for your needs.

Professional Animations

Subtle, business-appropriate animations that enhance user experience without being distracting.

Lift Effect
Professional

Subtle upward movement on hover

Lift Effect
Lift Effect

Hover to lift

import { motion } from "framer-motion"; import { professionalVariants } from "@/utils/animations"; <motion.div variants={professionalVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Shadow Depth
Professional

Dynamic shadow that increases on hover

Shadow Depth
Shadow Depth

Dynamic shadow effect

import { motion } from "framer-motion"; import { professionalShadowVariants } from "@/utils/animations"; <motion.div variants={professionalShadowVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Border Glow
Professional

Border color transition on hover

Border Glow
Border Glow

Hover to see the effect

import { motion, useMotionValue, useSpring } from "framer-motion"; import { Card } from "beacon-ui"; const borderColor = useMotionValue("var(--border-strong-200)"); const animatedBorderColor = useSpring(borderColor, { stiffness: 300, damping: 30, }); <motion.div onHoverStart={() => borderColor.set("var(--border-primary)")} onHoverEnd={() => borderColor.set("var(--border-strong-200)")} style={{ width: "300px" }} > <Card padding={400} cornerRadius={4} showBorder={false} style={{ height: "200px", border: "var(--border-width-25) solid", borderColor: animatedBorderColor, }} > {/* Your content */} </Card> </motion.div>
Smooth Scale
Professional

Subtle scaling on hover

Smooth Scale
Smooth Scale

Subtle scaling effect

import { motion } from "framer-motion"; import { professionalSmoothScaleVariants } from "@/utils/animations"; <motion.div variants={professionalSmoothScaleVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Playful Animations

Fun, energetic animations that add personality and delight to interactions.

Bounce Effect
Playful

Bouncy rotation animation on hover

import { motion } from "framer-motion"; import { playfulBounceVariants } from "@/utils/animations"; <motion.div variants={playfulBounceVariants} initial="rest" whileHover="hover" animate="rest" > <Button color="primary" variant="filled"> Bounce Button </Button> </motion.div>
Elastic Scale
Playful

Spring-based elastic scaling

Elastic Scale
Elastic Scale

Spring-based animation

import { motion } from "framer-motion"; import { playfulElasticVariants } from "@/utils/animations"; <motion.div variants={playfulElasticVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Jelly
Playful

Elastic jelly-like wobble effect

Jelly
Jelly

Elastic wobble effect

import { motion } from "framer-motion"; import { playfulJellyVariants } from "@/utils/animations"; <motion.div variants={playfulJellyVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Pop
Playful

Quick spring-based pop effect

Pop
Pop

Quick spring effect

import { motion } from "framer-motion"; import { playfulPopVariants } from "@/utils/animations"; <motion.div variants={playfulPopVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Minimal Animations

Very subtle micro-interactions that provide feedback without drawing attention.

Fade Effect
Minimal

Subtle opacity change

Fade Effect
Fade Effect

Subtle opacity change

import { motion } from "framer-motion"; import { minimalFadeVariants } from "@/utils/animations"; <motion.div variants={minimalFadeVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Subtle Shift
Minimal

Minimal horizontal movement

Subtle Shift
Subtle Shift

Minimal movement

import { motion } from "framer-motion"; import { minimalShiftVariants } from "@/utils/animations"; <motion.div variants={minimalShiftVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Soft Glow
Minimal

Subtle glow effect on hover

Soft Glow
Soft Glow

Gentle glow effect

import { motion } from "framer-motion"; import { minimalSoftGlowVariants } from "@/utils/animations"; <motion.div variants={minimalSoftGlowVariants} initial="rest" whileHover="hover" animate="rest" > <Card padding={400} cornerRadius={4}> {/* Your content */} </Card> </motion.div>
Border Fade
Minimal

Border opacity transition

Border Fade
Border Fade

Border opacity transition

import { motion } from "framer-motion"; import { minimalBorderFadeVariants } from "@/utils/animations"; <motion.div variants={minimalBorderFadeVariants} initial="rest" whileHover="hover" animate="rest" style={{ borderWidth: "var(--border-width-25)", borderStyle: "solid", borderRadius: "var(--corner-radius-400)", }} > <Card padding={400} cornerRadius={4} showBorder={false}> {/* Your content */} </Card> </motion.div>
3D-Focused Animations

Advanced 3D transforms and perspective effects that create depth and dimension.

3D Tilt Card
3D-Focused

Card that tilts based on mouse position

3D Tilt Card
3D Tilt Card

Mouse-based tilt

import { Card3D } from "@/components/animations/Card3D"; <Card3D intensity={15} perspective={1000} scale={1.05}> {/* Your content */} </Card3D>
Tilt Container
3D-Focused

Alternative tilt effect with different algorithm

Tilt Container
Tilt Container

Alternative tilt

import { TiltContainer } from "@/components/animations/TiltContainer"; <TiltContainer maxTilt={10} perspective={1000} scale={1.02}> {/* Your content */} </TiltContainer>
Parallax Hover
3D-Focused

Parallax effect with depth on hover

Parallax Hover
Parallax Hover

Depth effect

import { ParallaxHover } from "@/components/animations/ParallaxHover"; <ParallaxHover> {/* Your content */} </ParallaxHover>
Depth Glow
3D-Focused

3D depth with glowing shadow effect

Depth Glow
Depth Glow

Glowing shadow

import { DepthGlow } from "@/components/animations/DepthGlow"; <DepthGlow> {/* Your content */} </DepthGlow>