diff --git a/demos/calc.cpp b/demos/calc.cpp
index 617bd0c..07f5ce6 100644
--- a/demos/calc.cpp
+++ b/demos/calc.cpp
@@ -1,5 +1,15 @@
+#include "sfml/components.hpp"
+#include "sfml/sound.hpp"
+#include "sfml/shaders.hpp"
+#include "sfml/textures.hpp"
 #include "guecs.hpp"
 
+
 int main() {
-  return 0;
+  sound::init();
+  shaders::init();
+  textures::init();
+
+
+
 }
diff --git a/guecs.cpp b/guecs.cpp
index dc53757..03fd460 100644
--- a/guecs.cpp
+++ b/guecs.cpp
@@ -1,140 +1,9 @@
 #include "guecs.hpp"
-#include "sfml/shaders.hpp"
-#include "sfml/sound.hpp"
-#include "sfml/textures.hpp"
 #include <typeinfo>
 
 namespace guecs {
   using std::make_shared;
 
-  void Textual::init(lel::Cell &cell, shared_ptr<sf::Font> font_ptr) {
-    dbc::check(font_ptr != nullptr, "you failed to initialize this WideText");
-    if(font == nullptr) font = font_ptr;
-    if(text == nullptr) text = make_shared<sf::Text>(*font, content, size);
-    text->setFillColor(color);
-
-    if(centered) {
-      auto bounds = text->getLocalBounds();
-      auto text_cell = lel::center(bounds.size.x, bounds.size.y, cell);
-      // this stupid / 2 is because SFML renders from baseline rather than from the claimed bounding box
-      text->setPosition({float(text_cell.x), float(text_cell.y) - text_cell.h / 2});
-    } else {
-      text->setPosition({float(cell.x + padding * 2), float(cell.y + padding * 2)});
-    }
-
-    text->setCharacterSize(size);
-  }
-
-  void Textual::update(const wstring& new_content) {
-    content = new_content;
-    text->setString(content);
-  }
-
-  void Sprite::update(const string& new_name) {
-    if(new_name != name) {
-      name = new_name;
-      auto sprite_texture = textures::get(name);
-      sprite->setTexture(*sprite_texture.texture);
-      sprite->setTextureRect(sprite_texture.sprite->getTextureRect());
-    }
-  }
-
-  void Sprite::init(lel::Cell &cell) {
-    auto sprite_texture = textures::get(name);
-
-    sprite = make_shared<sf::Sprite>(
-        *sprite_texture.texture,
-        sprite_texture.sprite->getTextureRect());
-
-    sprite->setPosition({
-        float(cell.x + padding),
-        float(cell.y + padding)});
-
-    auto bounds = sprite->getLocalBounds();
-
-    sprite->setScale({
-        float(cell.w - padding * 2) / bounds.size.x,
-        float(cell.h - padding * 2) / bounds.size.y});
-  }
-
-  void Rectangle::init(lel::Cell& cell) {
-    sf::Vector2f size{float(cell.w) - padding * 2, float(cell.h) - padding * 2};
-    if(shape == nullptr) shape = make_shared<sf::RectangleShape>(size);
-    shape->setPosition({float(cell.x + padding), float(cell.y + padding)});
-    shape->setFillColor(color);
-    shape->setOutlineColor(border_color);
-    shape->setOutlineThickness(border_px);
-  }
-
-
-  void Meter::init(lel::Cell& cell) {
-    bar.init(cell);
-  }
-
-  void Meter::render(lel::Cell& cell) {
-    float level = std::clamp(percent, 0.0f, 1.0f) * float(cell.w);
-    // ZED: this 6 is a border width, make it a thing
-    bar.shape->setSize({std::max(level, 0.0f), float(cell.h - 6)});
-  }
-
-  void Sound::play(bool hover) {
-    if(!hover) {
-      sound::play(on_click);
-    }
-  }
-
-  void Sound::stop(bool hover) {
-    if(!hover) {
-      sound::stop(on_click);
-    }
-  }
-
-  void Background::init() {
-    sf::Vector2f size{float(w), float(h)};
-    if(shape == nullptr) shape = make_shared<sf::RectangleShape>(size);
-    shape->setPosition({float(x), float(y)});
-    shape->setFillColor(color);
-  }
-
-  void Effect::init(lel::Cell &cell) {
-    $shader_version = shaders::version();
-    $shader = shaders::get(name);
-    $shader->setUniform("u_resolution", sf::Vector2f({float(cell.w), float(cell.h)}));
-    $clock = std::make_shared<sf::Clock>();
-  }
-
-  void Effect::step() {
-    sf::Time cur_time = $clock->getElapsedTime();
-    float u_time = cur_time.asSeconds();
-
-    if(u_time < $u_time_end) {
-      $shader->setUniform("u_duration", duration);
-      $shader->setUniform("u_time_end", $u_time_end);
-      $shader->setUniform("u_time", u_time);
-    } else {
-      $active = false;
-    }
-  }
-
-  void Effect::run() {
-    $active = true;
-    sf::Time u_time = $clock->getElapsedTime();
-    $u_time_end = u_time.asSeconds() + duration;
-  }
-
-  shared_ptr<sf::Shader> Effect::checkout_ptr() {
-    if(shaders::updated($shader_version)) {
-      $shader = shaders::get(name);
-      $shader_version = shaders::version();
-    }
-
-    return $shader;
-  }
-
-  void Effect::stop() {
-    $active = false;
-  }
-
   UI::UI() {
     $font = make_shared<sf::Font>(FONT_FILE_NAME);
   }
diff --git a/guecs.hpp b/guecs.hpp
index e1b708f..bac396a 100644
--- a/guecs.hpp
+++ b/guecs.hpp
@@ -1,27 +1,16 @@
 #pragma once
 #include "dbc.hpp"
-#include "sfml/color.hpp"
 #include "lel.hpp"
 #include <string>
 #include <memory>
-#include <SFML/Graphics.hpp>
 #include <functional>
 #include <any>
 #include <queue>
 #include <typeindex>
 #include <unordered_map>
+#include "sfml/components.hpp"
 
 namespace guecs {
-  constexpr const int PADDING = 3;
-  constexpr const int BORDER_PX = 1;
-  constexpr const int TEXT_SIZE = 30;
-  constexpr const int LABEL_SIZE = 20;
-  constexpr const sf::Color FILL_COLOR = ColorValue::DARK_MID;
-  constexpr const sf::Color TEXT_COLOR = ColorValue::LIGHT_LIGHT;
-  constexpr const sf::Color BG_COLOR = ColorValue::MID;
-  constexpr const sf::Color BORDER_COLOR = ColorValue::MID;
-  constexpr const char *FONT_FILE_NAME="assets/text.otf";
-
   using std::shared_ptr, std::wstring, std::string;
 
   using Entity = unsigned long;
@@ -34,32 +23,6 @@ namespace guecs {
       std::queue<size_t> free_indices;
     };
 
-  struct Textual {
-    std::wstring content;
-    unsigned int size = TEXT_SIZE;
-    sf::Color color = TEXT_COLOR;
-    int padding = PADDING;
-    bool centered = false;
-    shared_ptr<sf::Font> font = nullptr;
-    shared_ptr<sf::Text> text = nullptr;
-
-    void init(lel::Cell &cell, shared_ptr<sf::Font> font_ptr);
-    void update(const std::wstring& new_content);
-  };
-
-  struct Label : public Textual {
-    template<typename... Args>
-      Label(Args... args) : Textual(args...)
-    {
-      centered = true;
-      size = LABEL_SIZE;
-    }
-
-    Label() {
-      centered = true;
-    };
-  };
-
   struct Clickable {
     /* This is actually called by UI::mouse and passed the entity ID of the
      * button pressed so you can interact with it in the event handler.
@@ -67,34 +30,6 @@ namespace guecs {
     std::function<void(Entity ent, std::any data)> action;
   };
 
-  struct Sprite {
-    string name;
-    int padding = PADDING;
-    std::shared_ptr<sf::Sprite> sprite = nullptr;
-
-    void init(lel::Cell &cell);
-    void update(const string& new_name);
-  };
-
-  struct Rectangle {
-    int padding = PADDING;
-    sf::Color color = FILL_COLOR;
-    sf::Color border_color = BORDER_COLOR;
-    int border_px = BORDER_PX;
-    shared_ptr<sf::RectangleShape> shape = nullptr;
-
-    void init(lel::Cell& cell);
-  };
-
-  struct Meter {
-    float percent = 1.0f;
-    sf::Color color = ColorValue::BLACK;
-    Rectangle bar;
-
-    void init(lel::Cell& cell);
-    void render(lel::Cell& cell);
-  };
-
   struct ActionData {
     std::any data;
   };
@@ -103,50 +38,6 @@ namespace guecs {
     string name;
   };
 
-  struct Effect {
-    float duration = 0.1f;
-    string name{"ui_shader"};
-    float $u_time_end = 0.0;
-    bool $active = false;
-    std::shared_ptr<sf::Clock> $clock = nullptr;
-    std::shared_ptr<sf::Shader> $shader = nullptr;
-    int $shader_version = 0;
-
-    void init(lel::Cell &cell);
-    void run();
-    void stop();
-    void step();
-    shared_ptr<sf::Shader> checkout_ptr();
-  };
-
-  struct Sound {
-    string on_click{"ui_click"};
-    void play(bool hover);
-    void stop(bool hover);
-  };
-
-  struct Background {
-    float x = 0.0f;
-    float y = 0.0f;
-    float w = 0.0f;
-    float h = 0.0f;
-    sf::Color color = BG_COLOR;
-    shared_ptr<sf::RectangleShape> shape = nullptr;
-
-    Background(lel::Parser& parser, sf::Color bg_color=BG_COLOR) :
-      x(parser.grid_x),
-      y(parser.grid_y),
-      w(parser.grid_w),
-      h(parser.grid_h),
-      color(bg_color)
-    {}
-
-    Background() {}
-
-    void init();
-  };
-
-
   class UI {
     public:
       Entity MAIN = 0;
@@ -306,7 +197,6 @@ namespace guecs {
         return get<lel::Cell>(ent);
       }
 
-
       // BUG: close could just be remove with overload
       template <typename Comp>
         void close(string region) {
diff --git a/meson.build b/meson.build
index dcedec4..2bc1eef 100644
--- a/meson.build
+++ b/meson.build
@@ -85,6 +85,7 @@ sources = [
   'sfml/shaders.cpp',
   'sfml/sound.cpp',
   'sfml/textures.cpp',
+  'sfml/components.cpp',
 ]
 
 executable('runtests', sources + [