vibecodng.com

Free MCP betaIndex and tools live

Measured entry

uilayouts-btn-hover-left-flip

hover-effect3dmotion on file

A client-marked React button that swaps between two fixed-label layers with a leftward hover transition. It ships as a shadcn registry component with no package dependencies, but its appearance and motion rely on Tailwind utility classes and dark-mode variants.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of uilayouts-btn-hover-left-flip at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of uilayouts-btn-hover-left-flip at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of uilayouts-btn-hover-left-flip at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for uilayouts-btn-hover-left-flip
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal17.5 KB (82.9 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A tidy, dependency-free hover idea, but not a finished design-system primitive. The fixed copy, hover-only behavior, hardcoded colors, and missing explicit button type make it best treated as a small animation recipe that you customize before shipping.

Use it if

  • You need a compact hover treatment for a secondary call to action.
  • Your interface already uses Tailwind and can absorb the component's fixed color palette.
  • You are willing to adapt the hardcoded label and styling into your button API.

Skip it if

  • The action must communicate its state equally well through keyboard focus or touch.
  • You need a drop-in button that renders supplied child content without editing the source.
  • The button will sit inside forms where an explicit button type is required.
  • Your design system avoids hover-only motion or hardcoded light and dark colors.

Install

Installation record for uilayouts-btn-hover-left-flip
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add the React component file, enable the Tailwind utilities used for gradients, transforms, transitions, grouping, and dark mode, then replace the fixed label and colors. Add an explicit button type and matching focus behavior for production use.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ui-layouts/uilayouts
License
MIT
Record published
2026-08-13

Alternatives

Other published entries for the hover-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.