Idle animation
Also called idle state animation or breathing animation
Subtle motion, such as breathing or blinking, that plays while a character or element waits, so it feels alive before anyone interacts.
import { useRef } from 'react';
import { motion, useInView, useReducedMotion } from 'motion/react';
// Small and slow: a 3% breath, a ±7° antenna sway, a blink every 4.5s.
const BREATHE = {
scale: [1, 1.03, 1],
transition: { duration: 3.2, repeat: Infinity }
};
const SWAY = {
rotate: [-7, 7, -7],
transition: { duration: 2.4, repeat: Infinity }
};
const BLINK = {
scaleY: [1, 0.1, 1],
transition: { duration: 0.15, repeat: Infinity, repeatDelay: 4.35 }
};
export function IdleMascot() {
const ref = useRef<HTMLButtonElement>(null);
const inView = useInView(ref);
const reduceMotion = useReducedMotion();
// Loops run only while the mascot is on screen and motion is welcome.
const idle = inView && !reduceMotion;
return (
<motion.button
ref={ref}
type='button'
aria-label='Chat with the assistant'
// React when someone arrives: a springy hop on hover or focus.
whileHover={{ y: -14 }}
whileFocus={{ y: -14 }}
transition={{ type: 'spring', stiffness: 500, damping: 14 }}
className='group relative rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-ring'
>
<span className='absolute -top-14 left-1/2 -translate-x-1/2 rounded-full bg-foreground px-2.5 py-1 text-xs font-medium text-background opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100'>
Hi!
</span>
<motion.span
animate={idle ? BREATHE : { scale: 1 }}
className='relative block size-20 origin-bottom rounded-3xl border-2 border-foreground bg-muted'
>
<motion.span
animate={idle ? SWAY : { rotate: 0 }}
className='absolute -top-5 left-1/2 h-5 w-0.5 origin-bottom -translate-x-1/2 bg-foreground'
>
<span className='absolute -top-2.5 -left-1.5 size-3.5 rounded-full bg-blue-500' />
</motion.span>
<motion.span
animate={idle ? BLINK : { scaleY: 1 }}
className='absolute inset-x-0 top-8 flex justify-center gap-5'
>
<span className='size-2.5 rounded-full bg-foreground' />
<span className='size-2.5 rounded-full bg-foreground' />
</motion.span>
</motion.span>
</motion.button>
);
}Give the assistant mascot in the empty chat an idle animation: a breathing scale from 1 to 1.03 over 3.2s with ease-in-out, a quick blink (eyes scaleY to 0.1 for about 150ms) every 4.5s, and an antenna that sways ±7°. On hover or focus, hop it up 14px with a spring and show a "Hi!" bubble. Pause the loops while off screen and when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Idle animation?
Idle animations come from video games, where a character shifts its weight or looks around while you are away from the controls. In an interface they give a mascot, an assistant avatar, or an empty state a little life: a slow breathing scale, an occasional blink, an antenna that sways.
Keep the motion small and slow, around 3% scale over 3 seconds, with blinks spaced several seconds apart. Then react when someone arrives: a hop, a wave, or a new expression on hover or focus rewards attention and shows the element is interactive.
Idle loops run while people are reading, so animate only transform and opacity, pause them when the element is off screen, and stop them under prefers-reduced-motion. Give one element an idle loop at a time; several competing for attention feel restless.
Often confused with
- Micro-interaction
- A micro-interaction responds to something the user does. An idle animation plays on its own while nothing is happening.
Related terms
All termsMicro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Empty state
What a screen shows when there is nothing in it yet: a short message, often a simple illustration, and one clear action to add the first item.
Float animation
A slow up-and-down drift on a loop that makes icons, illustrations, or product shots look weightless.
Looping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.