🎮 Oldie UI Library

A modern React UI component library for creating authentic retro computer interfaces with Windows 95, Mac OS 8 themes, CRT effects, and vaporwave aesthetics.

✨ Features

• 🖥️ Multiple Retro Themes: Windows 95 and Mac OS 8 authentic styling
• 🎨 Styled Components: Modern CSS-in-JS with theme support
• 📺 CRT Effects: Scanlines, phosphor glow, screen curvature, and flicker
• 🌊 Vaporwave Aesthetics: Animated retro grids and cyberpunk effects
• 🎯 TypeScript Support: Full type definitions included
• ♿ Accessible: Respects prefers-reduced-motion settings
• 🚀 SSR Compatible: Works with Next.js and Gatsby
• 📦 Tree-shakeable: Only bundle what you use

📦 Installation

npm install oldie-ui styled-components

Or with yarn:

yarn add oldie-ui styled-components

🚀 Quick Start

import React from 'react';
import {
  RetroThemeProvider,
  GlobalStyles,
  windows95Theme,
  Button,
  Window,
} from 'oldie-ui';

function App() {
  return (
    <RetroThemeProvider initialTheme={windows95Theme}>
      <GlobalStyles />
      <Window title="My Application">
        <h1>Hello Retro World!</h1>
        <Button>Click Me</Button>
      </Window>
    </RetroThemeProvider>
  );
}

export default App;

🎨 Themes

Windows 95 Theme

import { windows95Theme } from 'oldie-ui';

<RetroThemeProvider initialTheme={windows95Theme}>
  {/* Your app */}
</RetroThemeProvider>

Mac OS 8 Theme

import { macOS8Theme } from 'oldie-ui';

<RetroThemeProvider initialTheme={macOS8Theme}>
  {/* Your app */}
</RetroThemeProvider>

Dynamic Theme Switching

import { useRetroTheme } from 'oldie-ui';

function ThemeSwitcher() {
  const { theme, setTheme } = useRetroTheme();
  
  return (
    <Button onClick={() => setTheme(theme.name === 'Windows 95' ? macOS8Theme : windows95Theme)}>
      Switch Theme
    </Button>
  );
}

🧩 Components

Basic Controls

import { Button, Input, Textarea, Separator } from 'oldie-ui';

// Buttons
<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button disabled>Disabled</Button>

// Inputs
<Input type="text" placeholder="Enter text" />
<Textarea rows={4} />

// Separator
<Separator />

Window

import { Window } from 'oldie-ui';

<Window 
  title="My Window" 
  onClose={() => console.log('Closed')}
  width="400px"
  height="300px"
>
  <p>Window content here</p>
</Window>

Modal

import { Modal } from 'oldie-ui';

const [isOpen, setIsOpen] = useState(false);

<Modal
  title="Confirm"
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onOk={() => handleConfirm()}
  okText="Yes"
  cancelText="No"
>
  <p>Are you sure?</p>
</Modal>

📺 Effects

CRT Effect

Add authentic CRT monitor simulation with scanlines, glow, and more:

import { CRTEffect } from 'oldie-ui';

<CRTEffect
  enableScanlines={true}
  enableGlow={true}
  enableFlicker={false}
  enableCurvature={false}
  scanlineOpacity={0.25}
  glowIntensity={50}
>
  {/* Your content */}
</CRTEffect>

Props:

• enableScanlines: Show horizontal scanlines (default: true)
• enableGlow: Add phosphor glow effect (default: true)
• enableFlicker: Add subtle screen flicker (default: false)
• enableCurvature: Add screen curvature (default: false)
• scanlineOpacity: Opacity of scanlines 0-1 (default: 0.25)
• glowIntensity: Intensity of glow in pixels (default: 50)
• flickerIntensity: Speed of flicker animation (default: 0.15)

Retro Grid

Create vaporwave-style animated grids:

import { RetroGrid } from 'oldie-ui';

<div style={{ position: 'relative', height: '100vh' }}>
  <RetroGrid
    gridColor="#ff00ff"
    gridOpacity={0.3}
    cellSize={50}
    speed={10}
    angle={65}
  />
  {/* Your content */}
</div>

Props:

• angle: Perspective angle in degrees (default: 65)
• gridColor: Color of grid lines (default: #00ffff)
• gridOpacity: Opacity of grid 0-1 (default: 0.3)
• cellSize: Size of grid cells in pixels (default: 50)
• speed: Animation speed in seconds (default: 10)

🎯 Advanced Usage

Combining Effects

<CRTEffect enableScanlines enableGlow>
  <div style={{ position: 'relative', minHeight: '100vh' }}>
    <RetroGrid gridColor="#ff00ff" />
    
    <div style={{ position: 'relative', zIndex: 10, padding: '40px' }}>
      <Window title="Terminal">
        <div style={{ background: '#000', color: '#00ff00', fontFamily: 'monospace' }}>
          C:\&gt; _
        </div>
      </Window>
    </div>
  </div>
</CRTEffect>

Custom Theme

import { RetroTheme } from 'oldie-ui';

const customTheme: RetroTheme = {
  name: 'Custom',
  colors: {
    windowBackground: '#C0C0C0',
    buttonFace: '#C0C0C0',
    // ... other colors
  },
  fonts: {
    primary: 'Arial, sans-serif',
    size: {
      small: '11px',
      normal: '12px',
      large: '14px',
    },
  },
  // ... spacing and borders
};

<RetroThemeProvider initialTheme={customTheme}>
  {/* Your app */}
</RetroThemeProvider>

🌐 SSR Support

The library is compatible with server-side rendering. Effects that rely on browser APIs automatically handle SSR environments:

// Next.js example
import dynamic from 'next/dynamic';

const CRTEffect = dynamic(
  () => import('oldie-ui').then(mod => mod.CRTEffect),
  { ssr: false }
);

♿ Accessibility

The library respects user preferences for reduced motion. When prefers-reduced-motion is enabled:

• CRT flicker is automatically disabled
• Animations are toned down or removed

🎨 Storybook

To view all components in Storybook:

npm run storybook

📝 License

MIT © 2025

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🙏 Acknowledgments

• Inspired by Windows 95 UI Guidelines
• Apple Human Interface Guidelines
• React95 library
• vault66-crt-effect

🔗 Links

• Documentation
• GitHub Repository
• NPM Package
• Storybook Demo