Icon Cloud
- Source
- Magic UI ↗
- Author
- Magic UI
- Licence
- MIT
Loading…
Logos on a rotating sphere that follows the pointer; drag or click an icon to turn it.
Code
"use client";
import { IconCloud } from "@/lab/magicui/ui/icon-cloud";
import { Fit } from "./fit";
const slugs = [
"typescript",
"javascript",
"dart",
"react",
"flutter",
"android",
"html5",
"nodedotjs",
"express",
"nextdotjs",
"prisma",
"postgresql",
"firebase",
"nginx",
"vercel",
"testinglibrary",
"jest",
"cypress",
"docker",
"git",
"jira",
"github",
"gitlab",
"androidstudio",
"figma",
];
const images = slugs.map((slug) => `https://cdn.simpleicons.org/${slug}/${slug}`);
export default function IconCloudDemo() {
return (
<Fit width={400} height={400}>
<IconCloud images={images} />
</Fit>
);
}
Prompt
Build "Icon Cloud", a 3d animation. What it does: Logos on a rotating sphere that follows the pointer; drag or click an icon to turn it. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using lucide-react. Technique: an HTML canvas, a requestAnimationFrame loop, pointer tracking. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/icon-cloud (Magic UI, MIT).