With a MUD vs without
Interactive 3-step comparison for Houston-area new homes. Navigate with step buttons, use Previous/Next, or let it auto-play. Reduced motion shows the final comparison immediately.
Interaction model
- Step chips: Click any step (1, 2, or 3) to jump directly to that part of the comparison.
- Previous / Next: Navigate one step at a time using the arrow buttons.
- Play / Pause: Auto-advance through all steps, or pause to study the current view.
- Replay: Start the sequence again from Step 1.
- Keyboard: Left/Right arrows navigate steps. Space toggles Play/Pause when focused.
- Reduced motion: Jumps directly to Step 3 (full comparison) with no animation.
Mobile behavior
- Stacked layout: On screens 640px and below, shows one step at a time in a vertical card.
- Step 1: Without MUD panel with price and income cards.
- Step 2: With MUD panel with price and income cards.
- Step 3: Side-by-side comparison table plus "How it's paid" flow.
- Touch targets: All controls are at least 44px tall for easy tapping.
- No horizontal scroll: Content fits within viewport at 320px and up.
Story beats
- Step 1 - Without MUD: Barren undeveloped lots with survey stakes, no infrastructure. Infrastructure embedded in price: ~$475k home, ~$3,652/mo, ~$156,500 income to qualify.
- Step 2 - With MUD: Ready neighborhood with finished homes, paved streets, water tower, and underground utilities. Bond-funded infrastructure: ~$250k home, ~$2,235/mo, ~$95,800 income to qualify.
- Step 3 - Compare: Numbers side by side. "How it's paid" flow: Bond → Services → Transparent tax. Reminder that MUD taxes are real and disclosed.
Embed file: animations/mud-vs-no-mud-embed.html ·
Home iframes that file inside section #mud-vs-compare.