Tired of boilerplate code and endless configuration files? Same here.
I built this demo specifically to showcase how straightforward the implementation of "The Google AI Ecosystem" can be. No hidden dependencies, no complex setup—just clean code that does exactly what it says on the tin.
It’s genuinely effortless to incorporate into your existing projects. Simplicity was the main feature here.
<!-- INICIO DEL WIDGET GOOGLE AI - COPIA DESDE AQUÍ -->
<div id="google-orbit-widget" style="width: 100%; height: 1000px; position: relative; overflow: hidden; background-color: #000000; font-family: 'Inter', sans-serif; border-radius: 12px; margin: 0 auto;">
<!-- Fuentes y Librerías necesarias (Solo cargan iconos y fuentes) -->
<script src="https://unpkg.com/lucide@latest"></script>
<link href="https://fonts.googleapis.com/css2?family=Product+Sans:wght@400;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
<style>
/* Estilos encapsulados para no afectar tu web */
#google-orbit-widget * { box-sizing: border-box; }
#google-orbit-widget .solar-system {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Estrellas de fondo */
#google-orbit-widget .stars-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.5;
z-index: 1;
}
/* El Sol Central */
#google-orbit-widget .sun {
position: absolute;
z-index: 20;
width: 120px;
height: 120px;
background: radial-gradient(circle at 30% 30%, #4285F4, #34A853, #FBBC05, #EA4335);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 50px rgba(66, 133, 244, 0.4);
font-family: 'Product Sans', sans-serif;
font-weight: bold;
font-size: 1.3rem;
text-align: center;
color: white;
cursor: pointer;
transition: transform 0.3s ease;
user-select: none;
}
#google-orbit-widget .sun:hover { transform: scale(1.05); }
/* Órbitas */
#google-orbit-widget .orbit {
position: absolute;
/* Quitamos el borde sólido simple y usamos un borde más sutil o nada,
ya que el zig-zag hace que los items se salgan de la línea */
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: 50%;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
#google-orbit-widget .orbit-inner {
width: 350px;
height: 350px;
animation: widget-rotateRight 50s linear infinite;
z-index: 10;
}
#google-orbit-widget .orbit-outer {
width: 750px;
height: 750px;
max-width: 90vw;
max-height: 90vw;
animation: widget-rotateLeft 120s linear infinite;
z-index: 5;
}
/* Planetas (Iconos) */
#google-orbit-widget .planet {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, filter 0.3s ease;
pointer-events: auto;
}
#google-orbit-widget .planet-icon {
width: 40px;
height: 40px;
background: rgba(30, 30, 30, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
color: #ddd;
}
/* Efecto Hover Individual (Solo resalta el planeta, no para la órbita) */
#google-orbit-widget .planet:hover .planet-icon {
background: #fff;
color: #000;
transform: scale(1.3);
border-color: #4285F4;
box-shadow: 0 0 20px rgba(66, 133, 244, 0.8);
z-index: 50;
}
#google-orbit-widget .planet-label {
margin-top: 8px;
font-size: 11px;
color: #ccc;
text-shadow: 0 2px 4px black;
pointer-events: none;
text-align: center;
opacity: 0.9;
max-width: 90px;
display: block;
line-height: 1.2;
}
/* Panel de Información */
#google-orbit-widget #widget-info-panel {
position: absolute;
bottom: 30px;
right: 30px;
width: 300px;
background: rgba(15, 15, 15, 0.95);
backdrop-filter: blur(8px);
border: 1px solid #333;
border-radius: 12px;
padding: 24px;
transform: translateY(150%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 100;
box-shadow: 0 10px 40px rgba(0,0,0,0.9);
text-align: left;
}
#google-orbit-widget #widget-info-panel.active { transform: translateY(0); }
#google-orbit-widget .panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#google-orbit-widget .panel-title { font-size: 18px; font-weight: bold; color: white; margin: 0; }
#google-orbit-widget .panel-desc { color: #ccc; font-size: 13px; line-height: 1.4; margin: 0; }
#google-orbit-widget .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #777; cursor: pointer; }
#google-orbit-widget .close-btn:hover { color: white; }
/* Animaciones de Rotación */
@keyframes widget-rotateRight { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes widget-rotateLeft { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes widget-counterRotateRight { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes widget-counterRotateLeft { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
/* Asignar contra-rotación para que los iconos siempre miren hacia arriba */
#google-orbit-widget .orbit-inner .planet { animation: widget-counterRotateRight 50s linear infinite; }
#google-orbit-widget .orbit-outer .planet { animation: widget-counterRotateLeft 120s linear infinite; }
/* Responsive Móvil */
@media (max-width: 600px) {
#google-orbit-widget .orbit-outer { width: 85vw; height: 85vw; max-width: 400px; max-height: 400px; }
#google-orbit-widget .orbit-inner { width: 45vw; height: 45vw; max-width: 220px; max-height: 220px; }
#google-orbit-widget .planet-label { display: none; }
#google-orbit-widget #widget-info-panel { width: 90%; left: 5%; right: 5%; bottom: 20px; }
#google-orbit-widget .sun { width: 90px; height: 90px; font-size: 1rem; }
}
</style>
<!-- Estrellas -->
<div class="stars-container" id="widget-stars"></div>
<div class="solar-system">
<!-- Sol -->
<div class="sun" onclick="widgetShowInfo('Google AI', 'The central hub powering the ecosystem with intelligence and innovation.')">
<span>Google AI</span>
</div>
<!-- Órbitas -->
<div class="orbit orbit-inner" id="widget-inner-orbit"></div>
<div class="orbit orbit-outer" id="widget-outer-orbit"></div>
</div>
<!-- Panel Info -->
<div id="widget-info-panel">
<button class="close-btn" onclick="widgetCloseInfo()"><i data-lucide="x" width="16"></i></button>
<div class="panel-header">
<div id="widget-panel-icon" style="color: #4285F4;"></div>
<h3 id="widget-panel-title" class="panel-title"></h3>
</div>
<p id="widget-panel-desc" class="panel-desc"></p>
</div>
<script>
(function() {
// Datos
const categories = [
{ name: "Workspace", icon: "briefcase", desc: "Productivity tools integrated with AI for documents and collaboration." },
{ name: "Data", icon: "database", desc: "Platforms for analyzing, storing, and processing massive datasets." },
{ name: "Creativity", icon: "palette", desc: "Tools designed to enhance artistic expression and media creation." },
{ name: "Devs", icon: "code-2", desc: "Resources and APIs for software engineers building the future." },
{ name: "Cloud System", icon: "cloud", desc: "Scalable infrastructure services powering applications globally." },
{ name: "Browser", icon: "globe", desc: "Web technologies and research for accessing the internet." }
];
const apps = [
{ name: "Google Photos", icon: "image", desc: "Intelligent photo storage that uses AI to organize, search, and edit your memories." },
{ name: "Lyra", icon: "audio-waveform", desc: "High-quality, low-bitrate speech codec powered by machine learning for clear audio." },
{ name: "Veo", icon: "video", desc: "Generative video model capable of creating high-quality 1080p clips from text prompts." },
{ name: "Gemini", icon: "sparkles", desc: "Multimodal AI model capable of reasoning across text, images, video, and code." },
{ name: "Sheets + AI", icon: "table-2", desc: "Smart spreadsheets that use AI to analyze data, automate tasks, and generate insights." },
{ name: "Looker Studio", icon: "bar-chart-big", desc: "Interactive tool to turn your data into informative, easy-to-read dashboards and reports." },
{ name: "Analytics", icon: "line-chart", desc: "Web analytics service that tracks and reports website traffic and user behavior patterns." },
{ name: "Workspace Suite", icon: "layout-grid", desc: "Integrated suite including Docs, Slides, and Sheets, all enhanced with collaborative AI." },
{ name: "Gmail", icon: "mail", desc: "Secure email service that uses AI to block spam and help you draft emails faster." },
{ name: "Calendar", icon: "calendar", desc: "Smart scheduling service that helps organize your daily activities and meetings." },
{ name: "Tasks", icon: "check-circle-2", desc: "Simple to-do list that helps you keep track of your daily tasks and goals." },
{ name: "Google Meet", icon: "webcam", desc: "Video communication service providing secure, high-quality meetings and calls." },
{ name: "Drive", icon: "hard-drive", desc: "Cloud file storage and synchronization service to store and access files anywhere." },
{ name: "Search (SGE)", icon: "search-check", desc: "Supercharged search experience that uses AI to summarize answers and provide insights." },
{ name: "Google Lens", icon: "scan-eye", desc: "Image recognition technology that lets you search what you see and translate text instantly." },
{ name: "NotebookLM", icon: "notebook-text", desc: "AI-powered research assistant that grounds its answers specifically in your own documents." },
{ name: "Firebase", icon: "flame", desc: "Platform for developing web and mobile applications with backend services." },
{ name: "BigQuery", icon: "database-zap", desc: "Serverless, highly scalable, and cost-effective multi-cloud data warehouse." },
{ name: "Vertex AI", icon: "cpu", desc: "Unified platform for building, deploying, and scaling machine learning models." },
{ name: "Gemma", icon: "diamond", desc: "Family of lightweight, state-of-the-art open models built from Gemini research." },
{ name: "Dev Community", icon: "users", desc: "Global network and resources for developers building with Google technologies." },
{ name: "AI Studio", icon: "monitor-play", desc: "Web-based prototyping environment for developers to experiment with Gemini models." },
{ name: "TensorFlow", icon: "boxes", desc: "End-to-end open-source platform for machine learning and artificial intelligence." }
];
// Funciones Globales para el Widget
window.widgetShowInfo = function(title, desc, iconName = 'info') {
const panel = document.getElementById('widget-info-panel');
document.getElementById('widget-panel-title').innerText = title;
document.getElementById('widget-panel-desc').innerText = desc;
const iconContainer = document.getElementById('widget-panel-icon');
iconContainer.innerHTML = `<i data-lucide="${iconName}" width="24"></i>`;
if(window.lucide) lucide.createIcons();
panel.classList.add('active');
}
window.widgetCloseInfo = function() {
document.getElementById('widget-info-panel').classList.remove('active');
}
// Nueva función con soporte Zig-Zag
function distributeElements(containerId, items, isZigZag = false) {
const container = document.getElementById(containerId);
const total = items.length;
const step = (2 * Math.PI) / total;
items.forEach((item, index) => {
const angle = step * index;
// Lógica Zig-Zag:
// Si isZigZag está activado, alternamos el radio.
// Los pares van al borde (50%), los impares un poco más adentro (42%)
let radius = 50;
if (isZigZag && index % 2 !== 0) {
radius = 42;
}
const x = 50 + radius * Math.cos(angle);
const y = 50 + radius * Math.sin(angle);
const el = document.createElement('div');
el.className = 'planet';
el.style.left = `calc(${x}% - 20px)`;
el.style.top = `calc(${y}% - 20px)`;
el.innerHTML = `
<div class="planet-icon">
<i data-lucide="${item.icon}" width="18" height="18"></i>
</div>
<div class="planet-label">${item.name}</div>
`;
el.onclick = (e) => {
e.stopPropagation();
widgetShowInfo(item.name, item.desc, item.icon);
};
container.appendChild(el);
});
}
// Inicializar
setTimeout(() => {
distributeElements('widget-inner-orbit', categories, false);
distributeElements('widget-outer-orbit', apps, true); // ZigZag activado para el exterior
const starsContainer = document.getElementById('widget-stars');
for(let i=0; i<80; i++) {
const star = document.createElement('div');
star.style.position = 'absolute';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
const size = Math.random() * 2;
star.style.width = size + 'px';
star.style.height = size + 'px';
star.style.backgroundColor = 'white';
star.style.borderRadius = '50%';
star.style.opacity = Math.random() * 0.8;
starsContainer.appendChild(star);
}
if(window.lucide) lucide.createIcons();
}, 500);
})();
</script>
</div>
<!-- FIN DEL WIDGET GOOGLE AI -->