Visor

Visor audio micro-course (transcript)

Three short podcasts about “Visor”. Listen with the interactive player.

Podcast 1 — Introduction & meaning

Narrator: Visor. A word from the age of armour that has never stopped being useful — because the thing it describes, controlled visibility, is as relevant in a software interface as it ever was on a battlefield.

Narrator: A visor is a noun. In its original and most familiar sense it is the projecting part of a helmet or cap that shields or shades the eyes and face. On a knight's helmet in the fourteenth century, the visor was the hinged metal plate you could raise to show your face or lower to protect it. On a motorcycle helmet today, the visor is the transparent polycarbonate shield that keeps wind, rain, and debris away from the rider's eyes. On a baseball cap it is the stiff brim that throws shade across the face on a bright day.

Narrator: The word comes from Old French visiere, built on vis meaning face, which derives from Latin visus — sight. The same Latin root gives us vision, visible, visual, and revisit. Visor is, at its core, a face-sight word: it names the thing that mediates between your eyes and what is in front of them.

Narrator: In the fourteenth century, when visor entered English, it had an immediately practical military meaning. Visors were raised to signal surrender or friendship — to show your face was to show you were not a threat. Lowering the visor was an act of aggression or self-protection. The visor was, in that context, an interface between identity and anonymity.

Narrator: In the twenty-first century, visor has migrated into user interface design and computing as a metaphor for any panel or overlay that controls what is visible to the user. A visor component in a UI slides in from the side to present filtered content — a settings panel, a search drawer, a command palette. The metaphor works because a UI visor does exactly what a physical visor does: it manages what the user can see and focuses attention on a specific field of view.

Narrator: Visor. A word from the age of iron helmets that is perfectly at home in a React component library. The core meaning — controlled visibility — has not aged a single day.

Speaker A: I was working on a design system yesterday and needed a name for a side panel component that slides in to show detailed information without taking you to a new page. A colleague suggested calling it a visor. I had never heard that term in a UI context before.

Speaker B: It is not the most common term but it is a good one. The analogy is quite precise — a visor controls what you can see without completely changing your context. A modal takes you out of what you were doing. A visor lets you peek at additional information while still anchored to the main view. Some design systems call it a drawer, some call it a panel, and some use visor specifically for the kind that overlays without blocking the main content.

Speaker A: That is a useful distinction. So the key property of a visor component is that it is non-blocking — it does not take over the full screen.

Speaker B: Exactly. It slides in, it presents information or controls, and it can be dismissed without losing your place in the main interface. Think of it as the software equivalent of flipping up the visor on your helmet — you are still on the road, still in context, just briefly looking at something else.

Speaker A: And in the literal sense — if someone says they need to clean their visor, they mean the helmet shield?

Speaker B: Yes. On a motorcycle or a sports helmet, the visor is the transparent shield. Keeping it clean and scratch-free is critical because visibility through a scratched visor at speed is genuinely dangerous. The physical design challenge and the UI design challenge are the same: provide clear, unobstructed visibility of what matters.

Speaker A: And the sun visor in a car is the same word?

Speaker B: The same word, the same core meaning. The car sun visor is the hinged flap above the windscreen that you pull down to shade your eyes from direct sunlight. Whether it is a knight's helmet, a motorcycle, a car, or a software panel — the visor always mediates between the viewer and the environment. That is its permanent job.

Speaker B: Today we are building prompts around the word visor. In UI design, visor describes the classic slide-in panel — a side drawer that reveals without replacing. Six prompts covering UI, database, and application design.

Speaker A: Visor as the UI metaphor — focused, non-blocking, context-preserving. A precise word for AI prompts.

Speaker B: Prompt one. Build a visor component in React: a panel that slides in from the right when triggered. It has a title bar with a close button, a scrollable content area, and a semi-transparent dark overlay behind it. It should trap focus when open and close on Escape key press. Animate the slide with a CSS transition.

Speaker A: Focus trap, Escape key, overlay, animation — four accessibility and interaction requirements in one prompt. Visor names the pattern so the AI knows exactly what to build without a lengthy description.

Speaker B: Prompt two. Build a full settings visor for a dashboard app: the visor slides in from the right and contains tabs for Profile, Notifications, and Appearance. Each tab has a form with relevant fields. Changes save to localStorage on submit. The visor width is three hundred and eighty pixels on desktop and full-width on mobile.

Speaker A: Three tabs, three forms, localStorage persistence, responsive width — a complete settings system in one compact prompt. The pixel width on desktop removes any ambiguity about the visor's dimensions.

Speaker B: Prompt three. Design a PostgreSQL schema for a personal protective equipment tracking system: an equipment table with item ID, name, type, and inspection date. A workers table with worker ID, name, and department. An assignments table linking workers to equipment with assignment date and condition notes. Add a view showing all workers currently assigned a visor.

Speaker A: Visor as safety equipment in a workplace database. Three tables, a junction assignment table, and a view filtering for visor assignments. A real health-and-safety use case with a clear audit trail.

Speaker B: Prompt four. Build a command palette visor for a web application: press Control K to open a visor that slides down from the top of the screen. It contains a search input that filters a list of commands. Selecting a command closes the visor and executes the action. Show at least eight example commands in the list.

Speaker A: Control K is the keyboard shortcut developers expect. Top-sliding visor, search filter, command execution — three distinct behaviours. Eight example commands give the AI enough to demonstrate real filtering behaviour.

Speaker B: Prompt five. Build a full e-commerce product detail visor: clicking any product in a grid opens a visor from the right showing the product image, name, price, description, and an add-to-cart button. The visor does not navigate away from the grid. Add a quantity selector and a related products row at the bottom.

Speaker A: The product detail visor keeps users on the grid — a modern pattern that improves conversion by avoiding full page navigations. Image, name, price, description, cart, quantity, and related products — a complete product view spec.

Speaker B: Prompt six. Build a notification visor for a project management app: a bell icon in the top navigation opens a visor showing unread notifications grouped by project. Each notification has a title, timestamp, and a mark-as-read button. A clear-all button at the top removes all notifications. Store state in React context.

Speaker A: Grouped notifications, mark-as-read, clear-all, React context for state — a real notification centre specification. The visor pattern makes sense here because notifications are supplementary information, not a destination.

Speaker B: Six prompts. Visor is your focused-panel word — use it when the AI needs to build a slide-in view that extends the current context rather than replacing it. The metaphor is precise, the component is ubiquitous.