Icon Cloud
Componente interativo de nuvem de ícones para exibir o símbolo da Masi Workshop e os ícones de design em composição espacial dinâmica.
Variantes do Workshop
Três variantes, só com ativos do pacote: o símbolo Workshop (brand ou dark) intercalado com os 8 ícones de design, ou só os ícones.
Brand
Símbolo Workshop na cor de marca + 8 ícones de design: 16 itens.
Dark
Símbolo Workshop escuro + 8 ícones de design: 16 itens.
Ícones
Só os 8 ícones de design, sem símbolo: 8 itens.
Assets do Workshop
Imagens usadas na composição. Todas vivem dentro do pacote, em assets/, e são importadas estaticamente (nada de URL de /public).
Símbolo Workshop · brand
assets/logos/workshop/symbol/workshop-symbol-brand.svg
Símbolo Workshop · dark
assets/logos/workshop/symbol/workshop-symbol-dark.svg
Ícone de design · Logotipo
assets/icons/design/logotipo.svg
Ícone de design · Símbolo
assets/icons/design/simbolo.svg
Ícone de design · Paleta de Cores
assets/icons/design/paleta-de-cores.svg
Ícone de design · Tipografia
assets/icons/design/tipografia.svg
Ícone de design · Ícones
assets/icons/design/icones.svg
Ícone de design · Section e Forma
assets/icons/design/section-e-forma.svg
Ícone de design · Glass
assets/icons/design/glass.svg
Ícone de design · Uso
assets/icons/design/uso.svg
Padrão de implementação
Snippets práticos para usar o IconCloud no projeto.
Uso com wrapper de marca
import { IconCloudBrand } from "@workshop/components/magicui/icon-cloud-brand"
<IconCloudBrand variant="brand" /> // símbolo brand + 8 ícones de design (16 itens)
<IconCloudBrand variant="dark" /> // símbolo dark + 8 ícones de design (16 itens)
<IconCloudBrand variant="icons" /> // só os 8 ícones de design (8 itens)Uso direto com imagens customizadas
import { IconCloud } from "@workshop/components/ui/icon-cloud"
import symbolBrand from "@workshop/assets/logos/workshop/symbol/workshop-symbol-brand.svg"
import iconLogotipo from "@workshop/assets/icons/design/logotipo.svg"
const images = [symbolBrand.src, iconLogotipo.src]
<IconCloud images={images} />Acessando o mapa de imagens diretamente
import { brandCloudImages } from "@workshop/components/magicui/icon-cloud-brand"
import { IconCloud } from "@workshop/components/ui/icon-cloud"
// brandCloudImages.brand — símbolo brand + 8 ícones de design (16 itens)
// brandCloudImages.dark — símbolo dark + 8 ícones de design (16 itens)
// brandCloudImages.icons — só os 8 ícones de design (8 itens)
<IconCloud images={brandCloudImages.brand} />Props e uso
API do IconCloud disponível no projeto.
IconCloud — props principais
images
string[]
Array de URLs de imagens. No Workshop, use o .src de imagens importadas estaticamente de assets/. 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
"brand" | "dark" | "icons"
Seleciona o conjunto de imagens do Workshop. "brand" e "dark" intercalam o símbolo Workshop com os 8 ícones de design; "icons" mostra só os ícones. Padrão: "brand".
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 o símbolo Workshop na versão dark ou brand sobre fundos neutros do sistema.
Masi Workshop Design System - Criado por Chuv Studio