Retro Floppy

Nostalgic UI component bringing physical computing artifacts to modern web interfaces

A beautiful, interactive 3.5" floppy disk React component for retro-themed UIs

React TypeScript UI Animation Interactive
View on GitHub Live Demo
Screenshot of Retro Floppy

The Problem

Modern web applications often lack personality and visual interest. While retro computing aesthetics are popular, there's no easy way to add authentic, interactive vintage hardware elements to React applications without building complex custom components from scratch.

The Solution

Created a fully-featured React component that renders an interactive 3.5-inch floppy disk with realistic hover animations, multiple built-in themes, and extensive customization options through TypeScript-safe props and CSS custom properties.

The Results

  • Authentic metal slider animation on hover
  • Five built-in themes (Light, Dark, Neon, Retro, Pastel)
  • Fully typed with TypeScript generics
  • Accessible with ARIA labels and keyboard support
5
Themes
<8KB
Bundle
100%
TypeScript
React
Dependencies

Retro Floppy is a beautiful, interactive 3.5” floppy disk React component designed for retro-themed user interfaces. It brings the nostalgia of physical computing artifacts to modern web applications with an authentic metal slider animation.

Interactive Demo

ZIP1.44 MB
Portfolio
Demo

Hover to see the slider animation

Try hovering over the floppy disk to see the interactive metal slider animation. Click to trigger the onClick handler.

Quick Start

Install the package and import the component:

npm install retro-floppy
import { FloppyDisk } from 'retro-floppy';
import 'retro-floppy/dist/retro-floppy.css';

function App() {
  return (
    <FloppyDisk
      label={{ name: 'My App', author: 'v1.0' }}
      size="medium"
    />
  );
}

Theme Customization

Choose from built-in themes or create your own:

import { FloppyDisk, NEON_THEME, RETRO_THEME } from 'retro-floppy';

// Use a built-in theme
<FloppyDisk theme={NEON_THEME} />

// Or create a custom theme
<FloppyDisk theme={{
  diskColor: '#1a1a2e',
  slideColor: '#c0c0c0',
  labelColor: '#ffffff',
  labelBg: '#2d2d44',
}} />

Event Handling

The component supports click and hover events:

<FloppyDisk
  onClick={() => console.log('Disk clicked')}
  onDoubleClick={() => console.log('Disk opened')}
  onHover={(isHovering) => console.log('Hover:', isHovering)}
/>

Key Features

  • Interactive Design: Realistic floppy disk with sliding metal shutter animation on hover
  • Built-in Themes: Light, Dark, Neon, Retro, and Pastel themes included
  • TypeScript Support: Full type definitions with generics for type-safe props
  • Customizable: CSS custom properties and theme objects for complete control
  • Accessible: ARIA labels and keyboard navigation support
  • Multiple Sizes: Tiny, small, medium, and large size variants

Was this helpful?