animate_it 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 178ea946f7dfb1a83da1a68ba2ea514984d2ad1ab9792bbcd7d7fadff5380fc5
+  data.tar.gz: ca63aee15a52e08db308a17a2094989131bc1c6c6625f52cfb8dd375ef2b71ec
+SHA512:
+  metadata.gz: 7d4f409c4d620768e021529c8d3b7b2de5d5e8b2be1eaa05165c986c25f10e384434842f71b5c5f0062f482dc228d43efc40d65dc18feae776914a91d19985b5
+  data.tar.gz: cdc55f7e5159a4ec9854a61b447be969a4710d95b831ff9024611afe5b88650eb29b8de2ba097cc3cfb0c91ac459fdadf60bb213e5d46ffffc279aadb393d251

data/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+All notable changes to this project are documented here. The format is based on
+[Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
+adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-07-08
+
+### Added
+- Initial extraction of AnimateIt into a standalone gem.
+- Declarative composition DSL: `size`, `fps`, `duration`, `beat`, `audio`,
+  `audio_loop`, `outputs`, `scene`, `series`.
+- `Scene` render context with animation helpers (`at_global`, `at_act`,
+  `beat_frame`, `beat_range`), `fixtures`, and `expose`.
+- Studio UI mounted at `/animate_it` for previewing and rendering compositions.
+- `VideoRenderer`: single-browser Playwright frame capture piped through FFmpeg
+  to MP4/WebM/MOV/GIF, with audio mux (`adelay` + `volume` + `amix`).
+- `render_animate_it_video` executable and `animate_it:render` rake task.
+- `animate_it:install` generator.
+
+[Unreleased]: https://github.com/growth-constant/animate_it/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/growth-constant/animate_it/releases/tag/v0.1.0

data/MIT-LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 growth-constant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,166 @@
+<p align="center">
+  <img src="assets/logo.svg" alt="AnimateIt" width="360">
+</p>
+
+<p align="center">
+  <strong>Videos as code.</strong> Declarative, frame-driven video compositions for Rails,
+  rendered with headless Chromium (Playwright) + FFmpeg.
+</p>
+
+<p align="center">
+  <a href="https://github.com/growth-constant/animate_it/actions/workflows/ci.yml"><img src="https://github.com/growth-constant/animate_it/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
+  <a href="https://rubygems.org/gems/animate_it"><img src="https://img.shields.io/gem/v/animate_it.svg" alt="Gem Version"></a>
+  <img src="https://img.shields.io/badge/ruby-%3E%3D%203.4-CC342D.svg" alt="Ruby >= 3.4">
+</p>
+
+---
+
+AnimateIt lets you describe a video as a Ruby class and a HAML template, preview it
+frame-by-frame in a bundled **Studio** UI, and render it to MP4/WebM/MOV/GIF. Each
+frame is a real web page — so you get the full power of CSS, your app's own
+components, and real data — captured by a headless browser and stitched with FFmpeg.
+
+## Requirements
+
+- Ruby >= 3.4, Rails >= 8.1.3
+- **FFmpeg** on the PATH (rendering)
+- **Node + Playwright** with a Chromium build (rendering): `npx playwright install chromium`
+- **HAML** (composition sidecar templates + Studio views)
+
+Playwright and FFmpeg are only needed when you actually render; the gem loads
+Playwright lazily so production boot / asset precompile never touch it.
+
+## Installation
+
+```ruby
+# Gemfile
+gem "animate_it"
+```
+
+```bash
+bundle install
+bin/rails generate animate_it:install
+```
+
+The generator adds `config/initializers/animate_it.rb` and mounts the Studio in
+`config/routes.rb` (development/test only):
+
+```ruby
+mount AnimateIt::Engine, at: AnimateIt.config.mount_path if Rails.env.local?
+```
+
+Visit **http://localhost:3000/animate_it** to open the Studio.
+
+## Writing a composition
+
+Compositions live in `app/videos/`. They auto-register (via the `id "..."` DSL)
+and reload in development.
+
+```ruby
+# app/videos/hello_video.rb
+class HelloVideo < AnimateIt::Composition
+  id "hello"
+  fps 30
+  size 1080, 1080
+  duration 3.seconds
+
+  assets_dir "app/assets/images/videos"
+  output_basename "hello"
+
+  outputs do
+    mp4
+    gif
+    png frame: 45
+  end
+
+  beat :intro, at: 0, length: 45
+
+  class Scene < AnimateIt::Scene
+    def body
+      expose(vars: animation_vars(title_opacity: at_act(:intro, [0, 30], [0, 1])))
+      tag.div(class: "hero-render-canvas") { render_scene_template("canvas") }
+    end
+  end
+
+  scene Scene
+end
+```
+
+```haml
+-# app/videos/hello_video/canvas.html.haml
+:css
+  .title { opacity: var(--title-opacity, 1); font-size: 6rem; font-weight: 800; }
+.stage{style: @vars}
+  .title Hello 👋
+```
+
+Animation helpers (`at_global`, `at_act`, `beat_frame`, `beat_range`), a per-frame
+CSS-variable bag (`animation_vars`), named `beat`s, and `audio` / `audio_loop`
+tracks are all available. Compositions can render your app's real partials and
+ViewComponents — see `AnimateIt.config.render_stylesheets` below.
+
+## Rendering
+
+The renderer needs your Rails **server running** (it drives a real browser against
+the Studio's filmstrip endpoint).
+
+```bash
+# start the app
+bin/rails server
+
+# in another shell — render a composition's declared outputs
+bin/rails 'animate_it:render[hello]'
+bin/rails 'animate_it:render[hello,0..45]'   # just a frame range
+
+# or the packaged CLI (writes to tmp/animate_it/ by default)
+bundle exec render_animate_it_video hello
+bundle exec render_animate_it_video hello tmp/hello.mp4
+```
+
+You can also render from the **Studio** UI: open a composition, scrub the timeline,
+and click **Render Video** to watch progress live.
+
+### Host resolution
+
+The renderer points the browser at `ANIMATE_IT_HOST` (falling back to the legacy
+`RAILS_MOTION_HOST`, then `RAILS_HOST`, then `http://127.0.0.1:3000`):
+
+```bash
+ANIMATE_IT_HOST=http://127.0.0.1:3001 bundle exec render_animate_it_video hello
+```
+
+## Configuration
+
+```ruby
+# config/initializers/animate_it.rb
+AnimateIt.configure do |config|
+  # Where the Studio mounts (development/test only). Default "/animate_it".
+  config.mount_path = "/animate_it"
+
+  # Host stylesheets to inject into every rendered frame. Only needed when your
+  # compositions re-use host partials/components that expect their CSS. Names
+  # are passed to `stylesheet_link_tag`. Default [].
+  config.render_stylesheets = %w[application components/star-ratings]
+end
+```
+
+Render concurrency for the Studio's background renderer is tunable via
+`ANIMATE_IT_RENDER_CONCURRENCY` and `ANIMATE_IT_RENDER_STARTS_PER_SECOND`.
+
+## Development
+
+```bash
+bin/setup                # bundle install
+bundle exec rspec        # unit + request specs (uses spec/dummy)
+bundle exec rubocop
+
+# full render smoke test (needs ffmpeg + Playwright chromium)
+RUN_RENDER_SMOKE=1 bundle exec rspec spec/rendering_spec.rb
+```
+
+Specs run against a minimal host app in `spec/dummy` — no external services, no
+database.
+
+## License
+
+[MIT](MIT-LICENSE).

data/app/controllers/animate_it/application_controller.rb

@@ -0,0 +1,73 @@
+module AnimateIt
+  class ApplicationController < ActionController::Base
+    # Composition sidecar templates live at app/videos/<composition>/*.html.haml
+    # in the host app — outside the engine's view path, so add it explicitly.
+    prepend_view_path Rails.root.join("app/videos")
+
+    # Sidecar templates routinely render host-app partials (e.g. the real
+    # candidates-page _match_row.haml). Those partials reach for host helpers
+    # like `user_status_style`, `full_name_hidden_display`, `add_stylesheet`,
+    # etc. — and host route helpers like `expert_profile_client_matches_job_path`.
+    # None of those live in the engine, so expose them all here so the engine's
+    # view context matches what the host's view context offers.
+    helper Rails.application.helpers
+    helper Rails.application.routes.url_helpers
+
+    protect_from_forgery with: :exception
+    layout "animate_it/application"
+
+    before_action :ensure_local_environment
+    helper_method :animate_it_path, :current_user, :policy
+
+    rescue_from AnimateIt::CompositionNotFoundError do
+      head :not_found
+    end
+
+    # Host partials reach for Devise's `current_user` and Pundit's `policy(...)`
+    # helpers. The engine has neither, so provide permissive null-object
+    # versions for hero rendering. Hero canvases are always read-only; the
+    # action buttons they incidentally render evaluate every permission to
+    # false and become no-ops.
+    NullPolicy = Class.new do
+      def method_missing(name, *_args)
+        name.to_s.end_with?("?") ? false : self
+      end
+
+      def respond_to_missing?(_name, _include_private = false)
+        true
+      end
+    end
+
+    private
+
+    def ensure_local_environment
+      head :not_found unless Rails.env.local?
+    end
+
+    def composition
+      AnimateIt.load_compositions!
+      @composition ||= AnimateIt.registry.fetch(params[:id])
+    end
+
+    def preview_props
+      raw = params[:props_json].presence || params[:props].presence || "{}"
+      parsed = raw.is_a?(String) ? JSON.parse(raw) : raw.to_unsafe_h
+
+      parsed.deep_symbolize_keys
+    rescue JSON::ParserError
+      {}
+    end
+
+    def animate_it_path(path)
+      "#{request.script_name}#{path}"
+    end
+
+    def current_user
+      nil
+    end
+
+    def policy(_subject)
+      NullPolicy.new
+    end
+  end
+end

data/app/controllers/animate_it/audio_controller.rb

@@ -0,0 +1,31 @@
+module AnimateIt
+  class AudioController < ApplicationController
+    AUDIO_BASE = Rails.root.join("app/audio").freeze
+
+    def show
+      audio_segments = composition.timeline.segments.select { |seg| seg.kind == :audio }
+      segment = audio_segments[params[:index].to_i]
+      return head :not_found unless segment
+
+      file_path = resolve_audio_path(segment.source[:path])
+      return head :not_found unless file_path && File.file?(file_path)
+
+      send_file file_path, type: Mime::Type.lookup_by_extension(File.extname(file_path).delete(".")),
+                           disposition: "inline"
+    end
+
+    private
+
+    def resolve_audio_path(path)
+      return nil if path.blank?
+
+      pathname = Pathname.new(path)
+      return pathname.to_s if pathname.absolute? && pathname.realpath.to_s.start_with?(AUDIO_BASE.to_s)
+
+      candidate = AUDIO_BASE.join(path).expand_path
+      return nil unless candidate.to_s.start_with?(AUDIO_BASE.to_s)
+
+      candidate.to_s
+    end
+  end
+end

data/app/controllers/animate_it/frames_controller.rb

@@ -0,0 +1,22 @@
+module AnimateIt
+  class FramesController < ApplicationController
+    layout false
+    skip_forgery_protection
+
+    def show
+      @composition = composition
+      @frame = params[:frame].to_i
+      @content = @composition.render_frame(view_context, frame: @frame, props: preview_props)
+      # `?only=body` returns just the .animate-it-frame element (no <head> /
+      # stylesheets) so the studio can morph it into a persistent document
+      # instead of reloading the whole frame doc. The full-document render is
+      # what the Playwright render pipeline uses — left untouched.
+      render(:fragment) if params[:only] == "body"
+    end
+
+    def filmstrip
+      @composition = composition
+      @props = preview_props
+    end
+  end
+end

data/app/controllers/animate_it/props_controller.rb

@@ -0,0 +1,10 @@
+module AnimateIt
+  class PropsController < ApplicationController
+    def update
+      @composition = composition
+      @props_json = JSON.pretty_generate(@composition.props.resolve(preview_props))
+      @frame_url = "#{animate_it_path("/compositions/#{@composition.id}/frame/0")}?#{URI.encode_www_form(pp: "disable",
+                                                                                                         props_json: @props_json)}"
+    end
+  end
+end

data/app/controllers/animate_it/renders_controller.rb

@@ -0,0 +1,82 @@
+module AnimateIt
+  class RendersController < ApplicationController
+    def show
+      @render_id = params[:id]
+      # `params[:id]` here is a render UUID, not a composition id — look up
+      # the render record first to learn which composition produced it.
+      render_record = RenderStore.find(@render_id)
+      return head(:not_found) unless render_record
+
+      AnimateIt.load_compositions!
+      @composition = AnimateIt.registry.fetch(render_record.composition_id)
+      @output_path = Pathname(render_record.output_path)
+      if params[:download].present? && @output_path.exist?
+        send_file @output_path, type: Mime::Type.lookup_by_extension(@output_path.extname.delete(".")),
+                                disposition: "inline"
+      end
+
+      @output_relative_path = relative_output_path(@output_path)
+    end
+
+    def create
+      @composition = composition
+      @render_id = SecureRandom.hex(8)
+      @output_path = output_path(@render_id)
+      @output_path.dirname.mkpath
+      @output_relative_path = relative_output_path(@output_path)
+
+      RenderStore.create!(
+        id: @render_id,
+        composition_id: @composition.id,
+        total_frames: @composition.duration_in_frames,
+        output_path: @output_path
+      )
+      start_render(@render_id, @composition.id, request.base_url, @output_path.to_s, frames_dir(@render_id).to_s,
+                   preview_props, render_options)
+
+      render status: :accepted
+    end
+
+    def cancel
+      RenderStore.cancel!(params[:id])
+      head :accepted
+    end
+
+    private
+
+    def output_path(render_id)
+      ext = AnimateIt::VideoRenderer::EXTENSION_FOR_FORMAT.fetch(@composition.output_format) || "mp4"
+      Rails.root.join("tmp/animate_it/renders/#{render_id}.#{ext}")
+    end
+
+    def frames_dir(render_id)
+      Rails.root.join("tmp/animate_it/renders/#{render_id}_frames")
+    end
+
+    def relative_output_path(path)
+      path&.relative_path_from(Rails.root)&.to_s
+    end
+
+    def render_options
+      {
+        "concurrency" => env_with_legacy("ANIMATE_IT_RENDER_CONCURRENCY", "RAILS_MOTION_RENDER_CONCURRENCY", "3").to_i,
+        "starts_per_second" => env_with_legacy("ANIMATE_IT_RENDER_STARTS_PER_SECOND",
+                                               "RAILS_MOTION_RENDER_STARTS_PER_SECOND", "2").to_f
+      }
+    end
+
+    # Prefer the new ANIMATE_IT_* name; fall back to the legacy RAILS_MOTION_*
+    # name for one release so existing setups don't break, then the default.
+    def env_with_legacy(new_key, legacy_key, default)
+      ENV[new_key].presence || ENV[legacy_key].presence || default
+    end
+
+    def start_render(render_id, composition_id, host, output_path, frame_dir, props, options)
+      Thread.new do
+        Rails.application.executor.wrap do
+          RenderJob.perform_now(render_id, composition_id, host, output_path, frame_dir, props, options)
+        end
+      end
+    end
+  end
+end

data/app/controllers/animate_it/studio_controller.rb

@@ -0,0 +1,17 @@
+module AnimateIt
+  class StudioController < ApplicationController
+    def index
+      AnimateIt.load_compositions!
+      @compositions = AnimateIt.compositions
+    end
+
+    def show
+      @composition = composition
+      @compositions = AnimateIt.compositions
+      @frame_base_url = animate_it_path("/compositions/#{@composition.id}/frame")
+      @last_frame = @composition.duration_in_frames - 1
+      @props_json = JSON.pretty_generate(@composition.props.defaults)
+      @renders = RenderStore.all
+    end
+  end
+end

data/app/jobs/animate_it/application_job.rb

@@ -0,0 +1,6 @@
+module AnimateIt
+  # Engine base job. Standalone-safe: inherits ActiveJob::Base directly rather
+  # than the host app's ApplicationJob, so the gem works in any host.
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/jobs/animate_it/render_job.rb

@@ -0,0 +1,28 @@
+module AnimateIt
+  class RenderJob < ApplicationJob
+    queue_as :default
+
+    def perform(render_id, composition_id, host, output_path, frames_dir, props = {}, _options = {})
+      AnimateIt.load_compositions!
+      composition = AnimateIt.registry.fetch(composition_id)
+
+      RenderStore.start!(render_id)
+      VideoRenderer.new(
+        composition:,
+        host:,
+        output_path:,
+        frames_dir:
+      ).render(
+        props:,
+        cancel_check: -> { RenderStore.cancelled?(render_id) },
+        on_progress: ->(frame, total_frames) { RenderStore.progress!(render_id, frame:, total_frames:) }
+      )
+      RenderStore.complete!(render_id)
+    rescue VideoRenderer::CancelledError
+      RenderStore.cancel!(render_id)
+    rescue StandardError => e
+      RenderStore.fail!(render_id, e)
+      raise
+    end
+  end
+end

data/app/views/animate_it/frames/filmstrip.html.haml

@@ -0,0 +1,65 @@
+!!!
+%html{ lang: "en" }
+  %head
+    %title= "#{@composition.id} filmstrip (#{@composition.duration_in_frames} frames)"
+    %meta{ name: "viewport", content: "width=#{@composition.width}, initial-scale=1" }
+    -# Host-declared render stylesheets (AnimateIt.config.render_stylesheets) so
+    -# compositions that re-use host partials get the host's component CSS. See
+    -# frames/show.html.haml for the rationale.
+    - AnimateIt.config.render_stylesheets.each do |sheet|
+      = stylesheet_link_tag sheet, "data-turbo-track": "reload"
+    :css
+      html, body {
+        width: #{@composition.width}px;
+        height: #{@composition.height}px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      body {
+        /* See frames/show.html.haml — Composition.zoom magnifies content
+           uniformly without changing the output viewport. */
+        zoom: #{@composition.zoom};
+      }
+      body, main, .hero-render-canvas {
+        background-color: transparent !important;
+      }
+      .animate-it-frame {
+        position: absolute;
+        inset: 0;
+        width: #{@composition.width}px;
+        height: #{@composition.height}px;
+        overflow: hidden;
+        display: none !important;
+        visibility: hidden;
+      }
+      .animate-it-frame.is-active {
+        display: block !important;
+        visibility: visible;
+      }
+  %body
+    - (0...@composition.duration_in_frames).each do |frame|
+      .animate-it-frame{ class: ('is-active' if frame.zero?), data: { frame: frame } }
+        = @composition.render_frame(self, frame: frame, props: @props)
+    -# See app/views/animate_it/frames/show.html.haml for why these are at the
+    -# bottom of body. Host-app accumulator helpers — emit only when present.
+    - if respond_to?(:render_page_stylesheets)
+      = render_page_stylesheets
+    - if respond_to?(:render_component_stylesheets)
+      = render_component_stylesheets
+    :javascript
+      (() => {
+        const frames = Array.from(document.querySelectorAll(".animate-it-frame"));
+        let active = frames[0] || null;
+        window.__animateIt = {
+          totalFrames: frames.length,
+          setFrame(n) {
+            const target = frames[n];
+            if (!target || target === active) return;
+            if (active) active.classList.remove("is-active");
+            target.classList.add("is-active");
+            active = target;
+          }
+        };
+        document.documentElement.dataset.animateItReady = "1";
+      })();

data/app/views/animate_it/frames/fragment.html.haml

@@ -0,0 +1,6 @@
+-# Bare frame body for the studio's persistent-document preview. Mirrors the
+-# .animate-it-frame element in show.html.haml so it can be morphed in place,
+-# but emits no <head>/stylesheets — those are parsed once by the persistent
+-# document. The full-document show.html.haml stays the render pipeline's path.
+.animate-it-frame{ data: { frame: @frame, composition: @composition.id } }
+  = @content

data/app/views/animate_it/frames/show.html.haml

@@ -0,0 +1,54 @@
+!!!
+%html{ lang: "en" }
+  %head
+    %title= "#{@composition.id} frame #{@frame}"
+    %meta{ name: "viewport", content: "width=#{@composition.width}, initial-scale=1" }
+    -# Host-declared render stylesheets (AnimateIt.config.render_stylesheets).
+    -# Compositions that re-use host partials (e.g. a real _match_row.haml)
+    -# expect the host's component CSS — star-ratings, avatar sizing, match-row
+    -# layout, fonts. The host normally queues these via `add_stylesheet(...)` /
+    -# `add_component_stylesheet(...)` and emits them with `render_*_stylesheets`,
+    -# but that queue lives on the view context, which the engine's sub-render
+    -# boundary doesn't carry across — so the host lists the bundles in the
+    -# initializer and they're loaded statically here.
+    - AnimateIt.config.render_stylesheets.each do |sheet|
+      = stylesheet_link_tag sheet, "data-turbo-track": "reload"
+    :css
+      html, body {
+        width: #{@composition.width}px;
+        height: #{@composition.height}px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      body {
+        /* Apply per-composition browser zoom (Composition.zoom). Default 1.0
+           is a no-op. With a smaller `size(...)` viewport, a >1.0 zoom
+           magnifies content uniformly without changing the output frame. */
+        zoom: #{@composition.zoom};
+      }
+
+      body, main, .hero-render-canvas {
+        background-color: transparent !important;
+      }
+
+      .animate-it-frame {
+        position: relative;
+        width: #{@composition.width}px;
+        height: #{@composition.height}px;
+        overflow: hidden;
+      }
+  %body
+    .animate-it-frame{ data: { frame: @frame, composition: @composition.id } }
+      = @content
+    -# Host-app stylesheets queued via `add_stylesheet(...)` / ViewComponent
+    -# `with_stylesheet` accumulate on the view context during content
+    -# rendering. Emit them at the end of body so the host's component CSS
+    -# (star-ratings, match-row, etc.) reaches the document. CSS still
+    -# applies regardless of position. These accumulator helpers are host-app
+    -# provided; emit them only when the host defines them.
+    - if respond_to?(:render_page_stylesheets)
+      = render_page_stylesheets
+    - if respond_to?(:render_component_stylesheets)
+      = render_component_stylesheets

data/app/views/animate_it/props/_form.html.haml

@@ -0,0 +1,3 @@
+= form_with url: animate_it_path("/compositions/#{composition.id}/props"), method: :patch do
+  %textarea#animate_it_props_json{ name: "props_json", rows: 14 }= props_json
+  = button_tag "Update Preview", type: "submit", data: { turbo_submits_with: "Updating..." }

data/app/views/animate_it/props/update.html.haml

@@ -0,0 +1,8 @@
+%turbo-frame#animate_it_props
+  = render "form", composition: @composition, props_json: @props_json
+  :javascript
+    if (window.AnimateItStudio) {
+      window.AnimateItStudio.setFrame(window.AnimateItStudio.currentFrame());
+    } else {
+      document.querySelector("#animate_it_preview iframe")?.setAttribute("src", #{@frame_url.to_json});
+    }

data/app/views/animate_it/renders/create.html.haml

@@ -0,0 +1,9 @@
+%turbo-frame#animate_it_render_result
+  %p= "Render #{@render_id} queued for #{@composition.id}."
+  - if @output_relative_path.present?
+    %p
+      %strong Output:
+      %code= @output_relative_path
+    %p{ style: "color: #6b7280;" } Progress will appear in the rendering jobs panel below.
+  - else
+    %p{ style: "color: #b45309;" } Render queued, but no output path was returned.

data/app/views/animate_it/renders/show.html.haml

@@ -0,0 +1,10 @@
+%turbo-frame{ id: "animate_it_render_#{@render_id}" }
+  - if @output_path.exist?
+    %p= "Render #{@render_id}"
+    %p
+      %strong Output:
+      %code= @output_relative_path
+    %p
+      = link_to "Open MP4", animate_it_path("/renders/#{@render_id}?download=1"), target: "_blank", rel: "noopener"
+  - else
+    %p= "Render #{@render_id} was not found."

data/app/views/animate_it/studio/_composition_list.html.haml

@@ -0,0 +1,7 @@
+- if compositions.empty?
+  %p{ style: "color: #666;" } No AnimateIt compositions registered yet.
+- else
+  %ul
+    - compositions.each do |composition|
+      %li
+        = link_to composition.id, animate_it_path("/compositions/#{composition.id}"), data: { turbo_frame: "_top" }