Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

Mascot is the personality layer of the RetroWin portfolio — a gentle nod to Clippy and the era of intrusive-but-endearing office assistants. It renders a small teal pixel-art robot in the bottom-right corner of the screen. Clicking the robot picks a random Y2K-themed quip from a fixed list and displays it in a Framer Motion–animated speech bubble for four seconds before fading out. The robot itself bounces gently on a 2-second loop to attract attention. Mascot accepts no props. It is self-contained and can be dropped anywhere in the layout tree — it always positions itself as fixed bottom-12 right-4.

​
Usage

import { Mascot } from './components/y2k/Mascot';

function App() {
  return (
    <>
      {/* other layout components */}
      <Mascot />
    </>
  );
}

​
Internal State

State variableTypeDescription
messagestringThe currently selected quip. Set to one of the five messages on click; starts as "".
visiblebooleanControls whether the speech bubble is rendered. Set to true on click and automatically reset to false after 4 000 ms via setTimeout.

​
Messages

On each click, Math.floor(Math.random() * messages.length) selects one entry from the following array:
  1. "It looks like you're writing React. Would you like help with that?"
  2. "I miss the <blink> tag."
  3. "Have you tried turning it off and on again?"
  4. "404: Joke not found."
  5. "My other computer is a Tamagotchi."

​
Animation

​
Robot bounce

The robot <img> element has the Tailwind animate-bounce class with a custom animationDuration of 2s, giving a slow, friendly bob.

​
Speech bubble

The speech bubble is a Framer Motion motion.div with the following transition: 
initial: { opacity: 0, y: 10 }
animate: { opacity: 1, y: 0 }
The bubble appears from slightly below its final position and fades in. It disappears when visible is set back to false (the element is removed from the DOM conditionally with {visible && <motion.div ...>}). The bubble is styled as a white rounded box (rounded-xl rounded-br-none) with a 2 px black border, a drop shadow, and pixel font text at text-xs, sized at a maximum of 150 px wide.
The Mascot is positioned with z-[55] — above the desktop content and DesktopIcon elements, but below the Taskbar (z-[60]) and CRTOverlay (z-[100]). The speech bubble will appear behind the taskbar if the mascot is placed at the very bottom of a tall viewport.
Because the message is chosen with Math.random(), the same message can appear twice in a row. If you want to guarantee variety, maintain the previous index in state and re-roll if the same index is selected.

Build docs developers (and LLMs) love

Get started for freeTalk to us