Repository navigation
feat(registry): add the arrow tile, focus frame and slant morph buttons - #30
Merged
Merged
Conversation
Arrow Tile Button pairs a label slab with a detached arrow tile in two variants. In tilt, the tile knocks the slab and the letters topple in a wave away from it before springing upright. In swap, the tile rolls to the front of the label while the letters lift in its wake. Both squash on press. Focus Frame Button sits inside a hairline frame that folds back into its corners on hover while the corner brackets snap shut around the button. The label rolls up to a fresh copy and a new return arrow slides in. Both are pure CSS, with a demo, docs page and tests.
A monospace label slab meets a slanted arrow tile along a diagonal seam. On hover or focus both edges are reshaped with GSAP MorphSVG, swinging the seam from / to \ like a hinge in one smooth eased stroke, while the colors trade places and a fresh arrow slides through. Reduced motion and touch keep the shapes still and only swap the colors. Includes the demo, docs page and tests.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ph buttons Posters are WebP stills taken from each clip's first frame, so the swap to video on hover lines up. The previews are re-encoded at 30fps and CRF 30 with no audio track and faststart, matching the other button previews. The clips drop from 136, 76 and 112 KB to 36, 24 and 32 KB.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds three new button components to the registry.
Arrow Tile Button (
arrow-tile-button)A label slab paired with a detached arrow tile, in two variants shown side by side in one preview:
tilt� the tile knocks the slab, which is shoved back and springs into place while the letters topple in a wave away from the tile.swap� the tile rolls to the front of the label, its arrow spinning a full turn, while the letters lift in its wake.Both squash on press. Pure CSS.
Focus Frame Button (
focus-frame-button)A lime button inside a hairline frame. On hover or focus the frame folds back into its corners and the corner brackets snap shut around the button, like a viewfinder locking focus. The label rolls up to a fresh copy and a new return arrow slides in. The closing corners double as the focus indicator. Pure CSS.
Slant Morph Button (
slant-morph-button)A monospace label and a slanted arrow tile meeting along a diagonal seam. On hover or focus both edges are genuinely reshaped with GSAP MorphSVG (no opacity crossfade), swinging the seam from
/to\like a hinge in one smooth eased stroke, while the colors trade places and a fresh arrow slides through. Depends ongsapand@gsap/react; MorphSVG ships insidegsap.Accessibility
All three are native
<button>s with the visible label as the accessible name; split, rolled or decorative copies and shapes arearia-hidden. Hover and keyboard focus trigger the same motion, andprefers-reduced-motionswitches it off (the morph button only swaps colors there and on touch).Checks
pnpm registry:buildpnpm typecheckpnpm test� 61 files, 1,040 tests, including new suites for all three buttonspnpm format:checkpnpm buildGallery media
Each button has a WebP poster (taken from the clip's first frame) and an optimized preview clip: 30fps, CRF 30, no audio, faststart. The clips are 36, 24 and 32 KB.