amicro
uiapple-breathesource: stale · stale
Apple Breathe
Apple Breathe loading animation.
npx shadcn add "https://amicro.vercel.app/r/apple-breathe.json"free
This source snapshot is older than our freshness window and couldn't be re-verified just now — it may be outdated.
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationframer-motion
Files1 · source cached 10/8/2026, 5:32:18 AM
registry/ui/loading/apple-breathe.tsx
import React from 'react';
import { motion } from 'framer-motion';
export const AppleBreathe = () => {
return (
<div className="relative flex items-center justify-center w-12 h-12">
{[0, 60, 120, 180, 240, 300].map((angle, idx) => {
// Alternating color teal-blue palette
const bgClass = idx % 2 === 0
? 'bg-teal-400/35 dark:bg-teal-400/40'
: 'bg-cyan-400/35 dark:bg-cyan-400/40';
return (
<motion.div
key={angle}
className={`absolute w-3.5 h-3.5 rounded-full ${bgClass}`}
style={{ transformOrigin: 'center' }}
animate={{
scale: [1, 1.75, 1],
x: [0, Math.cos(angle * Math.PI / 180) * 11, 0],
y: [0, Math.sin(angle * Math.PI / 180) * 11, 0]
}}
transition={{
duration: 3.6,
repeat: Infinity,
ease: "easeInOut"
}}
/>
);
})}
</div>
);
};