Poltergeist UI

Inspiration

Halloween is all about transforming the familiar into something eerie, mysterious, and unforgettable. While browsing the modern web, we noticed that most user interfaces rely on predictable, sterile design patterns. For Kiroween 2026 (Costume Contest category), we asked ourselves: What if a web interface wasn't just styled for Halloween, but actually felt haunted?

Inspired by classic paranormal phenomena, ghostly aesthetics, and tactile micro-interactions, we created Poltergeist UI—a spooky, interactive UI toolkit and theme engine designed to give any web application a supernatural makeover.

What it does

Poltergeist UI transforms standard, everyday web components into living, breathing haunted elements:

Spectral Micro-Interactions: Buttons that subtly levitate, flicker like dying candlelight, or emit ghostly trails when hovered over.
Possessed Typography & Glitches: Custom CSS shaders and text distortion effects that trigger unpredictably, mimicking paranormal interference.
Atmospheric Dark Mode: A carefully calibrated color palette combining midnight shadows, ectoplasm greens, and phantom purples while maintaining WCAG accessibility contrast standards.
Interactive Haunt Triggers: Subtle cursor-tracking shadows and ambient spatial audio cues that react to user behavior without obstructing usability.

How we built it

We engineered Poltergeist UI to be lightweight, modular, and easy to drop into existing modern web projects:

Frontend & Styling: Built using React, TypeScript, and Tailwind CSS with custom CSS variables for instant theme switching.
Physics & Animations: Powered by Framer Motion and custom spring physics to give elements an organic, floating sensation rather than rigid linear transitions.
Mathematical Easing & Levitation: To simulate natural ghostly floating and cursor repulsion without jerky movements, we modeled the vertical displacement $y(t)$ using a damped harmonic oscillator combined with a sine wave:

$$y(t) = A \sin(\omega t + \phi) + e^{-\zeta \omega_0 t} \cos(\omega_d t)$$

Where $A$ represents the maximum float amplitude, $\omega$ is the angular frequency of the drift, and $\zeta$ controls the damping ratio when a user's cursor disturbs an element.

Challenges we ran into

Balancing Spookiness with Usability: The biggest design challenge was making the UI feel "possessed" without frustrating the user. Early prototypes had buttons moving too aggressively away from the cursor, so we calibrated the repulsion radius and added a "Calm Spirits" (reduced-motion) toggle.
Animation Performance: Running multiple blur filters, drop shadows, and glitch keyframes simultaneously caused frame drops on lower-end devices. We solved this by off-loading animations to GPU-accelerated CSS properties (transform and opacity) and optimizing re-renders.
Accessibility in Dark Themes: Ensuring that eerie, low-light color schemes remained readable required strict contrast testing across all interactive states.

What we learned

Micro-interactions drive emotional engagement: Even small physics-based details—like a modal slowly materializing out of fog—completely change how users perceive an application.
Accessibility matters even in experimental design: Implementing prefers-reduced-motion support taught us how to build playful, atmospheric interfaces that remain inclusive for all users.
Rapid prototyping with Kiro: Leveraging structured spec-driven workflows allowed us to iterate quickly on complex animation states and component APIs within a tight hackathon deadline.

What's next for Poltergeist UI

NPM Package Release: Publishing Poltergeist UI as an open-source component library so developers can install it with a single command (npm install poltergeist-ui).
Browser Extension Mode: Expanding the engine into a Chrome/Firefox extension that lets users "haunt" any website on the internet with one click.
More Haunted Presets: Adding new themes such as Vampire Gothic, Retro VHS Horror, and Cursed Terminal.