Threshold

Inspiration

Modern web design usually assumes one kind of vision: sharp, colorful, and high-contrast. But millions of people experience the web through blur, grain, reduced contrast, tunnel vision, or visual noise. We wanted to build something that makes this invisible experience visible, while showing that accessibility can also be beautiful, immersive, and intentional. THRESHOLD was inspired by low-vision research and the idea of creating empathy through interaction.

What it does

THRESHOLD is a dual-perception web experience with two visual modes: Chromo, a full-color editorial interface, and Veil, a low-vision-inspired mode with grayscale visuals, grain overlay, high contrast, larger text, reduced motion, audio cues, and a custom white cane cursor. Users switch between the two through an interactive sunglasses toggle, letting them “step across” into another way of seeing the same digital world.

How we built it

We built THRESHOLD with React + Vite, styled it using Tailwind CSS and CSS custom properties, and used a shared mode system to power both visual worlds. We created the grain effect with SVG feTurbulence, added animations with Framer Motion, and used Howler.js for audio feedback like navigation sounds and mode transitions. We also designed the structure so future challenge-based simulations can be added easily.

Challenges we ran into

One major challenge was balancing accessibility, aesthetics, and respect. We did not want the project to feel clinical or like a simple accessibility setting. Another challenge was translating low-vision research into an experience that felt realistic, usable, and emotionally meaningful within a short build timeline. Designing subtle but effective audio and visual cues was also difficult.

Accomplishments that we're proud of

We are proud that THRESHOLD feels like a complete concept rather than just a prototype. The sunglasses toggle, Veil Mode transformation, cane cursor, and surface-based audio system all come together to create a memorable experience. We are also proud that accessibility is treated as the core of the design, not as an afterthought.

What we learned

We learned that accessibility can drive creativity, not limit it. Designing for different ways of perceiving the world opened up new ideas in sound, typography, motion, and interaction. We also learned that immersive experiences can build empathy much more effectively than simply presenting statistics or explanations.

What's next for Threshold

Next, we want to expand THRESHOLD into a more interactive platform by building challenge-based simulations of everyday low-vision scenarios, such as taking a bus, reading code, or navigating home. We also want to explore more personalized visual modes inspired by different vision conditions, making THRESHOLD both a design experiment and a tool for accessibility education.

Built With

• css3
• html
• javascript
• particle
• python
• touchdesgin