LofiStack 90-day challenge

Component Gallery

Two new UI components every week. Each one has its own page with a live demo and the full source.

Progress14 / 30 components

Loading your room…
Week 7
Room Planner, 2D to 3D
Draw a room to scale, arrange real-size furniture with fit and door-swing warnings, then orbit or walk through it in 3D.
Loading your trip…
Week 7
Trip Planner with Live Map
Plan a multi-day trip on a real map: search places, organise stops by day, see driving routes with times and distances, split the budget, pack, and share it with a link.
Live meeting captions
Captions as people talk, with action items, decisions and questions pulled out automatically.
Ready00:00
Now speaking
Press Start captions and talk, or play the sample meeting to see captions and notes appear.
Speaker 1Captions appear here
Nothing yet. They appear as the meeting goes on.
00:00duration
0words
0words/min
Speaker 10%
Speaker 20%
Highlight
Recognition uses your browser's speech service (in Chrome, audio is processed by Google). This page stores nothing. Notes are extracted on your device.
Week 6
Live Meeting Captions & Action Items
Live speech-to-text captions with speaker turns, highlighted deadlines and money, and action items (owner + due date), decisions and questions extracted as people talk.
Week 6
Collaborative Whiteboard
A Miro-style infinite whiteboard: sticky notes, shapes, connectors, pen, frames, snapping, undo/redo, mini-map, templates, PNG/JSON export and live cursors across browser tabs.
Text diff checker
See exactly what changed between two versions of a contract, policy or document.
OriginalOpen file
EMPLOYMENT AGREEMENT This Agreement is made on 1 March 2026 between Acme Ltd. ("the Company") and Nusrat Jahan ("the Employee"). 1. Position The Employee is appointed as HR Executive, reporting to the Head of People. 2. Salary The Employee will receive a gross monthly salary of BDT 45,000, paid on the last working day of each month. 3. Working Hours Normal working hours are 9:00 am to 6:00 pm, Sunday to Thursday. 4. Leave The Employee is entitled to 14 days of annual leave and 10 days of sick leave per year. 5. Probation The first 6 months of employment are a probation period. 6. Confidentiality The Employee must not share confidential company information during or after employment. 7. Notice Period Either party may end this agreement by giving 30 days' written notice.
ChangedOpen file
EMPLOYMENT AGREEMENT This Agreement is made on 15 March 2026 between Acme Ltd. ("the Company") and Nusrat Jahan ("the Employee"). 1. Position The Employee is appointed as Senior HR Executive, reporting to the Head of People. 2. Salary The Employee will receive a gross monthly salary of BDT 52,000, paid on the last working day of each month. 3. Working Hours Normal working hours are 9:30 am to 6:30 pm, Sunday to Thursday, with a one-hour lunch break. 4. Leave The Employee is entitled to 18 days of annual leave and 10 days of sick leave per year. 5. Probation The first 3 months of employment are a probation period. 6. Remote Work The Employee may work remotely up to 2 days per week with manager approval. 7. Confidentiality The Employee must not share confidential company information during or after employment. 8. Notice Period Either party may end this agreement by giving 60 days' written notice.
Only changesIgnore caseIgnore spaces
+3 added−0 removed~9 changed59% of lines unchangedChange 1 of 8
1EMPLOYMENT AGREEMENT1EMPLOYMENT AGREEMENT
2 2
3This Agreement is made on 1 March 2026 between Acme Ltd. ("the Company") and Nusrat Jahan ("the Employee").3This Agreement is made on 15 March 2026 between Acme Ltd. ("the Company") and Nusrat Jahan ("the Employee").
4 4
51. Position51. Position
6The Employee is appointed as HR Executive, reporting to the Head of People.6The Employee is appointed as Senior HR Executive, reporting to the Head of People.
7 7
82. Salary82. Salary
9The Employee will receive a gross monthly salary of BDT 45,000, paid on the last working day of each month.9The Employee will receive a gross monthly salary of BDT 52,000, paid on the last working day of each month.
10 10
113. Working Hours113. Working Hours
12Normal working hours are 9:00 am to 6:00 pm, Sunday to Thursday.12Normal working hours are 9:30 am to 6:30 pm, Sunday to Thursday, with a one-hour lunch break.
13 13
144. Leave144. Leave
15The Employee is entitled to 14 days of annual leave and 10 days of sick leave per year.15The Employee is entitled to 18 days of annual leave and 10 days of sick leave per year.
16 16
175. Probation175. Probation
18The first 6 months of employment are a probation period.18The first 3 months of employment are a probation period.
19 19
206. Remote Work
21The Employee may work remotely up to 2 days per week with manager approval.
22
206. Confidentiality237. Confidentiality
21The Employee must not share confidential company information during or after employment.24The Employee must not share confidential company information during or after employment.
22 25
237. Notice Period268. Notice Period
24Either party may end this agreement by giving 30 days' written notice.27Either party may end this agreement by giving 60 days' written notice.
Week 5
Text Diff Checker
Compare two versions of a contract, policy or document with the Myers diff algorithm: line and word-level highlights, split or unified view, and jump between changes.
Document scanner
Turn a phone photo of a page into a flat, clean scan. Nothing leaves your device.
Drop a photo of a document, or click to chooseLetters, receipts, certificates, ID cards
Week 5
Document Scanner
Turn a phone photo of a page into a flat, clean scan: auto-detected corners, perspective correction, shadow-removing B&W filter and multi-page PDF export, all in the browser.
Inbox · Acme Mail
Trigger a notification
Hover the stack to expand · swipe a toast sideways to dismiss
Week 4
Stacking Toast Notifications
Toasts that stack like cards, fan out on hover, pause their timers, swipe away, and turn loading into success, with Undo and Retry actions.
Spin the wheel
A fair random pick for raffles, turns and team decisions.
Entries 8one per lineAyesha Rahim Nusrat Tanvir Farhan Mitu Sadia Imran
Remove the winner before the next spinTick sound
Week 4
Spin-the-Wheel Picker
Paste names and spin a wheel that slows down realistically, with a ticking pointer, blinking rim lights and a fair, cryptographically random winner.
Get the weekly digest
Hand-picked UI ideas every Friday. No spam, unsubscribe anytime.
Demo outcome
Week 3
Morphing Submit Button
A submit button that shrinks into a spinner, then bursts into a self-drawing checkmark with confetti, or shakes red on error.
Photo resizer for forms
Crop, resize and compress to the exact size a form asks for.
Common sizes. Always check your form's own instructions.
Drop a photo here, or click to chooseJPG or PNG. It never leaves this device.
Week 3
Photo Resizer for Official Forms
Crop, resize and compress a photo to the exact pixel size and KB limit a job, passport or visa form asks for, without it ever leaving your device.
Customer lifetime value
Is each customer worth what you pay to win them?
Revenue per customer
$/mo
Gross margin
%
Customers lost per month
%
Cost to win a customer
$
Lifetime value$1,167over a 33-month average lifetime
Value : cost2.6 : 1Thin
Pays back its cost16.0 mo12.9 mo if nobody left
Profitable, but with little room for mistakes. Every $1 spent winning a customer returns $2.59. To reach a healthy 3 : 1, lower monthly churn to 2.6%, or raise revenue per customer to $57.86/mo, or cut acquisition cost to $389.
Week 2
Customer Lifetime Value Calculator
Compares what a customer earns you over their lifetime with what it costs to win them, charts when they pay back, and tells you which lever gets you to a healthy 3 : 1.
Password strength
Enter a password
10 billion guesses per second on a GPU rig
Try a passphrase: four random words are easy to remember and hard to crack.
- Missing: At least 12 characters
- Missing: Upper and lowercase letters
- Missing: A number
- Missing: A symbol, like ! # or $
- Missing: No common words or patterns
Checked on your device. Nothing is sent.
Week 2
Password Strength Meter
Estimates how long a password would take to crack, spots common words and patterns, and gives one specific tip to make it stronger.
Unit converterSpin the dial
Kilometreskm
=Milesmi
1 km = 0.6214 mi
Week 1
Unit Converter Dial
Spin a rotary knob to switch between distance, temperature and weight, then type in either box to convert live.
Monthly payment$2,603/mo
Loan amount$300,000
Interest rate8.5%
Loan term20 years
Week 1
Loan / EMI Calculator
Sliders for loan amount, interest rate and term, with a live monthly payment and a donut chart of principal vs interest.

Get the weekly digest