Skip to content

feat(tui): animated hog face mascot#684

Draft
lottiecoxon wants to merge 4 commits into
mainfrom
hog-face-mascot
Draft

feat(tui): animated hog face mascot#684
lottiecoxon wants to merge 4 commits into
mainfrom
hog-face-mascot

Conversation

@lottiecoxon

Copy link
Copy Markdown

What

Adds an ASCII hog face mascot for the TUI, transcribed from the design team's ASCII hog artwork, plus a playground tab to preview it.

Components (src/ui/tui/primitives/HogFace.tsx)

  • HogFace — pure primitive rendering one expression. Expressions: neutral, blink, wink (either eye), cheeky, pout, shocked (open mouth). Arm poses: none, out, left, right.
  • AnimatedHogFace — idle loop: mostly neutral with occasional blinks/winks.
  • SnoringHog — sleeping face with little z's that rise and drift.
  • TalkingHog — mouth flaps open/closed to mimic speech (pairs with dialogue text later).

Notes

  • The snout is a right-to-left character; every glyph is rendered in its own cell so the eyes never flip in bidi-aware terminals (keeps the wink on the correct eye).
  • Preview: pnpm try --playgroundHog face tab.

Status

Draft / WIP — still iterating on look and timing with the design team. Not ready for review yet.

Test plan

  • pnpm typecheck, lint clean
  • Headless render checks for every expression + animation frames
  • Visual review in-terminal across fonts

lottiecoxon and others added 2 commits June 18, 2026 15:04
Add a HogFace primitive plus animated variants — idle (blink/wink),
snoring with rising z's, and talking (mouth flap) — and a playground
tab to preview them. Expressions, arm poses and ear glyphs are
transcribed from the ASCII hog designs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Remove the temporary ear-glyph picker from the playground and the
unused `ear` prop; the default ⌒ ears are staying.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

🧙 Wizard CI

Run the Wizard CI and test your changes against wizard-workbench example apps by replying with a GitHub comment using one of the following commands:

Test all apps:

  • /wizard-ci all

Test all apps in a directory:

  • /wizard-ci basic-integration
  • /wizard-ci error-tracking-upload-source-maps
  • /wizard-ci misc
  • /wizard-ci revenue

Test an individual app:

  • /wizard-ci basic-integration/android
  • /wizard-ci basic-integration/angular
  • /wizard-ci basic-integration/astro
Show more apps
  • /wizard-ci basic-integration/django
  • /wizard-ci basic-integration/fastapi
  • /wizard-ci basic-integration/flask
  • /wizard-ci basic-integration/javascript-node
  • /wizard-ci basic-integration/javascript-web
  • /wizard-ci basic-integration/laravel
  • /wizard-ci basic-integration/next-js
  • /wizard-ci basic-integration/nuxt
  • /wizard-ci basic-integration/python
  • /wizard-ci basic-integration/rails
  • /wizard-ci basic-integration/react-native
  • /wizard-ci basic-integration/react-router
  • /wizard-ci basic-integration/sveltekit
  • /wizard-ci basic-integration/swift
  • /wizard-ci basic-integration/tanstack-router
  • /wizard-ci basic-integration/tanstack-start
  • /wizard-ci basic-integration/vue
  • /wizard-ci error-tracking-upload-source-maps/android
  • /wizard-ci error-tracking-upload-source-maps/cicd-docker-node-raw
  • /wizard-ci error-tracking-upload-source-maps/cicd-github-actions-docker-node-raw
  • /wizard-ci error-tracking-upload-source-maps/cicd-github-actions-nested-docker-node-raw
  • /wizard-ci error-tracking-upload-source-maps/cicd-github-actions-node-raw
  • /wizard-ci error-tracking-upload-source-maps/cicd-gitlab-node-raw
  • /wizard-ci error-tracking-upload-source-maps/cicd-ssh-vps-node-raw
  • /wizard-ci error-tracking-upload-source-maps/flutter
  • /wizard-ci error-tracking-upload-source-maps/ios
  • /wizard-ci error-tracking-upload-source-maps/next
  • /wizard-ci error-tracking-upload-source-maps/next-no-posthog
  • /wizard-ci error-tracking-upload-source-maps/node-raw
  • /wizard-ci error-tracking-upload-source-maps/node-rollup
  • /wizard-ci error-tracking-upload-source-maps/node-rollup-typescript-plugin
  • /wizard-ci error-tracking-upload-source-maps/node-webpack
  • /wizard-ci error-tracking-upload-source-maps/nuxt-3-6
  • /wizard-ci error-tracking-upload-source-maps/nuxt-4-3
  • /wizard-ci error-tracking-upload-source-maps/react-native
  • /wizard-ci error-tracking-upload-source-maps/react-vite
  • /wizard-ci error-tracking-upload-source-maps/rust
  • /wizard-ci misc/quack-quack
  • /wizard-ci revenue/stripe

Results will be posted here when complete.

Rework TalkingHog into a speech-like rhythm: irregular open/closed
mouth flaps interrupted by occasional short pauses (gaps between
words) and the odd blink. Talking is arms-free per design.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
DancingHog flaps the arms through out/left/right while cycling the
character through the brand shades (orange, red, yellow, purple,
teal, blue). Colour holds 2 ticks to stay under ~3 flashes/sec.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant