Skip to content

Adjust floating letters positioning and skill pill border styling#7

Open
becktothefuture wants to merge 1 commit into
mainfrom
claude/fix-pill-hero-spacing-gMyya
Open

Adjust floating letters positioning and skill pill border styling#7
becktothefuture wants to merge 1 commit into
mainfrom
claude/fix-pill-hero-spacing-gMyya

Conversation

@becktothefuture
Copy link
Copy Markdown
Owner

Summary

This PR updates the floating letters animation positioning and improves the visual styling of skill pills in the UI.

Key Changes

  • Floating Letters Positioning: Adjusted anchor points and offset values for all three text lines ("explain-it", "like-im", "five") across both desktop and mobile breakpoints to better center and position the animated letters
  • Letter Offsets: Scaled down horizontal offset values for individual letters by approximately 20% to achieve tighter, more centered letter spacing
  • Skill Pill Border: Enhanced the border styling of skill pills by increasing thickness from 1px to 1.5px and adjusting the color mix to use a higher percentage of magnet-violet (56% instead of 26%) for better visual prominence
  • Character Encoding: Normalized the ellipsis character representation from escaped Unicode (\u2026) to the actual character () for improved readability

Files Modified

  • src/authoring/floating-letters-authoring-snapshot.json: Updated positioning data for both desktop and mobile layouts
  • src/generated/floatingLettersBuildSnapshot.js: Synchronized generated snapshot with authoring changes
  • src/styles.css: Enhanced skill pill border styling

https://claude.ai/code/session_011632bvvZ9FbrugSXt8KC14

- Strengthen the purple skill pill border from 26% to 56% violet,
  and bump to 1.5px, so the outline is clearly visible
- Reduce hero canvas letter offsetX values by 20% (multiply by 0.8)
  and shift each line's anchorX right by half the span reduction
  to keep lines visually centered on both desktop and mobile

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