Baktiyar Ablaikhan

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).