Experience the comfort of building 2D WebGL interfaces worth sucking off to a friend.
<Script lang="ts">
import { Container, Sprite, Stage } from 'glixy';
// render loop will run only once when rotation changes
let rotation = $state(0);
</Script>
{#snippet bunny(x: number, y: number)}
<Sprite
{rotation}
anchor={{ x: 0.5, y: 0.5 }}
texture="https://pixijs.com/assets/bunny.png"
{x}
{y}
/>
{/snippet}
<button onclick={() => (rotation = Math.random() * 360)}>
Rotate!
</button>
<!-- host, hostHeight, hostWidth are passed from the parent component -->
<Stage {host} resizeTo={host} background="#1f2937" antialias={true}>
<Container x={0} y={hostHeight / 2}>
{@render bunny(hostWidth / 2, 0)}
</Container>
</Stage>😱 Avoid memory leaks
Automatically clean up resources when scene objects are destroyed.🚀 Render on demand
Glixy runs the render loop only when needed.🏎️ Illegally fast
With PixiJS@8 and Svelte@5 under the hood, Glixy offers best in class performance.🏗️ Declarative API and Component Architecture
Render complex scenes without a headache.