Skip to main content

​
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

npx rareui@latest add retro-pixel-button
Or copy the component source manually into components/rareui/retro-pixel-button.tsx.

​
Usage

import RetroPixelButton from '@/components/rareui/retro-pixel-button';

export default function App() {
  return (
    <RetroPixelButton onClick={() => alert('Clicked!')}>
      CLICK ME
    </RetroPixelButton>
  );
}

​
Props

​
children
React.ReactNode
default:"TRY FOR FREE"
The button label text.
​
pixelColor
string
default:"orange"
Background color of the sliding pixel block. Accepts any valid CSS color value.
​
baseColor
string
Optional CSS color value to override the button’s background. Defaults to the theme background color.
​
textColor
string
Optional CSS color value to override the label text color before hover.
​
className
string
Additional Tailwind classes applied to the motion.button element.
​
...props
React.ButtonHTMLAttributes<HTMLButtonElement>
Any standard HTML button attribute — onClick, disabled, type, etc.

​
Examples

​
Default

<RetroPixelButton>TRY FOR FREE</RetroPixelButton>

​
Custom pixel color

<RetroPixelButton pixelColor="#7c3aed">
  UPGRADE NOW
</RetroPixelButton>

​
Fully custom colors

<RetroPixelButton
  pixelColor="#16a34a"
  baseColor="#f0fdf4"
  textColor="#15803d"
>
  GET ACCESS
</RetroPixelButton>

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us