Cherry Chu

Appearance

Lyrics Card Generator v3.8.0 Release Notes ​

Release date: 2026-06-30

v3.8.0 focuses on UI motion and interaction polish, building on the v3.7.1 shared-control standardization work with a centralized motion system. Motion is applied to the editor shell, settings dialogs, preview shell, shared controls, AI panel, and app background. Exported lyric card PNG output is not intentionally changed, and this release does not introduce animated card exports.

Motion System and Editor Feel ​

  • Added lightweight motion tokens and reusable motion components for shared durations, easing curves, spring presets, panel transitions, dialog transitions, step transitions, and reduced-motion behavior.
  • Refactored the settings stepper to use direction-aware transitions: forward navigation enters from the right and exits left, while backward navigation reverses the direction.
  • Unified settings dialog, settings tab, and preview-shell entry/exit behavior, with smoother mobile preview expand/collapse handling.

Controls, AI Panel, and Background ​

  • Added restrained press, selection, toggle, option-card, and segmented-control micro-interactions while preserving keyboard behavior, focus styling, ARIA roles, and testing hooks.
  • Refactored the AI translation panel onto shared option cards, toggles, and action buttons, with unified transitions for status, reasoning, and translation output sections. Request, streaming, and cancellation semantics are unchanged.
  • Improved app-shell background transitions for theme, image, and palette mode changes without changing PaletteBackground inside exported lyric cards.

Accessibility and Export Safety ​

  • Respects prefers-reduced-motion: horizontal movement, hover movement, decorative keyframes, click sparks, and export celebration are reduced to opacity-only behavior or disabled.
  • LyricCard.tsx, LandscapeLyricCard.tsx, and PaletteBackground.tsx do not import Framer Motion.
  • The static data-export-card="true" export path remains stable, and exported PNG appearance was not intentionally changed.

Verification ​

  • npm run typecheck
  • npm run core:test
  • npm run build

Cherry Chu · Projects, notes, and working documentation.

© 2026 Qrzzzz