Start with the work. Trace it back to the maker and method.

Create a high-fidelity, interactive web app that turns a headline rent price into the real monthly cost and real annual cost. ## Core idea Users often see a listing price and only compare monthly rent, while ignoring deposit, agent fee, utilities, move-in costs, and commuting. This calculator reveals the true cost in a clear, slightly reality check tone. ## UX goals * Fast to use, no clutter, mobile-friendly * Inputs feel like a real renting scenario * Output is instantly understandable, with transparent breakdown * Tone: calm, practical, lightly witty, never judgmental ## Layout Single page, 3 sections, sticky results card on desktop: 1. Listing Basics 2. Hidden Costs 3. Commute Cost Right side: Reality Check Summary card (on mobile, summary appears below and stays accessible via a floating “Summary” button). ## Inputs ### 1) Listing Basics * Currency selector (default: SGD) * Monthly rent (number) * Lease length (months) selector: 6 / 12 / 18 / 24 (default 12) * Move-in date (optional, only for UI polish, does not affect math) * “Is rent negotiable?” toggle (optional) If ON: show a slider “Discount” 0% to 10% to adjust rent ### 2) Hidden Costs All costs should support common patterns with friendly presets: * Deposit * Dropdown: 1 month, 2 months, Custom * If Custom: numeric input (amount) * Agent fee * Dropdown: None, Half month, 1 month, Custom * If Custom: numeric input (amount) * Utilities (monthly) * Electricity (number) * Water (number) * Internet (number) * Optional: “Other monthly fees” (number) * One-time move-in costs (optional) * Cleaning fee (number) * Furniture / appliances (number) * Moving service (number) * “Other one-time costs” (number) ### 3) Commute Cost Let users choose to include commute cost or not. * Toggle: “Include commute cost” (default ON) If ON, show: * Workdays per month (default 22) * Transport mode tabs: “Public”, “Car”, “Mixed” For each mode: * Cost per one-way trip (number) * One-way time (minutes) * Optional: “Value my time” toggle (default OFF) * If ON: hourly value (number) * Convert commute time to cost: time_cost = (minutes * 2 * workdays / 60) * hourly_value ## Calculations ### Adjusted rent * rent_adjusted = monthly_rent * (1 - discount_percent) ### Monthly recurring costs * utilities_monthly = electricity + water + internet + other_monthly_fees * commute_cash_monthly = cost_per_one_way * 2 * workdays * commute_time_monthly = (one_way_minutes * 2 * workdays / 60) * hourly_value (only if time toggle ON) * recurring_monthly = rent_adjusted + utilities_monthly + (commute toggles) ### One-time costs total * deposit_amount = preset months * rent_adjusted OR custom amount * agent_fee_amount = preset months * rent_adjusted OR custom amount * move_in_one_time = cleaning + furniture + moving + other_one_time * one_time_total = deposit_amount + agent_fee_amount + move_in_one_time ### Normalize one-time costs across lease * one_time_monthly_equivalent = one_time_total / lease_length_months ### Real monthly + annual * real_monthly = recurring_monthly + one_time_monthly_equivalent * real_annual = real_monthly * 12 ### Also show “Lease total” * lease_total = recurring_monthly * lease_length_months + one_time_total ## Outputs (Reality Check Summary card) Show big numbers: * Real Monthly Cost * Real Annual Cost * Lease Total Then a clean breakdown list: * Rent (adjusted) * Utilities * Commute (cash) * Commute (time value) if enabled * One-time costs (monthly equivalent) Also show: * “Hidden cost uplift”: real_monthly - rent_adjusted * “Uplift %”: uplift / rent_adjusted Add a small “What’s driving the cost” insight line: * Identify the largest non-rent contributor and write one sentence like: “Biggest add-on: Agent fee amortized across the lease.” ## Interactions * Instant recalculation on change * Tooltips with examples for deposit/agent fee * Preset buttons: “Typical 12-month lease”, “No agent fee”, “Barebones utilities” * A “Compare to another listing” mini feature: * Button “Save as Scenario A” * Button “Save as Scenario B” * Show A vs B difference in real_monthly and lease_total ## Visual style * Warm, modern UI, rounded cards, subtle shadows * Clear typography, accessible contrast * Micro-animations for number changes (count-up) * A small progress-style bar showing “Rent vs Hidden Costs” ratio ## Copy tone Use short, punchy labels: * Headline: “Rent Reality Check” * Subhead: “Turn the sticker price into the real monthly and yearly cost.” * CTA button: “Reality check it” * Footer note: “Estimates only. Your actual bills may vary.” ## Edge cases * Prevent negative values * If lease_length_months is very short (6) and agent fee is 1 month, highlight: “Short lease amplifies one-time fees.”

A {argument name="subject" default="luminous jellyfish"} suspended against a {argument name="background" default="pure black background"}, presented like a futuristic scientific specimen plate. Its translucent bell glows in {argument name="colors" default="saturated neon magenta, ultraviolet purple, electric cyan, cobalt blue, and toxic green"}, with branching vein-like structures and fine cellular textures visible inside. Long ribbon-like tentacles trail downward in elegant curves, each edge illuminated by fluorescent light. Along the left side, six clean rectangular swatches show gradients and macro texture studies derived from the jellyfish’s membranes. High-contrast ultraviolet photography, iridescent biological detail, crisp symmetry, minimal composition, deep black negative space, surreal natural-history aesthetic, intensely radiant neon color.