Diseños gráficos
Diseño de tipografía cinética con globo
Un globo terráqueo de líneas en rotación, líneas de órbita anidadas y tipografía serif con acentos naranja óxido forman un estudio de movimiento editorial cálido sobre el alcance internacional.
Usos de la tipografía cinética
- Sistemas editoriales en movimientoCrea composiciones animadas que combinan etiquetas, geometría y ritmo.
- Conceptos de campañas globalesPresenta el alcance internacional mediante mapas simbólicos e información estructurada.
- Gráficos para emisiones de eventosCrea identidades pensadas para pantalla en lanzamientos, charlas y momentos en directo.
- Estudios de código creativoExplora el movimiento local en HTML con una composición geométrica escalable.
Aspectos destacados de la composición orbital
- Globo orbitalAnillos y meridianos en capas crean un punto focal planetario en rotación.
- Marcadores editorialesPequeñas etiquetas establecen el contexto de evento, fecha, señal y emisión.
- Contraste tipográficoLos metadatos monoespaciados se encuentran con una gran declaración en cursiva que aporta énfasis.
- Escala adaptableLa composición cuadrada se escala según el viewport sin cambiar su estructura.
La composición del globo
1 / 1Diseño de tipografía cinética con globo
El diseño de tipografía cinética con globo es un ejemplo gráfico oficial de OpenDesign construido en torno a un globo orbital y tipografía editorial. La obra visible comienza con “ANTHROPIC LABS — APR 17 · 2026” y “HOW IT WORKS”, y luego avanza hacia “27 · CHARLOTTE × VINE”, “19 · 2026” y “175 LANGUAGES HAPPENING”. Estas etiquetas dan a la composición un orden de lectura: primero el contexto, después los detalles del evento y, por último, una gran declaración visual.
El globo central usa trazados circulares anidados, líneas de latitud curvas, meridianos verticales y formas grises irregulares parecidas a continentes alrededor de un pequeño punto central naranja. La geometría se lee como un mundo simbólico, no como un mapa geográfico. Esa decisión mantiene el diseño legible como obra de movimiento y ofrece a la tipografía un centro estable alrededor del cual orbitar.
Capa de contexto
Las etiquetas superiores establecen el evento, la fecha y el encuadre “HOW IT WORKS” antes de que la mirada llegue al globo.
Capa de señal
La línea inferior, “SIGNAL · LIVE”, junto con “BROADCASTING / 0001”, da a la composición un cierre orientado a la transmisión.
Capa de declaración
“Reach every country.” tiene un tamaño mayor que los metadatos que la rodean, de modo que el mensaje buscado se convierte en el cierre visual.
Usos para señales globales
Este diseño es útil cuando una identidad visual necesita hacer tangible la escala sin recurrir a un panel de datos real. Un concepto de campaña podría adaptar el globo orbital para un anuncio internacional y conservar los metadatos superiores como índice de fecha y tema. El compromiso es deliberado: la geografía simbólica comunica alcance con rapidez, pero no comunica cobertura real ni rendimiento medido.
En una obra orientada a la emisión, las etiquetas repetidas aportan información de encuadre que puede mantenerse mientras el globo se mueve. “SIGNAL · LIVE” y “BROADCASTING / 0001” sugieren una secuencia o un estado de transmisión en el diseño visible, pero son lenguaje gráfico, no prueba de un servicio en vivo conectado. La misma estructura podría admitir una serie de escenas numeradas si ese comportamiento se implementara por separado.
Orden de lectura y escala
La composición sitúa metadatos compactos en mayúsculas cerca de los bordes y reserva la tipografía más grande para la declaración final, cerca de la parte inferior. Este contraste permite escanear un contexto de apariencia factual antes de llegar al mensaje. También implica un compromiso: las etiquetas pequeñas aportan atmósfera y secuencia, pero necesitan un tamaño de visualización suficiente para seguir siendo legibles.
Lenguaje de movimiento local
El ejemplo incluido es una obra editorial animada en HTML. Su CSS define el área principal con 100vw y la composición como un cuadrado con un ancho limitado a min(78vh, 78vw). En la práctica, esto evita que el cuadrado supere cualquiera de las dimensiones del viewport y conserva la geometría orbital. La técnica visual admite renderizado local; no establece capacidad de vídeo, audio ni datos en vivo.
Composición y movimiento
El globo se construye con varios grosores de línea y tipos de anillo: círculos exteriores de trazo continuo, arcos interiores más ligeros y una órbita discontinua que amplía el campo más allá de la esfera principal. Las curvas repetidas crean indicios de movimiento incluso en una captura fija, porque la mirada puede comparar sus intersecciones y separaciones. El coste es la densidad: añadir más anillos o etiquetas competiría con el globo central y reduciría el énfasis del punto central naranja.
La paleta se mantiene cerca del blanco roto cálido, el carbón, el gris y un único acento naranja óxido. Los colores contenidos hacen que la cursiva “country.” y el punto central funcionen como marcas de énfasis vinculadas. La tipografía aporta la jerarquía que el color no ofrece: las etiquetas en mayúsculas con mucho espaciado resultan técnicas, mientras que la gran declaración en serif cursiva introduce calidez editorial.
| Capa | Tiempo | Función en la composición |
|---|---|---|
| Tres anillos orbitales de trazo continuo | 60, 90 y 36 segundos por rotación | El segundo anillo invierte la dirección. Como los círculos de trazo continuo son simétricos por rotación, girar por sí solo no crea un marcador móvil evidente. |
| Anillo orbital discontinuo | 180 segundos por rotación | Los guiones repetidos aportan cambios de orientación visibles a lo largo de un ciclo lento. |
| Globo terráqueo de líneas | 38 segundos por rotación inversa | Los meridianos y las seis formas irregulares parecidas a continentes giran juntos dentro del globo circular. |
| Punto central naranja óxido | Pulso repetido de 2,6 segundos | Un cambio de escala y una sombra que se expande enfatizan el centro común. |
| Titular de cierre | Entrada de 1,4 segundos | La opacidad y el espaciado entre letras se estabilizan en la gran declaración final; esta entrada no se repite. |
Límites de capacidad
Este artefacto es un ejemplo de movimiento en HTML solo de diseño, con un archivo HTML suministrado y sin archivos multimedia locales. La captura verifica las etiquetas visibles, la geometría, el color, la tipografía y la composición; no verifica emisión en vivo, cobertura de idiomas, conexiones de datos, audio, exportación de vídeo ni el prompt de creación original. Por tanto, los nombres, fechas, cifras y afirmaciones que aparecen en la obra deben tratarse como material de origen ilustrativo, salvo que se verifiquen de forma independiente.
Una recreación puede conservar la lógica visual del diseño y cambiar las etiquetas y los datos para ajustarse a un brief real. Cualquier implementación futura debería definir su propio comportamiento de movimiento, fuente de contenido, tratamiento de accesibilidad y requisitos de salida, en lugar de suponer que este ejemplo los proporciona.
Cómo crear un diseño de tipografía cinética con globo en OpenDesign
Define la composición orbital
Empieza con un lienzo editorial cuadrado que se escale dentro del viewport. Coloca en el centro un globo formado por anillos anidados, líneas de latitud curvas, meridianos verticales y un pequeño punto central naranja óxido. Mantén el campo orbital más grande que el globo para que el movimiento tenga espacio y se lea bien.
Añade los datos editoriales
Usa el orden de lectura del artefacto como modelo de contenido: etiqueta de contexto superior, marcadores de evento y fecha, una declaración de idiomas a la derecha, y después el gran mensaje de cierre y la línea de señal inferior. Trata valores como “175 LANGUAGES HAPPENING” como texto ilustrativo, salvo que tu brief aporte datos verificados.
Prompt sugeridoCrea un diseño de tipografía cinética con globo como obra de movimiento en HTML local: usa un campo punteado blanco roto cálido, un globo orbital cuadrado y centrado con círculos anidados, líneas de latitud curvas, meridianos verticales, formas grises parecidas a continentes y un punto central naranja óxido. Añade los roles de composición visibles exactos: metadatos del evento arriba, etiqueta de idioma a la derecha, la declaración “Reach every country.” abajo y, en la parte inferior, “SIGNAL · LIVE” junto con un índice de emisión. Mantenlo solo como diseño, sin suponer servicios en vivo, audio, vídeo, datos externos ni comportamiento de backend.
Afina el movimiento y los límites
Anima localmente la geometría orbital para que el movimiento de las líneas apoye la tipografía en lugar de taparla. Comprueba la regla de escala cuadrada en viewports estrechos y anchos, conserva el espacio vacío alrededor del globo y verifica que las pequeñas etiquetas en mayúsculas sigan siendo legibles. Mantén cualquier interacción o comportamiento de datos propuesto claramente separado de la obra visible.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de póster editorial sobre flujos de trabajo con IA
El diseño de póster editorial sobre flujos de trabajo con IA presenta seis afirmaciones sobre los flujos de trabajo, con capítulos numerados, ejemplos concretos de prompts y acentos tipográficos color óxido sobre un fondo crema.
Diseños gráficos
Diseño de carrusel social sobre flujos de trabajo con IA
Siete tarjetas verticales utilizan encabezados chinos sobredimensionados, hábitos numerados, campos de color cambiantes y una declaración final para explicar los flujos de trabajo de edición con IA.
Diseños gráficos
Diseño de shader Aurora Field
Un campo de ruido azul verdoso animado automáticamente aporta atmósfera a un hero WebGL, mientras un titular fijo y una pequeña insignia local de frecuencia de fotogramas anclan la escena.
Diseños gráficos
Diseño de shader Aurora Veil
Aurora Veil es una composición de shader interactiva que convierte la luz en capas, las estrellas y el movimiento del cursor en un hero atmosférico de WebGL.
Diseños gráficos