Calda
A smart-home app in smoked glass with one blue accent
A complete smart-home control app in smoked grey glass over black-and-white room photos, shown as a family house with sample rooms, devices, cameras and energy data. Good for: a smart-home, home-automation or property-tech product that needs a polished app for controlling a house. How it works: everything that is on lights up in one accent colour, the temperature is a dial you drag round its arc, doors lock when you slide them, and the energy chart reshapes itself between week, month and year. Includes: a home screen with a room you switch, the climate dial, the weather, door locks, energy, pinned devices, music and scenes; a page per room with switches, dimmers and colour temperature; every device with search and a detail sheet; climate zones and a weekly heating schedule you edit; energy by device with a monthly budget; an alarm with home and away modes, locks, live camera views and an activity log; speakers grouped by room; scenes you run with undo and rule-based automations; the family; settings with a highlight colour picker (six presets or your own colour, checked for readability in both themes) and adjustable glass; a help page with a support form; search on Cmd+K, notifications, a sign-in screen, light and dark themes, and phone, tablet and desktop layouts. How to use: it runs on sample data saved in the browser with no backend and no real devices, so connect your own hub, devices and server. Built with React, TypeScript and GSAP.
$91.00 — one-time price, free updates
- A React app template
- React and Vite · npm install and it runs
- Build unlimited client sites with it
Built with React, CSS, GSAP.
What is in the zip
- app.css
- css/climate.css
- css/devices.css
- css/energy.css
- css/family.css
- css/help.css
- css/home.css
- css/media.css
- css/rooms.css
- css/scenes.css
- css/security.css
- css/settings.css
- index.html
- src/App.tsx
- src/accent.ts
- src/actions.tsx
- src/devicedrawer.tsx
- src/env.d.ts
- src/finder.tsx
- src/main.tsx
- src/motion.ts
- src/pages/climate.tsx
- src/pages/devices.tsx
- src/pages/energy.tsx
- src/pages/family.tsx
- src/pages/help.tsx
- src/pages/home.tsx
- src/pages/media.tsx
- src/pages/rooms.tsx
- src/pages/scenes.tsx
- src/pages/security.tsx
- src/pages/settings.tsx
- src/pages/types.ts
- src/router.ts
- src/store.ts
- src/ui/accents.tsx
- src/ui/charts.tsx
- src/ui/format.ts
- src/ui/icons.tsx
- src/ui/kit.tsx
Version history
- v1.0.0, 2026-11-08 — First release. Calda shipped, with the reel recorded from the real page.