Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-sys-admin/llms.txt

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

Sticker adds a tactile, physical quality to the NeonRetro Sys_Admin portfolio. It renders an inline-block element — styled with a solid colored border, a matching neon box-shadow, all-caps monospace text, and a CSS rotation — that looks like a real sticker slapped on a surface. The component is built on a Framer Motion motion.div, so it responds to hover and tap gestures with micro-animations that reinforce the physical metaphor: hovering makes it grow and tilt slightly more; tapping gives a satisfying press-down squish.

​
Implementation Details

Under the hood, Sticker uses Framer Motion’s motion.div with the following gesture props: 
initial={{ rotate: rotation }}
whileHover={{ scale: 1.1, rotate: rotation + 5 }}
whileTap={{ scale: 0.95 }}
The initial rotation is also applied via an inline style={{ transform: \rotate($deg)` }}to guarantee the correct starting angle before Framer Motion's animation engine takes over. The color variant drives theborder, shadow, text, and background` classes together — each color maps to a complete visual theme rather than a single utility.

​
Props

​
color
'magenta' | 'cyan' | 'lime' | 'white'
default:"white"
Controls the border color, neon box-shadow, text color, and background fill of the sticker. Color mappings:
  • white — border-white shadow-retro-white text-black bg-white
  • magenta — border-y2k-magenta shadow-retro-magenta text-white bg-y2k-magenta
  • cyan — border-y2k-cyan shadow-retro-cyan text-black bg-y2k-cyan
  • lime — border-y2k-lime shadow-retro-lime text-black bg-y2k-lime
​
rotation
number
default:"-5"
CSS rotation in degrees applied to the sticker. Positive values tilt clockwise; negative values tilt counter-clockwise. On hover, Framer Motion adds 5 degrees to this value for a reactive tilt effect.
​
className
string
Additional CSS classes passed through to the root motion.div. Useful for positioning or spacing overrides at the call site.
​
children
ReactNode
required
The label text rendered inside the sticker. Displayed in font-display with uppercase and tracking-wider, keeping all sticker text visually consistent regardless of what string is passed.

​
Usage

<Sticker color="magenta" rotation={12}>Chaotic Good</Sticker>
<Sticker color="cyan" rotation={-8}>100% Human</Sticker>
<Sticker color="lime" rotation={-5}>Coffee Powered</Sticker>
Each sticker is independently positioned by wrapping it in an absolutely positioned container at the call site. For example, the Home page hero positions its stickers like this: 
<div className="absolute -top-6 -right-4 md:-right-12">
  <Sticker color="magenta" rotation={12}>Chaotic Good</Sticker>
</div>
<div className="absolute -bottom-4 left-1/4">
  <Sticker color="cyan" rotation={-8}>100% Human</Sticker>
</div>

​
Where It’s Used

Stickers appear across multiple pages to inject personality into otherwise structured content:
PageLabelsColors
HomeChaotic Good, 100% Humanmagenta, cyan
AboutCoffee Powered, CSS Survivor, Will Pet Dogsmagenta, cyan, white
SkillsSpecialty tags (random from palette)white, magenta, cyan, lime
ContactHire Me Plswhite
Use small rotation values in the 3–15 degree range (positive or negative) for the most natural sticker feel. Very large angles above ±25 degrees can look forced. Mixing a few positive and a few negative rotations across a group of stickers — rather than all tilting the same way — creates a more realistic scattered-sticker aesthetic.

Build docs developers (and LLMs) love

Get started for freeTalk to us