Skip to content

Better Design v1.6.0 — interaction kit, motion probe, and default style

Choose a tag to compare

View all tags
@Moddingflow Moddingflow released this 20 Oct 14:03
v1.6.0
f3efaba
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Better Design 1.6.0

Controls that answer the finger, a premium default style for projects without a brief, measured layout geometry, and an optional pool of signature effects. This release also publishes 1.2.0–1.5.0, which were not released separately.

Six frames of one button press from the interaction kit

What changed

  • Interaction kit (assets/motion/): every created or redesigned UI adopts framework-free CSS/JS before building components. A three-layer press (size-aware compression with a fill step, a bloom from the touch point, a spring release with ~1% overshoot), a 90 ms minimum press, keyboard press, hover, a growing focus ring, switches, checkboxes, sliding segmented indicators, pending/done/error buttons, icon swaps, popovers that grow from their trigger, and animated disclosures.
  • Motion probe (scripts/motion_probe.mjs): a dependency-free Node.js 22+ check that drives headless Chrome, Chromium, or Edge, presses, hovers, and focuses every control, and fails pages without press feedback or visible focus. It warns on 1–2 px presses, instant returns, and transition: all. A zero-error run is now part of acceptance.
  • Default style (references/house-style.md): with no visual brief and nothing to inherit, a premium ultra-minimal style — black canvas, Geologica, two grays, one blue. Ships with a DESIGN.md preset, a reference page, and a palette whose 44 contrast pairs pass the validator. Any visual cue from the user replaces it.
  • Optional effects pool (references/effects-library.md): live and baked ordered dither, a dot language (dot fields, dotted globe, dot-matrix text, LED status icons), structural marks, and scroll scenes, each with budgets, fallbacks, and reduced motion.
  • Layout geometry (references/layout-geometry.md, scripts/check_layout.py): equal gaps, shared alignment lines, ink-centered content, and containment, measured from layout dumps for the web, Unity, and Godot.
  • README in English and Russian with screenshots; CI now validates the default palette, runs the layout tests, and probes the bench pages in normal and reduced-motion mode.

Full details: CHANGELOG.md.

Upgrade

npx skills update better-design
Assets 2
Loading