Now have a simple storyboard system that can display an image and move with the camera to different cells.

storyboard/ui.cpp

@@ -0,0 +1,69 @@
+#include "storyboard/ui.hpp"
+#include "components.hpp"
+#include "animation.hpp"
+
+namespace storyboard {
+
+  UI::UI() :
+    $view_texture({SCREEN_WIDTH, SCREEN_HEIGHT}),
+    $view_sprite($view_texture.getTexture())
+  {
+    $view_sprite.setPosition({0, 0});
+    $camera.style("bounce");
+  }
+
+  void UI::init() {
+    $ui.position(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+    $ui.set<guecs::Background>($ui.MAIN, {$ui.$parser, guecs::THEME.TRANSPARENT});
+
+    auto& background = $ui.get<guecs::Background>($ui.MAIN);
+    background.set_sprite("test_story", true);
+
+    $ui.layout(
+        "[a|b|c]"
+        "[*%(200,100)d|_|f]"
+        "[g|h|i]");
+  }
+
+  void UI::render(sf::RenderWindow &window) {
+    if($camera.playing()) {
+      zoom($zoom_target);
+    }
+
+    $ui.render($view_texture);
+    $ui.debug_layout($view_texture);
+    $view_texture.display();
+    window.draw($view_sprite);
+  }
+
+  bool UI::mouse(float x, float y, guecs::Modifiers mods) {
+
+    if(zoomed) {
+      zoomed = false;
+      reset();
+    } else {
+      zoomed = true;
+      auto target = $ui.$parser.hit(x, y);
+      $zoom_target = *target;
+      zoom($zoom_target);
+      $camera.play();
+    }
+
+    return $ui.mouse(x, y, mods);
+  }
+
+  void UI::zoom(const std::string &cell_name) {
+    auto& cell = $ui.cell_for(cell_name);
+
+    $camera.resize({float(cell.w), float(cell.h)});
+    $camera.move($view_texture,
+        {float(cell.mid_x), float(cell.mid_y)});
+  }
+
+  void UI::reset() {
+    sf::FloatRect where{{0,0},{SCREEN_WIDTH, SCREEN_HEIGHT}};
+    sf::View view{where};
+    $view_texture.setView(view);
+  }
+}