← Gyrum Canon

Assets

Every brand mark, illustration, and motion specimen the fleet ships.

Logo marks (full + favicon), the conveyor scene, station illustrations, the CSS-only loading spinner, and the hand-drawn pipeline conveyor animation — every brand asset in one browsable catalogue. Sister-shape to /tokens and /components; this is the rendered specimens layer for raster + vector assets the design system ships rather than generates from code.

Logo — full mark

brand/logo.svg · nano-banana → Replicate vectorize · orange G-ring

Gyrum logo at 160px 160px
Gyrum logo at 96px 96px
Gyrum logo at 48px 48px
Gyrum logo at 24px 24px

Logo — favicon mark

brand/logo-mark.svg · optimised for tiny sizes (16–32px)

Gyrum favicon mark at 64px 64px
Gyrum favicon mark at 32px 32px
Gyrum favicon mark at 16px 16px

Conveyor scene

brand/conveyor-scene_web.jpg · nano-banana factory illustration for the home-page pipeline visual

Gyrum conveyor factory scene

Spinner — AI call stages

@gyrum-labs/components/spinner · canon G-ring loading indicator (CSS-only). Three stages map to a streaming model call: thinking (slow spin), streaming (fast spin + pulse), done (one-shot back-out bounce). On canon the keyframes are inlined directly into the page so the specimens render without the Lit component — same visual contract, no JS dependency.

80px · thinking
80px · streaming
48px · thinking
24px · streaming

Pipeline conveyor v1 — hand-drawn SVG + CSS

PipelineConveyor.svelte · pure CSS keyframes, no JS, no dependencies. A package travels along a moving belt and gains a sticker at every station: paper → discovery → blueprint → build → review → launch. Inlined into canon as raw SVG + scoped CSS — works in a static HTML page exactly the way it works in the Svelte component.

🔍Discovery📐Blueprint⚙️Build⭐Review🚀Launch🔍⚙️⭐⭐⭐✨✨

Pipeline conveyor v2 — nano-banana + GSAP

PipelineConveyorV2.svelte · five station illustrations driven by a GSAP timeline; the package collects stickers then turns into the gift box. Lives in ai-frontend because canon's static-site pipeline doesn't host Svelte components — canon catalogues, factory hosts the live demo.

See live demo on factory.gyrum.ai →

Station illustrations

brand/stations/*.jpg · nano-banana generated, cartoony flat-vector style. Used by Pipeline Conveyor v2 above and by various marketing surfaces.

Paper station illustration paper
Magnifier station illustration magnifier
Blueprint station illustration blueprint
Gears station illustration gears
Personas station illustration personas
Rocket station illustration rocket
Giftbox station illustration giftbox