Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retro-cosmic-arcade/llms.txt

Use this file to discover all available pages before exploring further.

ChromeButton is a Framer Motion–powered <button> element styled to resemble the beveled, raised buttons found in Windows 98 dialog boxes. It provides subtle hover and tap scale animations out of the box and forwards every extra prop directly to the underlying motion.button element, so the full Framer Motion animation API is available without any wrapper component.

​
Props

​
children
ReactNode
required
The button label or content. Rendered as the inner child of motion.button.
​
className
string
default:"\"\""
Additional Tailwind or custom CSS classes appended after the built-in chrome-bg font-silkscreen px-4 py-1 text-sm uppercase tracking-wider transition-transform class string.
​
...rest
motion.button props
Any prop valid on a Framer Motion motion.button element — onClick, disabled, animate, variants, whileHover, whileTap, aria-*, and so on. The component spreads ...rest directly onto motion.button, so built-in whileHover and whileTap values can be overridden if needed.

​
Usage

​
Basic button

import { ChromeButton } from "@/components/ChromeButton";

function LaunchPad() {
  return (
    <ChromeButton onClick={() => console.log("Launched!")}>
      LAUNCH GAME
    </ChromeButton>
  );
}

​
Custom className

Append extra classes to adjust sizing, color, or spacing while keeping the chrome style: 
<ChromeButton className="w-full text-base">
  ENTER THE ARCADE
</ChromeButton>

​
Overriding Framer Motion props

Because all extra props are spread onto motion.button, you can override the default scale values or add entirely new animation variants: 
<ChromeButton
  whileHover={{ scale: 1.1, rotate: 2 }}
  whileTap={{ scale: 0.9 }}
  animate={{ opacity: 1 }}
  initial={{ opacity: 0 }}
>
  POWER ON
</ChromeButton>

​
Built-in animation values

GestureValue
whileHoverscale: 1.05
whileTapscale: 0.95

​
Styling notes

The chrome-bg CSS class is defined in the project’s global stylesheet and applies a bevel gradient that mimics the Win98 button appearance:
  • Raised state — light top/left edges, dark bottom/right edges via box-shadow inset.
  • Active state — the inset shadow inverts to simulate a pressed-in effect (:active or Framer Motion whileTap).
  • Font — font-silkscreen renders text in the pixel-style Silkscreen typeface.
  • Text — forced uppercase with tracking-wider for that classic OS label feel.
chrome-bg is not a Tailwind utility class — it is a custom CSS class defined in the project’s global CSS file. If you move ChromeButton to a different project, you must copy or recreate the chrome-bg rule.

​
Dependencies

  • Framer Motion (motion.button, whileHover, whileTap) — must be installed as a peer dependency.
  • Silkscreen font — loaded via font-silkscreen Tailwind token.
You can use ChromeButton as a drop-in replacement for a standard <button> in any form or interactive element. The Framer Motion scale animation is GPU-accelerated via CSS transform, so it is safe to use inside list renders and modals.

Build docs developers (and LLMs) love

Get started for freeTalk to us