Visão geral

Esfera 3D interativa via canvas. O cursor controla a velocidade de rotação e arrastar rotaciona manualmente. Instalado via Magic UI registry.

Preview interativo

16 símbolos — 8 marcas do ecossistema MASI nas cores de marca e 8 ícones do design system. Arraste para rotacionar.

Import do componente base

import { IconCloud } from "@/components/ui/icon-cloud"

Import do wrapper de marca

import { IconCloudBrand } from "@/components/magicui/icon-cloud-brand"

Origem

Instalado via Magic UI registry usando npx shadcn@latest add "https://magicui.design/r/icon-cloud". O componente é auto-contido — implementação canvas-based sem dependências externas adicionais. O arquivo reside em src/components/ui/icon-cloud.tsx.

Ecossistema de marcas MASI

Quatro variantes usando os símbolos das marcas disponíveis no projeto. As variantes "with icons" combinam os 8 símbolos de marca com 8 ícones do design system.

Brand Colors

Uma variante colorida de cada marca — 8 símbolos.

Brand Colors + Ícones

8 símbolos coloridos de marca + 8 ícones do design system — 16 itens no total.

Dark

Uma variante dark de cada marca — 8 símbolos.

Dark + Ícones

8 símbolos dark de marca + 8 ícones do design system — 16 itens no total.

Assets do ecossistema

Marcas e símbolos usados na composição. Todos os assets são SVG/PNG locais em /public/logos.

MASI

/logos/symbol/masi-symbol-[cor].png

dark

green

Academy

/logos/brands/academy/symbol/academy-symbol-[cor].png

dark

brand

Workshop

/logos/brands/workshop/symbol/workshop-symbol-[cor].png

dark

brand

Experience

/logos/brands/experience/symbol/experience-symbol-[cor].png

dark

brand

Action

/logos/brands/action/symbol/action-symbol-[cor].png

dark

brand

Aceleração

/logos/brands/aceleracao/symbol/aceleracao-symbol-[cor].png

dark

brand

Founder

/logos/brands/founder/symbol/founder-symbol-[cor].png

dark

brand

Advisor

/logos/brands/advisor/symbol/advisor-symbol-[cor].png

dark

brand

Padrão de implementação

Snippets práticos para usar o IconCloud no projeto.

Uso com wrapper de marca

import { IconCloudBrand } from "@/components/magicui/icon-cloud-brand"

<IconCloudBrand variant="brandColors" />          // brand color × 1 (8 itens)
<IconCloudBrand variant="brandColorsWithIcons" />  // brand color + ícones MN (16 itens)
<IconCloudBrand variant="dark" />                  // dark × 1 (8 itens)
<IconCloudBrand variant="darkWithIcons" />         // dark + ícones MN (16 itens)

Uso direto com imagens customizadas

import { IconCloud } from "@/components/ui/icon-cloud"

const images = [
  "/logos/symbol/masi-symbol-dark.png",
  "/logos/brands/academy/symbol/academy-symbol-brand.png",
  "/logos/brands/advisor/symbol/advisor-symbol-brand.png",
  // ...
]

<IconCloud images={images} />

Acessando o mapa de imagens diretamente

import { brandCloudImages } from "@/components/magicui/icon-cloud-brand"
import { IconCloud } from "@/components/ui/icon-cloud"

// brandCloudImages.brandColors          — brand color × 1 (8 itens)
// brandCloudImages.brandColorsWithIcons — brand color + ícones MN (16 itens)
// brandCloudImages.dark                 — dark × 1 (8 itens)
// brandCloudImages.darkWithIcons        — dark + ícones MN (16 itens)

<IconCloud images={brandCloudImages.brandColorsWithIcons} />

Props e uso

API do IconCloud disponível no projeto.

IconCloud — props principais

images

string[]

Array de URLs de imagens. Aceita caminhos locais (/public) ou URLs externas com CORS habilitado. Cada imagem é renderizada recortada em círculo.

icons

React.ReactNode[]

Array de React nodes (SVG ou JSX). Alternativa ao images para ícones SVG diretos.

IconCloudBrand — props

variant

"brandColors" | "brandColorsWithIcons" | "dark" | "darkWithIcons"

Seleciona o subconjunto de imagens do ecossistema MASI. As variantes "with icons" combinam os 8 símbolos de marca com 8 ícones do design system MN. Padrão: "brandColors".

Comportamento do canvas

Tamanho fixo

400 × 400 px

Rotação auto

Velocidade proporcional à distância do cursor

Drag

Rotação manual ao arrastar

Click em ícone

Anima para centralizar o ícone clicado

Profundidade

Opacidade e escala variam com a posição Z

Acessibilidade

Considerações para uso responsável do IconCloud em interfaces reais.

Componente decorativo

O IconCloud é primariamente visual. Evite usá-lo como o único meio de comunicar informação importante. O canvas já inclui role="img" e aria-label="Interactive 3D Icon Cloud".

Redução de movimento

O componente não implementa prefers-reduced-motion nativamente. Para contextos onde movimento pode causar desconforto, considere renderizá-lo apenas após verificar a preferência do usuário.

Ícones clicáveis

Se os ícones forem acionáveis, o canvas não oferece foco por teclado. Considere adicionar uma lista acessível de links abaixo do canvas para navegação sem mouse.

Contraste e legibilidade

Ícones com fundo transparente em canvas podem ter contraste variável. Prefira usar os símbolos na versão dark ou brand-color sobre fundos neutros do sistema.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter