Saltar al contenido

Mintsikakua / Biblioteca de diseño

Studio Inspiration.

De una buena referencia a una pieza que puedes reutilizar.

Abrir mezclador ↗

Referencia / 001

Revisada 2026-09-09
Captura de Lusion: mensaje sobre fondo claro y una escena 3D dentro de un marco oscuro.

Lusion / Un escenario para la idea.

Su presentación conecta dirección creativa, movimiento y experiencias 3D. Estudiamos la jerarquía entre mensaje y pieza visual.

Visitar la fuente ↗ (abre en otra pestaña)Captura de referencia atribuida a Lusion. No se incluye en el paquete de cliente.

Interpretación original / v1.0.0

StageUna pieza.
Un mensaje claro.

Una pieza original en un escenario separado, texto legible y una sola acción principal. Sin copiar código, marca ni modelos del estudio.

Composición
Texto y acción en una columna; arte contenido en otra.
Carácter
Fondo oscuro, acento lima, tipografía legible y espacio generoso.
Movimiento
Entrada de 500 ms. Sin bucles. Se desactiva con movimiento reducido.
Funciona para
Estudios creativos · Productos digitales · Portafolios
Cuándo elegir otra solución
Flujos de compra, emergencias o interfaces donde una pieza visual retrase la tarea principal.

Componente original

Ponlo a prueba.

Probar la capa en portada ↗

Mintsikakua / Estudio independiente

Tu siguiente gran idea.En digital.

Diseño y tecnología para darle forma a lo que imaginas. Una experiencia con identidad propia.

Hablemos de tu proyecto

01 / Ideas que toman forma

La vista “Columna móvil” prueba un contenedor estrecho. La evidencia de abajo distingue esa vista de una prueba con viewport móvil real.

Evidencia / stage-v1

Validación

Revisado

Revisión del 2026-09-09. Alcance: este componente y esta versión.

  • Escritorio y móvil

    Inspección visual en navegador a 1440, 390 y 320 px. Texto largo legible y sin desbordamiento horizontal.

  • Teclado

    La tecla Tab alcanza la acción principal con contorno visible; ver captura móvil.

  • Movimiento

    El control de animación produce animation-name: none. La regla CSS respeta prefers-reduced-motion; no se cambió la preferencia del sistema.

  • Contraste

    Pruebas numéricas: texto, texto secundario y botón superan 4.5:1 en sus fondos.

  • Reutilización real

    Paquete extraído y compilado en otro proyecto Astro, con dos instancias y textos propios; sin JavaScript ni librería de UI.

Revisión manual en el navegador de Codex; no certificación de accesibilidad. Pendientes: Safari, Firefox, zoom al 200% y mediciones de campo. Las capturas son una línea base manual, no una suite de regresión visual automática. Los cambios al componente, arte o tokens invalidan esta revisión; cada variante de cliente requiere revisión propia.

Paquete / Astro · v1.0.0

Una base para
tu siguiente cliente.

El mismo componente que estás viendo, con sus estilos aislados, tokens, imagen original y guía de integración.

  • StageHero.astro + CSS sin dependencias de UI
  • Tokens DTCG 2025.10
  • Arte original y registro de procedencia
  • Guía para adaptar marca, textos y contacto
Descargar componente ↧Solo tokens JSON ↧

Exportar no publica cambios. Cada adaptación para un cliente necesita su propia revisión.

Capa del kit / v1.0.0

CineCero JavaScript.
Se ve caro igual.

Movimiento por scroll, tipografía de cartel y transición entre páginas, en CSS nativo. Cero JavaScript: los sitios de cliente mandan script-src 'none' y esta capa pesa ~1 KB comprimido.

suave
Titular ×1 · entrada 0.9rem · lente ×1.03 · sin viñeta
cine
Titular ×1.12 · entrada 1.5rem · lente ×1.08 · viñeta 0.22
gala
Titular ×1.28 · entrada 2.25rem · lente ×1.14 · viñeta 0.34
Funciona para
Salones y estética · Fotografía y eventos · Repostería · Talleres con buenas fotos
Cuándo no
Fotos de celular con mala luz — el movimiento grande las señala. Y cualquier venta donde se prometa que esto mejora el posicionamiento: no lo hace.

Presupuesto / cine-v1

Se cobra solo

Candidato

No es una recomendación: npm run check:cine corre sobre dist/ y truena la entrega si algo se pasa.

  • 0 bytes de JavaScript

    El vhost del cliente manda script-src 'none'.

  • CSS ≤ 12 KB comprimido

    Todo el sitio junto. La capa completa son ~1 KB de esos.

  • Fotos ≤ 200 KB, todas con medidas

    Sin width/height es CLS regalado.

Safari y Firefox todavía no traen animaciones por scroll: ahí el sitio se ve completo y quieto. Enséñaselo al cliente en un Android. Todo en docs/CINE.md.