Essentia UI

Cada píxel de tu interfaz, en la GPU.

Stacking: una lente que se arrastra sobre paneles con texto.

Una pantalla de app: lista, barra de navegación y tab bar de vidrio sobre contenido que scrollea.

Un video como textura de la escena, que el vidrio captura y refracta.

Flex y Box, con Yoga, sobre vidrio.

GlassButton y Card, con variantes, hover, press y teclado.

Los presets de Glass, uno al lado del otro, sobre el mismo fondo en movimiento.

Un Glass que se arrastra sobre un video, con todos sus parámetros a mano.

Legibilidad del texto MSDF sobre vidrio, con un fondo cargado.

Un input real para la edición, dibujado en el canvas.

Layout y componentes listos para usar, como botones, tarjetas y campos de texto, armados con las primitivas de abajo.

<Card width={380} height={240}>
  <GlassButton label="Continuar" onclick={go} />
</Card>

Las primitivas visuales: vidrio, rectángulos, imágenes, video y texto. Cada efecto vive en un shader.

<Glass preset="frosted" width={320} height={120}>
  <Text text="Hola" anchorX={0.5} anchorY={0.5} />
</Glass>

El runtime: monta el canvas, la cámara 1:1 y la captura de fondo, y redibuja solo cuando algo cambia.

<EssentiaRoot background="#ffffff">
  <!-- todo lo que se dibuja va acá -->
</EssentiaRoot>

Essentia se hace en abierto. Si te sirve, una donación ayuda a seguir construyéndolo.