PipBoy

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.

Features

• 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

Property Controls

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

Technical Details

• 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

Default Settings

• 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

Use Cases

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