Sustainable Web Design Examples

What are these sustainable web design examples?

They are 10 ready-made, animated web elements built around sustainable web design: calm, low-ink web elements for sustainable and low-carbon websites: carbon badges, page-weight budgets, grid-aware scheduling, dithered images and low-power modes. Each one is a small ExodeUI file with its own motion, a hover response, a tap action and editable keyframes. Every colour, label, number and motion setting is a runtime input, so you can restyle it or feed it live data without editing the file.

All 10 sustainable elements

How to add a sustainable element to your site

1. Open an element above and set its text, colours and motion, or keep the defaults.
2. Download the .bexode file (or the customized .exode) and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas and pass your text, numbers and colours as inputs.

import { ExodeUICanvas } from 'exodeui';

export function WebsiteCarbonBadgeWidget({ data }) {
  return (
    <ExodeUICanvas
      src="/ui-trends/files/sustainable/01-carbon-badge.bexode"
      autoPlay
      style={{ width: 600, height: 400 }}
      inputs={{
        site: data.site,
        hostLabel: data.hostLabel,
        // every colour is an input too, for example a brand accent
        ...data.theme
      }}
    />
  );
}

Frequently asked questions

What is sustainable web design?

It means building pages that use less energy and data: fewer and smaller files, efficient images and fonts, less autoplay, green hosting and doing heavy work when the grid is cleaner. These elements help you show and explain those choices to visitors.

Are the numbers in these elements real?

No. Every figure (grams of CO₂, kilobytes, battery level, grid intensity) is a placeholder input. Connect them to your own measurements, for example from your build tooling or a carbon-intensity API.

Isn’t animation bad for sustainability?

Animation costs energy, so use it with intent. These files are small, draw only while visible, and expose their speed as an input; the low-power element even shows how motion can slow down when a visitor asks for it.

How do I customize these elements at runtime?

Every colour, label, number and motion setting is a state machine input. Pass values through the inputs prop in React (or the matching prop in Vue and React Native) and the element updates while it runs.

What is the difference between .exode and .bexode?

.exode is the editable JSON file you open in ExodeUI. .bexode is the compiled file you ship with a runtime; it is much smaller and keeps the same inputs and motion.

More from ExodeUI