---
title: "PipBoy — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Navigation. pipboy component · framer fallout UI · framer CRT terminal · framer gaming component · framer retro UI · framer terminal widget · framer…"
canonical: "https://framer.elliotli.dev/component/pipboy"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/PipBoy

# PipBoy

Fallout inspired retro terminal widget

[View on Framer](https://framer.com/marketplace/components/pipboy/?via=elliot-li)

![PipBoy preview image 1](https://framer.elliotli.dev/og/component/pipboy/7b25cc3293fdb011/1600x1200.jpg)

## Summary

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

## Description

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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mwbgahe6-y8YgmZv1VIh0QkWfUB7Nq0eVDoaIa9)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mwbgahe6-fCYs2Drqnnj59pFzAhh3X4CnAJQBuO)

## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #5367

## Details

- **Author**: Hamim Reza
- **Published**: 2026-04-17
- **Updated**: 2026-04-17
- **Added**: 2026-04-05
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation