Skip to content

Instantly share code, notes, and snippets.

@pqoqubbw

pqoqubbw/analyzing-image-openai.tsx

Last active April 23, 2025 20:23
Show Gist options
  • Save pqoqubbw/6c559f7bd39029fe8b5f17f4f2f5e43c to your computer and use it in GitHub Desktop.
Save pqoqubbw/6c559f7bd39029fe8b5f17f4f2f5e43c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
analyzing-image-openai.tsx
// useful links:
// custom easing by Lochie (x.com/lochieaxon): https://www.easing.dev
// motion-primitives by Ibelick (x.com/Ibelick): https://motion-primitives.com/docs
// The Magic of Clip Path article by Emil Kowalski (x.com/emilkowalski_): https://emilkowal.ski/ui/the-magic-of-clip-path
// we use same transition for every element to make it look consistent
const transition: Transition = {
duration: 2.5,
// custom easing from https://www.easing.dev
ease: [0.175, 0.885, 0.32, 1],
// consistent times for identical animation in any direction
times: [0, 0.6, 0.6, 1],
// looping our animation
repeat: Infinity,
repeatType: 'mirror',
// adding a delay between repeats to avoid immediate restart
repeatDelay: 0.2,
};
const AnalyzingImage = () => {
return (
// our container
<div className="flex items-center gap-2">
{/* container for icons + divider */}
<div className="flex items-center justify-center relative isolate">
<motion.div
// we don't clip any width of our icon initially
initial={{
clipPath: 'inset(0px 0px 0px 0px)',
}}
animate={{
// our times animation to clip icon from right to left and back
clipPath: [
'inset(0px 0px 0px 0px)',
'inset(0px 24px 0px 0px)',
'inset(0px 24px 0px 0px)',
'inset(0px 0px 0px 0px)',
],
}}
transition={transition}
// we need this styles to hide the icon underneath
className="bg-white z-10"
>
<DefaultIcon className="text-[#909090]" />
</motion.div>
<motion.div
// move our divider to the right for initial state
initial={{ transform: 'translateX(10px)' }}
animate={{
// our times animation to move divider from right to left and back
transform: [
'translateX(10px)',
'translateX(-10px)',
'translateX(-10px)',
'translateX(10px)',
],
}}
transition={transition}
// added z-index to make it above `<DefaultIcon />`
className="absolute w-[3px] rounded-full bg-[#909090] h-full z-10"
/>
{/* make sure your second icon has `absolute` position to stack it underneath the first icon */}
<PixelatedIcon className="text-[#909090] absolute" />
</div>
{/* custom component from https://motion-primitives.com/docs/text-shimmer */}
<TextShimmer className="text-sm font-medium" duration={1.5}>
Analyzing image
</TextShimmer>
</div>
);
};
Raw
icons.tsx
const DefaultIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="24" fill="white" />
<path
d="M4.27209 20.7279L10.8686 14.1314C11.2646 13.7354 11.4627 13.5373 11.691 13.4632C11.8918 13.3979 12.1082 13.3979 12.309 13.4632C12.5373 13.5373 12.7354 13.7354 13.1314 14.1314L19.6839 20.6839M14 15L16.8686 12.1314C17.2646 11.7354 17.4627 11.5373 17.691 11.4632C17.8918 11.3979 18.1082 11.3979 18.309 11.4632C18.5373 11.5373 18.7354 11.7354 19.1314 12.1314L22 15M10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z"
stroke="#909090"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
const PixelatedIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="24" fill="white" />
<path
d="M6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z"
stroke="#909090"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<rect x="6" y="19" width="1" height="1" fill="#909090" />
<rect x="7" y="18" width="1" height="1" fill="#909090" />
<rect x="7" y="19" width="3" height="1" fill="#909090" />
<rect x="9" y="18" width="1" height="1" fill="#909090" />
<rect x="14" y="19" width="3" height="1" fill="#909090" />
<rect x="15" y="18" width="1" height="1" fill="#909090" />
<rect x="5" y="18" width="2" height="1" fill="#909090" />
<rect x="5" y="17" width="1" height="1" fill="#909090" />
<rect x="10" y="19" width="1" height="1" fill="#909090" />
<rect x="7" y="17" width="1" height="1" fill="#909090" />
<rect x="11" y="19" width="1" height="1" fill="#909090" />
<rect x="10" y="18" width="1" height="1" fill="#909090" />
<rect x="17" y="19" width="1" height="1" fill="#909090" />
<rect x="15" y="4" width="2" height="1" fill="#909090" />
<rect x="3" y="9" width="1" height="3" fill="#909090" />
<rect x="4" y="10" width="1" height="2" fill="#909090" />
<rect x="6" y="9" width="1" height="1" fill="#909090" />
<rect x="15" y="5" width="1" height="1" fill="#909090" />
<rect x="20" y="8" width="1" height="3" fill="#909090" />
<rect x="19" y="9" width="1" height="1" fill="#909090" />
<rect x="7" y="13" width="1" height="1" fill="#909090" />
<rect x="9" y="11" width="1" height="1" fill="#909090" />
<rect x="16" y="12" width="1" height="2" fill="#909090" />
<rect x="13" y="14" width="1" height="1" fill="#909090" />
<rect x="12" y="11" width="1" height="1" fill="#909090" />
<rect x="10" y="9" width="1" height="1" fill="#909090" />
<rect x="10" y="15" width="1" height="1" fill="#909090" />
<rect x="10" y="13" width="1" height="1" fill="#909090" />
<rect x="15" y="9" width="1" height="1" fill="#909090" />
<rect x="13" y="10" width="1" height="1" fill="#909090" />
<rect x="12" y="14" width="1" height="1" fill="#909090" />
<rect x="5" y="4" width="3" height="1" fill="#909090" />
<rect x="6" y="5" width="1" height="1" fill="#909090" />
<rect x="7" y="14" width="1" height="2" fill="#909090" />
<rect x="6" y="14" width="3" height="1" fill="#909090" />
<rect x="16" y="8" width="1" height="1" fill="#909090" />
<rect x="8" y="9" width="1" height="1" fill="#909090" />
<rect x="20" y="16" width="1" height="1" fill="#909090" />
<rect x="12" y="12" width="1" height="1" fill="#909090" />
<rect x="8" y="8" width="1" height="1" fill="#909090" />
<rect x="14" y="12" width="1" height="1" fill="#909090" />
<rect x="17" y="16" width="2" height="1" fill="#909090" />
<rect x="14" y="17" width="1" height="1" fill="#909090" />
<rect x="11" y="5" width="3" height="1" fill="#909090" />
<rect x="12" y="4" width="1" height="1" fill="#909090" />
<rect x="12" y="7" width="1" height="1" fill="#909090" />
<rect x="7" y="11" width="1" height="1" fill="#909090" />
<rect x="15" y="15" width="1" height="1" fill="#909090" />
<rect x="11" y="11" width="1" height="1" fill="#909090" />
<rect x="13" y="9" width="1" height="1" fill="#909090" />
<rect x="12" y="15" width="1" height="1" fill="#909090" />
<rect x="9" y="12" width="2" height="1" fill="#909090" />
<rect x="19" y="13" width="2" height="1" fill="#909090" />
<rect x="9" y="6" width="1" height="1" fill="#909090" />
<rect x="20" y="4" width="1" height="1" fill="#909090" />
<rect x="19" y="4" width="1" height="1" fill="#909090" />
<rect x="3" y="15" width="1" height="2" fill="#909090" />
<rect x="3" y="19" width="1" height="1" fill="#909090" />
</svg>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment