PhantomUI

Inspiration

Our inspiration came from the intersection of functional dashboard design and the aesthetic of supernatural investigation. We wanted to move away from sterile, corporate admin panels and create something that feels "alive" (or dead). Influenced by classic horror tropes, Phasmophobia-style investigation tools, and gothic typography, PhantomUI brings the "spirit" of Halloween into the digital workspace.

What it does

PhantomUI provides a fully functional, themed user interface for a fictional "Paranormal Investigation Agency".

• Grimoire Dashboard: Real-time visualization of spectral activity and team status with ghostly avatars.
• Report Management: A "Graveyard Table" for sorting and managing investigation cases (Hauntings, Poltergeists, etc.).
• Equipment Tracker: Monitors field gear like EMF detectors and Spirit Boxes with "Soul Progress Bars" for battery life.
• Dark Archive: A high-contrast, immersive document viewer for reading "forbidden" texts in low-light environments.
• Atmospheric Effects: Features pervasive fog animations, spectral glowing cards, and "cursed" interactive inputs that react to user behavior.

How I built it

We built PhantomUI using a modern web development stack focused on performance and interactivity:

• React: For the component-based architecture.
• TypeScript: To ensure type safety across our "spectral" data structures.
• Vite: For lightning-fast development and building.
• TailwindCSS: For rapid, utility-first styling of our custom design system tokens (e.g., text-phantom-soul, bg-phantom-void).
• Framer Motion: The engine behind our smooth page transitions, floating effects, and "ghostly" interactions.
• Simplex Noise: Used to generate the organic, flowing fog and particle systems that give the UI its atmosphere.

Challenges I ran into

• Balancing Aesthetics and Usability: It was difficult to maintain the "dark, spooky" atmosphere without sacrificing legibility. We had to carefully tune the contrast ratios (e.g., our "Green on Dark" archive mode) to ensure the app remained functional.
• Performance: Simulating fog and particle systems can be heavy on the browser. We had to optimize our particle rendering to ensure smooth 60fps animations even on lower-end devices.
• Theming Components: Creating a consistent "Ghostly" theme required overriding many standard UI patterns. We built custom components like SpectralCard and CursedInput from scratch to ensure every element fit the narrative.

Accomplishments that I'm proud of

• The "Dark Archive" Viewer: We're particularly proud of the specialized document viewer, which successfully blends an ancient tome aesthetic with a functional, high-contrast reading mode.
• Immersive Atmosphere: We successfully created a UI that feels cohesive and immersive. The combination of sound effects (conceptual), visual fog, and glowing elements makes the user feel like they are truly part of a ghost-hunting team.
• Custom Design System: We established a reusable set of "Phantom" design tokens that make it easy to extend the theme to new features.

What I learned

• The Power of Micro-interactions: We learned how small details—like a button glowing when hovered or a card floating slightly—can significantly enhance the user's immersion.
• Accessibility in Dark Mode: We gained a deeper appreciation for the challenges of high-contrast design in dark mode environments.
• Storytelling through UI: We discovered that a user interface can tell a story just as well as the content it displays. By naming our components thematically (e.g., "Graveyard Table"), we reinforced the narrative at every level.

What's next for PhantomUI

• Real-time Collaboration: Implementing WebSockets to allow multiple "investigators" to update cases and map data simultaneously.
• Mobile App: Porting the equipment tracker to a React Native mobile app for actual "field use" during costume contests or scavenger hunts.
• Audio Integration: Adding real-time ambient soundscapes that react to the "danger level" of the current page.

Built With

• css3
• framer
• html5
• react
• tailwindcss
• typescript
• vite