Skip to content

feat(brand): add dot motif components and a brand kit page - #427

Merged
harlan-zw merged 2 commits into
mainfrom
feat/brand-motifs
Oct 5, 2026
Merged

harlan-zw merged 2 commits into
mainfrom
feat/brand-motifs

Conversation

@harlan-zw

Copy link
Copy Markdown
Collaborator

🔗 Linked issue

Related to the brand rollout. No issue.

❓ Type of change

  • 📖 Documentation
  • 🐞 Bug fix
  • 👌 Enhancement
  • ✨ New feature
  • 🧹 Chore
  • ⚠️ Breaking change

📚 Description

The new brand treats the dot as the atom: stone dots are the noise, and one rose dot is the Skill you picked. Page agents need shared primitives for it, so each page can apply the brand without porting the prototype again. This adds the motif components and a noindex /brand-kit page that shows each one in its states.

  • BrailleSpark renders seven daily counts as braille bars, with today in rose. The mapping lives in shared/braille-spark.ts as plain text, so the weekly email can print the same spark.
  • RunChip is the run command with install as the opt-in. Run is a dashed border with a hollow dot, and install is solid with a filled dot. It has a switch variant and a compact variant for list rows. SkilldInstallChip is the solid chip for the "Teach your agent skilld" promotion. Commands come from shared/skill-commands.ts, render through InstallCommand, and every copy still reports to Analytics Engine through useInstallCopy, which now accepts a reactive mode.
  • ChangeGrid draws 13 weeks of changes with bump rings. A ring appears only when two declared versions show the bump; shared/change-grid.ts never infers one otherwise.
  • TextureBrailleNames, TextureConverge, and TextureFileMinimap are client-only canvases on one useTextureCanvas lifecycle. It starts after hydration, pauses offscreen and in hidden tabs, and draws one still frame under reduced motion or a software renderer.
  • InstallCommand gains an opt-in split-name prop, so a wrapped command breaks after a slash and the Skill name carries the accent. A new --brand-dot token holds the motif rose.

🤖 AI disclosure: Harlan Agent Kit modified this description. My AI open-source policy.

The new brand treats the dot as the atom: stone dots are the noise, one
rose dot is the Skill you picked. Pages need shared primitives for it, so
page agents can apply the brand without each one porting the prototype.

- Braille spark: a pure text util in shared/ so the weekly email can print
  the same bars, plus a component with today in rose.
- Run chip: dashed run and solid install in one switch, a compact row
  variant, and a solid chip for the skilld self install. Copies still
  report to Analytics Engine through useInstallCopy.
- Change grid: 13 weeks of changes with bump rings only when two declared
  versions show the bump.
- Three canvas textures on one lifecycle composable that pauses offscreen
  and stills under reduced motion or a software renderer.
- /brand-kit shows every motif in its states and stays out of the index.
Screenshots of /brand-kit showed three defects: a wrapped run command
broke after a hyphen inside the Skill name, the spark count lost the
space before its unit, and the change note read as one run-on word to a
screen reader. The spark bars also failed the axe contrast check, so they
use the muted token now.
@harlan-zw

Copy link
Copy Markdown
Collaborator Author

Agent check, by hand in headless Chromium against a local dev server with real trending data:

  • Textures animate on a GPU-backed renderer, stop while offscreen, hold a still frame under reduced motion, and resume when it is off
  • A colour mode switch re-reads the tokens; textures repaint in the new mode
  • Run copy marches the dashes once, install copy does not; each copy posted /api/events/install (200)
  • With clipboard write and execCommand forced to fail, the chip selects exactly the command and announces it
  • Change grid: Enter, arrows, Home, hover, and click each move the note to the right change
  • /brand-kit has no horizontal scroll at 390px, renders noindex, follow, and passes the dev HTML validator

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