Overview
Retro Pixel Button features a colored block that spring-animates from a compact icon to full-width on hover, pushing the text label across the button. A pixelated arrow SVG rotates 180° during the transition while the text briefly blurs for a subtle glitch effect.Installation
components/rareui/retro-pixel-button.tsx.
Usage
Props
React.ReactNode
default:"TRY FOR FREE"
The button label text.
string
default:"orange"
Background color of the sliding pixel block. Accepts any valid CSS color value.
string
Optional CSS color value to override the button’s background. Defaults to the theme background color.
string
Optional CSS color value to override the label text color before hover.
string
Additional Tailwind classes applied to the
motion.button element.React.ButtonHTMLAttributes<HTMLButtonElement>
Any standard HTML button attribute —
onClick, disabled, type, etc.Examples
Default
Custom pixel color
Fully custom colors
Features
Spring-driven pixel block
The colored block expands from 55px to 97% width using a Framer Motion spring (stiffness 400, damping 30).
Rotating pixel arrow
The built-in pixelated SVG arrow rotates 180° on hover with an independent spring transition.
Text morph effect
The label briefly blurs and shifts padding during the hover transition for a retro glitch look.
Monospace aesthetic
font-mono typography reinforces the pixel/retro visual identity.Customizable colors
Pixel block, button background, and text color are all independently configurable.
Tap feedback
whileTap={{ scale: 0.98 }} provides physical press confirmation on both mouse and touch.