Solaris

A home-energy interface for solar production, battery settings and household savings, centred on an animated isometric house.

• Best forDevelopers building home-energy and solar installer portals.

• Overview

  Follow simulated energy flows between the roof, home, battery, EV and grid, alongside power charts and an activity feed.

• Production

  Inspect individual panels in a tilting roof heat map, switch to a plan view and compare daily or monthly production.

• Battery

  Explore a liquid charge indicator, operating modes and a backup-reserve slider linked to the charge timeline.

• Billing

  Review sample savings, grid imports and exports, tariff periods and selectable invoices.

• Animated energy model

  An isometric house connects solar panels, inverter, battery, home, EV and grid with moving energy particles. The readouts and flow animation follow simulated power values.

• Panel and battery views

  A tilting roof heat map lets users inspect individual panels. The battery view combines an animated liquid charge indicator with operating modes and a reserve slider linked to the timeline.

• Local monitoring controls

  Switch chart periods and display modes, select invoices and inspect chart tooltips. These interactions update the demonstration interface without connecting to an inverter or changing physical equipment.

• Editable data and design

  Sample readings, production curves, tariffs and invoices live in the data module. Colours, fonts and materials are defined separately, while the house model and simulated telemetry have their own components.

• Reduced-motion support

  Reduced-motion preferences show the interface in its final state with energy particles at rest. Keyboard focus styles are included on controls, alongside a stacked layout for smaller screens.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Energy readings and device events are simulated locally. Battery controls do not operate hardware; no inverter, weather or utility connection is included.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsPlus Jakarta Sans
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.