PipBoy

pipboy component · framer fallout UI · framer CRT terminal · framer gaming component · framer retro UI · framer terminal widget · framer game interface · framer scanline effect ·…

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

Fallout inspired retro terminal widget