Skip to content

Add hover tooltip animations for solder, symmetry, profile, and pack buttons#84

Open
dompm wants to merge 4 commits into
mainfrom
claude/wizardly-newton-OCTKs
Open

Add hover tooltip animations for solder, symmetry, profile, and pack buttons#84
dompm wants to merge 4 commits into
mainfrom
claude/wizardly-newton-OCTKs

Conversation

@dompm

@dompm dompm commented May 25, 2026

Copy link
Copy Markdown
Owner

Summary

  • The symmetry mode, solder line, lamp profile editor, and pack buttons only had plain text tips, unlike the main toolbar tools which show a rich tooltip with an SVG tutorial animation. This brings them in line.
  • Added four new SVG animations to ToolTooltipAnimations.tsx, matching the existing 220×110 blue-glass style:
    • Solder — flower lead lines thickening/thinning, driven by a slider knob.
    • Symmetry — a mark drawn in one facet replicating radially across all six facets.
    • Profile — a control handle dragging in/out to reshape a lamp silhouette, mirrored across its axis.
    • Pack — scattered pieces translating + rotating into a tight packed corner on the sheet.
  • Swapped the plain .tooltip-tip spans for <ToolTooltip> on each button (solder and pack stay gated on their popover being closed).
  • ToolTooltip now only renders the <kbd> shortcut pill when a shortcut exists, so these shortcut-less buttons (and detect-all) no longer show an empty pill.
  • Added tooltipSolderName, tooltipSymmetryName, tooltipProfileName, tooltipPackName to both en and fr locales (descriptions reuse existing strings).

Test plan

  • npm run build (tsc + vite) passes cleanly
  • Hover each of the four buttons (symmetry, solder, profile, pack) and confirm the animated tooltip plays — could not drive a browser in the dev environment, so a manual hover check is recommended

https://claude.ai/code/session_014nr68gix3HY6c1HwwW95Pk


Generated by Claude Code

claude and others added 2 commits May 25, 2026 16:48
…buttons

Bring the symmetry mode, solder line, lamp profile editor, and pack
buttons in line with the toolbar tools by giving them the same rich
hover tooltip with an SVG tutorial animation instead of a plain text tip.

https://claude.ai/code/session_014nr68gix3HY6c1HwwW95Pk
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented May 31, 2026

Copy link
Copy Markdown

Deploying vitrai with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3f13912
Status: ✅  Deploy successful!
Preview URL: https://779f6e61.vitrai.pages.dev
Branch Preview URL: https://claude-wizardly-newton-octks.vitrai.pages.dev

View logs

claude added 2 commits May 31, 2026 13:36
A quadratic Bézier only reaches halfway toward its control point, so as
the lamp bulged out the handles drifted outside the silhouette. Position
them at the curve midpoint instead: B(0.5) = 0.25·P0 + 0.5·ctrl + 0.25·P2.

https://claude.ai/code/session_014nr68gix3HY6c1HwwW95Pk
Match the petal/glass color used across the other tooltip animations
instead of the green/purple/blue mix.

https://claude.ai/code/session_014nr68gix3HY6c1HwwW95Pk
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.

2 participants