HerRights VR

An immersive 3D WebXR garden where women explore their legal rights & chat with an AI assistant no API key, no login. Built for IWD 2026. 🌸

Comment 2

Inspiration

Every day, women face legal situations unfair dismissal, domestic abuse, eviction, immigration issues without knowing their rights. Legal websites are written in jargon designed for lawyers, not for the everyday woman in crisis.

On International Women's Day 2026, we asked: what if knowing your rights felt empowering instead of overwhelming? What if instead of reading a wall of legal text, you could walk through your rights in an immersive 3D space and simply ask questions in plain language?

That question became HerRights VR, a Rights Garden where every woman can step inside her legal rights, explore them visually, and get answers instantly without a lawyer, without a login, and without a single rupee or dollar spent.

What it does

HerRights VR is a browser-based WebXR experience built with A-Frame. Users enter a warm, Women's Day-themed 3D garden and explore 6 glowing rights panels:

💼 Workplace Rights pay equity, harassment, discrimination, parental leave

🛡️ Safety & Protection domestic violence, restraining orders, emergency shelters

🏠 Housing & Eviction tenant rights, illegal eviction, security deposits

🌍 Immigration & Status asylum, DACA, rights regardless of immigration status

🌸 Reproductive Rights healthcare access, custody, pregnancy discrimination

⚖️ General Legal Rights due process, equal treatment, access to justice

Each panel opens a side panel with two tabs:

  • Your Rights tab 6 detailed plain-language rights cards with real resources
  • Ask HerRights AI tab a fully working chatbot that answers questions, detects emergencies and shares crisis hotlines, suggests follow-up questions, and works completely offline with zero API key required.

Works in any browser and in VR headsets via the built-in WebXR button.

How I built it

The entire experience lives in a single HTML file no npm, no build step, no dependencies to install.

  • A-Frame 1.4.2 (WebXR) the 3D garden, panel animations, lighting, floating petals, and VR headset support
  • Pure HTML/CSS/JavaScript all UI, panel logic, tab switching, and chatbot
  • Rule-based chatbot keyword matching engine with cross-topic detection, emergency handling, and contextual legal responses. No API key. No external calls. Works fully offline.
  • Google Fonts CDN Playfair Display + DM Sans for a warm, editorial aesthetic
  • Netlify instant drag-and-drop deployment with automatic HTTPS

The 6 rights panels are arranged in a circle at radius 7 units optimized for comfortable viewing in both desktop browsers and VR headsets. The chatbot uses layered keyword matching: greetings, emergencies, action requests, specific rights content, and cross-topic detection.

Challenges I ran into

  • Building a chatbot without an API key I had to design a rule-based system smart enough to feel responsive and helpful across 6 different legal topics without any AI model behind it.

  • A-Frame text rendering 3D text in WebXR behaves differently from HTML text. Getting readable, well-positioned text on each panel required careful tuning of width, position, and font settings.

  • Balancing 3D immersion with usability the side panel UI needed to feel native and smooth alongside the 3D scene without breaking the immersive experience.

  • Legal content accuracy writing plain-language legal information that is genuinely helpful without being dangerously specific required careful framing and consistent disclaimers throughout.

  • Switching tracks mid-hackathon I originally built an AI/ML chatbot using the Anthropic API but had to pivot to AR/VR when API billing was unavailable. The pivot actually produced a stronger, more accessible product.

Accomplishments that I'm proud of

  • Built a fully working immersive WebXR experience in a single HTML file no install, no login, no cost to the user
  • Designed a chatbot that handles real crisis situations typing "I'm scared and in danger" instantly returns emergency hotline numbers
  • Created a warm, Women's Day-appropriate visual experience that feels nothing like a typical legal information website
  • Made the entire project work completely offline after first load accessible even in low-connectivity environments
  • Covered 6 major legal areas with 36 rights cards and real resource recommendations
  • Successfully pivoted from AI/ML to AR/VR track and delivered a stronger product as a result

What I learned

  • Accessibility matters more than complexity a single HTML file that works on any device reaches more people than a sophisticated React app that requires setup
  • Immersive environments reduce anxiety around difficult topics the 3D garden makes legal information feel approachable rather than intimidating
  • A well-designed rule-based system can feel surprisingly intelligent when the domain is focused
  • Scoping realistically under a tight deadline produces better results than over-engineering
  • Women's legal challenges are universal workplace harassment, housing discrimination, and immigration fear cross every border and culture

What's next for HerRights VR

  • Upgrade the chatbot to use Goose (Block's open-source AI framework) or the Anthropic API for richer, more conversational responses
  • Add multi-language support Arabic, Spanish, French, Urdu to reach women globally
  • Add audio narration of rights cards for users with reading difficulties
  • Improve mobile VR support for Google Cardboard making it accessible with zero-cost hardware
  • Partner with legal aid organizations to verify and expand the rights content per jurisdiction
  • Add more topics disability rights, education rights, healthcare rights
  • Build a community layer where women can share resources and experiences safely

Built With

Share this project:

Updates