A Fallout-inspired Pip-Boy terminal interface with three interactive tabs, live system clock, CRT scanlines, animated radar, and keyboard inventory navigation. Metal chassis with corner screws, screen glass reflection, and boot-up animation. Built for gaming portfolios, retro-themed interfaces, and creative landing pages that need a bold interactive statement piece.
Three interactive tabs — STAT, INV and DATA
STAT tab — live system clock with blinking colon, date and hazard symbol
INV tab — customizable inventory list with keyboard arrow navigation
DATA tab — animated radar sweep with satellite search text
Live local time and date — updates every second
CRT scanlines overlay with adjustable opacity
Screen glass reflection with radial gradient
Boot-up animation on component mount
Text flicker animations for authentic CRT feel
Metal chassis with 4 corner screws at 45° increments
Chassis shadow, border effects and inner screen bezel
Hazard symbol rotation animation
Radar sweep rotation with blip pulse
EQ bar bounce audio visualizer
Tab content transitions with AnimatePresence
Keyboard navigation — arrow up/down, home/end for inventory
Auto-scroll keeps selected inventory item in view
Custom retro scrollbar — WebKit and Firefox support
Fully customizable colors, stats, text and visual effects
No dependencies
Colors
Pip-Boy green · Screen background · Chassis color · Border colors
Stats
HP current and max · AP current and max
Toggles
Hazard symbol · Radar · Audio visualizer visibility
Text
Radar search message · Custom inventory items
Inventory
Item array — name and weight per item
Visual
Scanline opacity · Glow intensity · Font size · Border radius · Padding
Framer Motion AnimatePresence for tab content transitions
useEffect clock updating every second with locale formatting
CSS keyframe animations for radar, hazard symbol and EQ bars
Keyboard event listeners with auto-scroll for inventory navigation
Custom WebKit and Firefox scrollbar styling
CRT scanlines via CSS repeating linear gradient
Static renderer detection disables animations on export
Responsive flexbox layout with any-prefer-fixed support
Intrinsic dimensions 650×500px · Courier New monospace typography
Pip-Boy green color scheme
HP 85/100 · AP 60/75
Hazard symbol, radar and audio visualizer all enabled
Scanline opacity 0.15 · Medium glow intensity
Gaming portfolios · Retro-themed interfaces · Fallout fan sites · Creative agency hero sections · Interactive statement pieces · Game developer portfolios · Sci-fi themed landing pages · Cyberpunk UI showcases
SEO Keywords
framer retro terminal · framer pipboy component · framer fallout UI · framer CRT terminal · framer gaming component · framer retro UI · framer terminal widget · framer game interface · framer scanline effect · framer retro component · framer cyberpunk UI · framer interactive terminal · framer sci-fi component · framer code component · framer vintage terminal
Hamim Reza
